6 ms·

No it is not equivalent. My dream stack that I am using for my business is Phoenix, Live View and Stimulus.js with Tailwind. I have built projects on Laravel,

by sph 3y ago

No it is not equivalent. My dream stack that I am using for my business is Phoenix, Live View and Stimulus.js with Tailwind. I have built projects on Laravel, Django, RoR, React and a long tail of in house frameworks, and nothing feels as good as this stack for web apps. Ruby on Rails is quite underrated, but the BEAM is a spaceship that fits neatly in the list of unknown unknowns for 99% of software engineers: they do not know what the BEAM can do for them. Its process and mailbox model feels futuristic in its expressiveness and simplicity. It's easier than you think to get used to Elixir's functional language model. For me it was super easy, while with stuff like Haskell or Prolog I felt like I had to rewrite my brain from scratch. To end my proselitism, I am adamant that the first Live View demo by McCord and Valim will have the same staying power if not popularity as DHH's first demo of Ruby on Rails which spawned the modern MVC framework architecture of the past 15 years. The Live View model is in my eyes the next generation of interactive web architecture, the true successor to MVC.

pbowyer 3y ago
> My dream stack that I am using for my business is Phoenix, Live View and Stimulus.js with Tailwind. I am curious, why both LiveView and Stimulus.js? Why and how are you combining the two together?
- sph 3y ago
  For very small interactions, there is no need for a round trip and state held on the server. Imagine a disappearing burger menu, or a tooltip widget, or a "click here to copy to clipboard" link. For those sprinkles of interactivity, you need JS and Stimulus is ideal for that use case. I just have my Live View process render <input type="text" data-controller="copy-on-click" value="..." /> which is easy to understand and plays great with Live View's model. Don't forget that JS was born for this goal: small snippets of interactive behaviour; it was never meant to be the entire system.
  - clessg 3y ago
    Oh wow that's brilliant, I hadn't ever considered combining LiveView and Stimulus.js. If you don't mind me asking, what is the benefit over using `phx-hook`? Portability/interop with RoR, or? Either way, I'm shipping it to production immediately!
    - sph 3y ago
      phx-hook is a nice convenience that works only with Live View. It seems to me a better investment of my time to learn a solution that's just as lightweight, but I can use everywhere (i.e. in other projects, or in static non-Liveview pages)
      - clessg 3y ago
        Makes a lot of sense, thank you! I'm not much into Rails these days, but that's one thing I really appreciate about RoR's "frontend" efforts - their work tends to be quite reusable across ecosystems, e.g. Stimulus, Turbo, and apparently even Hotwire itself [0]. Heck, that even seems to apply to a lot of their non-frontend stuff, such as MRSK [1]. [0] https://www.akshaykhot.com/using-hotwire-without-rails/ https://www.akshaykhot.com/using-hotwire-without-rails/ [1] https://mrsk.dev/ https://mrsk.dev/
        sph 3y ago
        Yeah RoR with those libraries are also moving towards the "as little JS as possible" approach as well. Client-side logic makes sense in a vacuum, but then your crappy React app is in fact a distributed system, with all the complexity that entails. The radical idea of Liveview and similar efforts is that it's better just to return to basics and keep the logic on the server. It would be lunacy to try and build a distributed system with Javascript, yet that's the direction the SPA world is/was taking us.
  - brainbag 3y ago
    I've seen alpinejs mentioned alongside LiveView, what benefits do you see to Stimulus over alpine?
    - sph 3y ago
      I've never used alpine, so I'm not the one to ask. I've just given it a cursory look a couple years ago. I do not like how it's trying to fit logic in custom HTML attributes. Doesn't look great to me, and would pollute my Liveview templates with a matryoshka doll of nested logic: There's a top-level Elixir module, which contains a HEEX string that creates HTML, which itself contains Alpine.js logic as an attribute. Feels cleaner to me to just create a new .js file that exports a controller, and just instantiate it from LiveView (which still pollutes the HTML, but much less than Alpine does) That said, there is no good or bad answer. Alpine or Stimulus are certainly better than instantiating Vue or React. HTMX could fit very nicely as well. Use what you're comfortable with.
    - AlchemistCamp 3y ago
      I always avoided Alpine because it required allowing “unsafe-eval” in the Content Security Policy headers, which defeats a lot of the purpose.
  - pbowyer 3y ago
    Thanks for the info, most examples I'd seen of Stimulus.js used it for making server requests which seemed to double up with LiveView. Am I right that its main distinguisher over other JS frameworks is using controllers, and loading and initialising those on-demand?
  - AlchemistCamp 3y ago
    LiveView.JS was added a few minor versions ago to handle most of those needs without hooks or extra 3rd-party deps: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.htm...
