Which Front End Framework for Phoenix?

jslearner · December 11, 2019, 10:00pm

Which Front End Framework do you use with for Phoenix?

wolfiton · December 11, 2019, 10:10pm

What type of application do you want to create SPA(single page app) or SSR(server side rendering) ?

For general ideas:

SPA starts here

Angular
React
Vue
Svelte

SSR starts here

Next.js based on react
NUXT based on vue

If you are referring to css frameworks or sass frameworks please let me know.

jslearner · December 11, 2019, 10:35pm

Which SPA, SSR, and CSS framework is best suited to work with Phoenix? Any examples?

wolfiton · December 11, 2019, 10:38pm

What is you experience regarding css html and js?

You shouldn’t learn a js framework without understanding js es6 es7 and so on?

So Answer to my question and i can guide you further.

sb8244 · December 11, 2019, 10:40pm

All of them. They have no bearing on Phoenix. Pick the one that works best for you—I like React if I’m doing a SPA. I might lean to LiveView for smaller projects right now.

edit: minus SSR, though. I think only LiveView is SSR in Phoenix. There isn’t “React in Elixir” because there isn’t a JS execution context.

wolfiton · December 11, 2019, 10:42pm

I think that nuxt and nextjs are SSR if you use absinthe and apollo

bbous · December 11, 2019, 10:58pm

If your splitting your app up and using phoenix as a backend api you can use any of them and they should all preform the same, so basically preference.

jslearner · December 11, 2019, 11:16pm

I’m ok with HTML5 (including JS es6 and so on), just wanted some help with what plays best with Phoenix , I’m just starting with Phoenix.

jslearner · December 11, 2019, 11:23pm

I bought your book, just wondering when the Hands-On with Phoenix LiveView chapter coming? Thanks a lot for writing the book by the way, it’s much needed by the community!

sb8244 · December 11, 2019, 11:25pm

It should be really soon. The chapters are all written, but it can take a little bit of time after for review and just getting it ready for beta.

I added a chapter for single page apps with react as well. Big takeaway is that they play really well together and to follow component based design.

Thanks for getting it!

wolfiton · December 12, 2019, 12:03am

Then some books in phoenix might be a good idea to understand the eco system and also learn Plug from phoenix docs it would become your best friend.

I also have only a couple of months in elixir and phoenix.

Also a good css framework is bulma no need for !important overrides.

jslearner · December 12, 2019, 2:40am

Yeah I agree Bulma is a good CSS Framework, no JS too.

tme_317 · December 12, 2019, 5:20am

IMO it all comes down to personal preference and what you are building. Phoenix works great no matter what frontend architecture you choose (traditional MVC MPA, REST, GraphQL through Absinthe) and isn’t opinionated about that.

As you said, Bulma is nice since it’s pure CSS with no JS so you can pick your own JS approach. I found if you are a Vue fan then Buefy (which layers on top of Bulma) is excellent. Personally I prefer React as I find it easier to reason about but wanted to mention this in case you prefer Vue already.

I struggled deciding among the vast number of front end architecture decisions for many months and experimented with several options. For speeding up development (as a solo dev w/limited bandwidth) with fewer layers to test I’m making great progress with a hybrid MPA/SPA using LiveView with limited sprinkles of React components where necessary plus Bulma.

Hope this helps!

wolfiton · December 12, 2019, 12:04pm

Vue 3 will come with some cool features that I think you will like over react. It’s not stable now but the comopisition api looks awesome.also forgot to mention that Vue 3 is backward compatible so all your code can stay the same and you can use the old way or adopt the new way

Yama · December 12, 2019, 1:45pm

I believe it’s already been solved but my recommendation is, if you haven’t decided on an approach and have time, play around with your options.

Each has their own style to solve a problem frontend development has had for a long time in regards to the DOM.

I would say the backend and frontend has no real link to each other. Which ever you choose, the frontend role will be presentational and it’s job will be to just ask Phoenix for data (or some backend logic)

Imagine possibly a restaurant? A waiter tells the cook what needs to be sent out of the kitchen (created or gotten from the fridge (data)) then once it’s ready/done, it’ll give it to the customer (hopefully the presentation looks good)

A cook and waiter don’t do the same job but work together to present a client with something. Possibly a bad example but hopefully it’s helpful in regards to if a frontend framework (specific one) is required to work with Phoenix.

jslearner · December 12, 2019, 11:42pm

How about Elm?

Yama · December 13, 2019, 12:05pm

Honestly, I have never tried Elm or looked much into it. So I can’t really give you an opinion on that one. Hopefully someone in the community has and can give you a better insight on Elm Whichever you choose, I would say much like everyone has said look at how it’s implemented and see if that is what you want to do.

An example would be from my understanding with Angular, there are 3 files. A HTML, JS and one more that I can’t remember while with React, it’s all done in a single file due to JSX. Some might want it separate while others all in one file much similar when we consider CSS. These days we have CSS-IN-JS where we right CSS within a JS file vs importing a .SCSS or .CSS.