Which JavaScript framework do you prefer to use with Phoenix?

If I have to use one I would use Svelte. I don’t write more than a few thousands lines of Javascript anyway so I like to use something simple. Alpine blurs the boundary between code and data too much for my liking.

I’ve used pretty much all of them, though not for too large projects. My personal conclusion is that, unless you have some specific product that requires a feature that only one of these offer, then it doesn’t really matter.

For the most part, except maybe for Angular(and maybe Ember?) they’re view libraries, so they’re just a templating system and some reactivity system to trigger view updates when data changes.

React and Vue have large ecosystems. Vue has always been a bit lighter(if we count react + react_dom) than react, but really it’s not that important. I’ve fiddled with React and Vue 2, I built a somewhat big Vue SPA, there’s nothing particularly weird about them(except the react hooks rules). Vuex was a pain in the ass, because at the time I didn’t really understand the problem it solved and everybody was hyping redux like stores. Lesson learned there. They both performed very badly in my low end phone. I’m not 100% sure if it was because of the framework or because of my mistakes, but switching to custom elements and doing stuff myself solved it for the most part.

Svelte has a compiler to “optimize” the code and “reduce bundle size” and “gain speed”. The truth is that not using a Virtual DOM approach is not a benefit per se, libraries like Inferno use VDOM and perform better in a lot of cases. Bundle size is amortized for small projects, but if you have lots of components then the promise of “vanishing js framework” starts to break. It’s fast and excellent, but not the fastest. Still for a lot of use cases I’m unsure if this is a useful benchmark.

Solid is another library that recently reached v1.0, it’s compiled as Svelte, but faster, and Ryan(the author) is a very nice person. The api is very similar to react hooks, but the reactive system is far better. If you know the Meiosis pattern or RxJS, it has similar ideas. If I were to use one today, I would probably pick Solid, because of Ryan and because it uses similar ideas to the ones I’ve been playing with in the past.

Marko is a framework by the Ebay people, it’s able to do SSR, streaming and a lot of the stuff React now presents as shiny new but since 2014. I’m very interested in it but didn’t have the chance to use it.

Then you have the Browser, you can use the Custom Elements API and write components that render using something like Lit or uhtml, but this is more of a DIY approach. I love this approach, but I understand some people just want to use a full blown framework.

I’d love to give a recommendation but after using a lot of them I realised that the complexity comes from building UIs, not so much from the frameworks themselves. People have built awesome stuff with all of them.

Is this a compliment? I am not a native English speaker, so I am not sure what you mean

Wow, great experience and a nice reply. You should write an article about it. Thanks a lot for these insights.

i will take a look at Solid. I have heard about it a few months ago but haven’t explored it any further.

Haha, My fancy English tricked you. I prefer data stays data and code stays code, therefore I don’t like Alpine.

Solid is new(actually in development since 5 or 6 years ago), so please keep in mind it has a small community and you’ll be in a similar position to using Elixir or Svelte some years ago, expect to do stuff by yourself instead of using component libraries. If you already feel comfortable writing vanilla JS then, as usual, it won’t be an issue.

I guess my takeaway here is, from these I listed, pick the one you feel most comfortable with and that makes the most sense for your project.

Alpine JS is my go to for now

I am uncomfortable with all of them – because it’s JS. What do I do then?

Seriously though, golden post!

clojurescript and shadow-cljs for the rescue

So how about LiveView with Custom Elements?

After reading your piece I checked and lo and behold a nice guy named Chris Nelson at Gaslight wrote a blog post about pairing LiveView with custom elements + Lit.

In the post Chris writes about connecting LiveViews to Custom Elements via the Custom Events API, and the good folks at Gaslight even maintain an NPM library for this:
https://www.npmjs.com/package/phoenix-custom-event-hook