alostpuppy 3y ago
Do you have a link to that demo?
- sph 3y ago
  The Live View demo or the Rails one? :-) Rails, it was this one 17 years ago: https://www.youtube.com/watch?v=Gzj723LkRJY https://www.youtube.com/watch?v=Gzj723LkRJY Live View, I'm not sure which is the first demo. There's "Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5" (https://www.youtube.com/watch?v=MZvmYaFkNJI https://www.youtube.com/watch?v=MZvmYaFkNJI)

by sph 3y ago

pbowyer 3y ago

> My dream stack that I am using for my business is Phoenix, Live View and Stimulus.js with Tailwind. I am curious, why both LiveView and Stimulus.js? Why and how are you combining the two together?

sph 3y ago
For very small interactions, there is no need for a round trip and state held on the server. Imagine a disappearing burger menu, or a tooltip widget, or a "click here to copy to clipboard" link. For those sprinkles of interactivity, you need JS and Stimulus is ideal for that use case. I just have my Live View process render <input type="text" data-controller="copy-on-click" value="..." /> which is easy to understand and plays great with Live View's model. Don't forget that JS was born for this goal: small snippets of interactive behaviour; it was never meant to be the entire system.
- clessg 3y ago
  Oh wow that's brilliant, I hadn't ever considered combining LiveView and Stimulus.js. If you don't mind me asking, what is the benefit over using `phx-hook`? Portability/interop with RoR, or? Either way, I'm shipping it to production immediately!
  - sph 3y ago
    phx-hook is a nice convenience that works only with Live View. It seems to me a better investment of my time to learn a solution that's just as lightweight, but I can use everywhere (i.e. in other projects, or in static non-Liveview pages)
    - clessg 3y ago
      Makes a lot of sense, thank you! I'm not much into Rails these days, but that's one thing I really appreciate about RoR's "frontend" efforts - their work tends to be quite reusable across ecosystems, e.g. Stimulus, Turbo, and apparently even Hotwire itself [0]. Heck, that even seems to apply to a lot of their non-frontend stuff, such as MRSK [1]. [0] https://www.akshaykhot.com/using-hotwire-without-rails/ https://www.akshaykhot.com/using-hotwire-without-rails/ [1] https://mrsk.dev/ https://mrsk.dev/
      - sph 3y ago
        Yeah RoR with those libraries are also moving towards the "as little JS as possible" approach as well. Client-side logic makes sense in a vacuum, but then your crappy React app is in fact a distributed system, with all the complexity that entails. The radical idea of Liveview and similar efforts is that it's better just to return to basics and keep the logic on the server. It would be lunacy to try and build a distributed system with Javascript, yet that's the direction the SPA world is/was taking us.
- brainbag 3y ago
  I've seen alpinejs mentioned alongside LiveView, what benefits do you see to Stimulus over alpine?
  - sph 3y ago
    I've never used alpine, so I'm not the one to ask. I've just given it a cursory look a couple years ago. I do not like how it's trying to fit logic in custom HTML attributes. Doesn't look great to me, and would pollute my Liveview templates with a matryoshka doll of nested logic: There's a top-level Elixir module, which contains a HEEX string that creates HTML, which itself contains Alpine.js logic as an attribute. Feels cleaner to me to just create a new .js file that exports a controller, and just instantiate it from LiveView (which still pollutes the HTML, but much less than Alpine does) That said, there is no good or bad answer. Alpine or Stimulus are certainly better than instantiating Vue or React. HTMX could fit very nicely as well. Use what you're comfortable with.
  - AlchemistCamp 3y ago
    I always avoided Alpine because it required allowing “unsafe-eval” in the Content Security Policy headers, which defeats a lot of the purpose.
- pbowyer 3y ago
  Thanks for the info, most examples I'd seen of Stimulus.js used it for making server requests which seemed to double up with LiveView. Am I right that its main distinguisher over other JS frameworks is using controllers, and loading and initialising those on-demand?
- AlchemistCamp 3y ago
  LiveView.JS was added a few minor versions ago to handle most of those needs without hooks or extra 3rd-party deps: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.htm...

alostpuppy 3y ago

Do you have a link to that demo?

sph 3y ago
The Live View demo or the Rails one? :-) Rails, it was this one 17 years ago: https://www.youtube.com/watch?v=Gzj723LkRJY https://www.youtube.com/watch?v=Gzj723LkRJY Live View, I'm not sure which is the first demo. There's "Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5" (https://www.youtube.com/watch?v=MZvmYaFkNJI https://www.youtube.com/watch?v=MZvmYaFkNJI)