Which UI framework you prefer to use along with Phoenix API back-end?

I currently do a hybrid of both, mostly due to business constraints.

I share react code on mobile and my webapp interface, but I reuse the presentational react components in eex templates as well to have some interactivity on the pages that I want to be SSR’d and indexed.

If I was working with only Web, I would just stick to eex everywhere and sprinkling react widgets where I need them.

I sometimes have to use React, but my preference is:

1. For most apps: “Sprinkles of JS” (UJS + Turbolinks)
2. For very complex front-ends: Vue

When using Vue, I still often do routing from the backend, and make all of or most of the template files a Vue component (as is fairly common among Laravel devs).

For UI frameworks, I’ve worked most with Bootstrap but am getting more interested in Tailwind. Vue Element is also interesting.

I like using Bulma when wanting many pre-built widgets but have also used Tailwind CSS in a recent project and really like it for more custom designs when wanting to be closer to CSS.

Now that LiveView is out, I’ve been experimenting with a more hybrid approach with server-side “components” (i.e. stateless “partial” ~E functions or stateful child ~L Live Views), routing only server-side (regular and live), and sprinkling in presentational react components as needed.

I do think this will eventually work great and speed up development of some apps by removing much of the complexity of API/GQL/client side state but still haven’t figured out how to pass LV hooks (especially pushEvent callback) into a react tree cleanly. Just waiting for more interop examples in the wild before testing this POC.

Seems a strange way of looking at things.

Phoenix may assemble the HTML/JS/CSS - but once it’s delivered to the browser it’s free to take on a life of its own. Not taking advantage of the separate browser resources is an implementation choice - not a lack of separation.

Lately I’ve really liked using https://materializecss.com.

I use a combination of Phoenix HTML and LiveView. I use Tailwind CSS.

I think this was an obvious point to make, but it seemed clear to me at least that the op was referring to using a more traditional client server full page refresh approach when they said Phoinex HTML. Of course the response could contain any number of JS frameworks

I meant Phoenix with built-in eex HTML templating vs JSON backend with JS driven front-end.

I have tried to use just eex for web apps I’ve built and always end up going back to Vue. You simply can’t match the experience (easily at least) of using a framework like Vuetify. I think Vue is pretty simple and easy to understand and is by far a better UI experience than eex from a development perspective. Combined with Apollo on the frontend and Absinthe on the backend the data transfer between server and client is straightforward. Live View is interesting but you still miss out on all the nice things you get from a javascript framework. I also think working in javascript for frontend work is superior to a server side templating engine. Maybe that’s just because I enjoy javascript?

jQuery and Bootstrap 4.3, I gave up on front end rendering for now.

I’ve invested a summer in VueJS 2.5 iirc and it going to change in 3. Ugh. After a few years out of front end and I decided that front end was stable enough… noooope. I did Ember.JS and a little bit of Angular 1 before.

Highly interested in LiveView though, but I’m a one man shop, I’ll wait for it to be better.