Out of all Vue is my favourite frontend framework of all. Its lightweight, fast(Vue3 uses Proxy objects) and intuitive. Vue is just a view layer on your data.
React is also cool, but I like Vue more.
Watch this awesome talk by Evan You, creator of VueJS. This will compare vue with other frameworks and list even cons of using Vue which is cool 
Always decide the framework or library according to your requirements and your team.
AlpineJs! Because itās the only framework that makes working with Javascript bearable. It also reminds me dearly of the KnockouJs golden era (where Javascript was only used to sprinkle HTML with magic). Another factor that contributes to my choice is that I prefer to work with SSR / HTML-centric applications.
Thanks for the shout out 
Weāve used LiveView and Web Components together now on several projects and itās worked out very well. In my humble opinion, itās a perfect fit. Live View is great at managing DOM Elements, and since Custom Elements are still just DOM Elements at the end of the day, it makes a nice boundary to add in javascript when it is the best solution to a specific problem.
In the context of pure web apps (canāt speak for needing native) when able to choose and pre-liveview I would go Nuxt/Vuejs2.
React also seems to work fine.
If I had time I would like to try Svelte & Elm. I wouldnāt choose Angular ever.
Itās funny that from those (except svelte & elm that I havenāt tried), only Vuejs doesnāt natively support TS (or didnāt), and still itās way easier to build correct, fast, complex applications with it, while the others when using TS I can never be sure theyāre correct. I havenāt used Vuejs3 so canāt speak about it, but was a bit sad to see the push towards hook-like flows as I (for reactive UIās) prefer quite a bit the original Vue organisation and declaration style.
Now I think I will use predominantly LiveView with a bit of plain JS (Alpine works fine but I prefer to not use another dep if I can get away with it). Testing and capabilities are simply unmatched and most of the problems I ran into were easily solved or simply required a different approach to how they would be done in a SPA.
Using Liveview Components with React works great. This allows react to handle all the presentational aspects, which include transitions, ui kits and allows leveraging oftthe JS ecosystem. While all state is held by the liveview process, eliminating the need for redux, routing, etc. Its quite easy to control components server side as well, or swap out react components on the fly.
I really like https://stimulus.hotwired.dev/. IMO itās a really good balance between decorating your HTML with a few attributes to handle basic configuration and bindings while the core logic of what your JS does lives is its own isolated JS file which makes it super easy to reuse things without duplicating a ton of code.
It was created by the Rails team so it comes with a number of conventions out of the box to reduce boilerplate in general. I havenāt found another front-end library that makes it so easy to integrate and reuse common functionality not only in the same project but across different projects too.
As someone who isnāt big into JS and being brand new to Stimulus, it was pretty easy to get going. It took about a day to get generic reusable Stimulus controllers for things like a color picker preview, ajax content loader, image upload preview, file upload validation, toggling visibility, tabs and modals.
No extra external libraries were used to get the above functionality too. Most of those controllers are 15-50 lines of super straight forward JS. Stimulus really sets up nice abstractions to ease you into developing real world features.
Vue 3 + Quasar
I have always been a big fan of Svelte but always found that templates were too static, and would like JSX better. I have now found Solid JS and will use it for my next web project.
I have a Vue app with over 70k lines of code. It has scaled very well since the beginning and has allowed me to be productive. Unlike React, I feel that Vue gives you a lot of freedom and flexibility, and does not get in the way.
I use Vuetify as the material design framework. Itās the largest UI framework in the Vue ecosystem I believe, and has a large team behind it and receives regular (weekly) updates.
Can Quasar be used directly by LiveView or is it tied to Vue at the hip?
I use Liveview the vast majority of features. I always think: can I do this with Liveview, first and foremost. I consider Javascript a liability in my project.
In cases I feel like client-side would feel nicer for users, I use AlpineJS with Phoenix Hooks.
Example: I use a Phoenix Hook to send an event to my Liveview after mount. The Liveview sends price points to my javascript hook, which then renders a chart.js for price history.
Page loads really fast, and I donāt bog down initial page load by calculating all the chart stuff.
My two libraries of choices for the frontend are:
SolidJS ā for SPAs requiring a particularly strong focus on UX/UI and lots of specific customization of client components and behaviors;
LiveView ā for all the other type of apps.
(and I really dislike Svelte)
Can you please tell me your view point? Did you find the edge cases where it fails?
For me, the breaking point was the fake html, css and js. It looked like Iām writing normal code in separate files, however once it compiled, it was mush. I couldnāt debug it properly.
Also, it was outdone by Solid.js.
Will give the below framework a try tonight, but maybe end up writing plain JavaScript or use Alpine.
I had started to write a codebase in Svelte for almost a year and didnāt like the outcome of it at all.
The main reason is the lack of composability of its reactive variables. Svelte offers reactive values, reactive statements and stores. Basically if you want to create reusable reactive utilities you have to rely on stores, but it never felt natural to me to build many stores and derived stores, move state and state management outside of the components, ā¦ Mostly I ended up with very large components with lots of state and state management in the same file.
Later on I tried on SolidJS and it felt immediately much easier and natural to organize my appās state. Just shortly after picking up Solid, I was already creating some packages for my app with utilities to help with state management. The experience was totally different; looking back I would even choose React over Svelte despite the superior performance of Svelte, as I think it just doesnāt scale well for larger apps (and I believe every app grows large or is intended to) for the reasons mentioned.
Other points I donāt like about Svelte:
Really love how easy itās to use Lit for frontend, easy to debug since itās just the dom and you can just inspect an element and run functions.
It also allows for real separation of concerns between Phoenix and Liveview and the JavaScript part.
Ā© Copyright Elixir Forum | Terms | Privacy & Cookies
