Simplify React and Phoenix using Inertia JS: A quick look

[@joemartinez3218]

Just echoing the prior comments - this video was really well done. I had looked at inertia and didn't grok it. This video cleared that right up!

[@vic1918]

This is CRAZY FUN! Thank you very much for the content.

[@mathieudelacroix9154]

Straight to the point, that's a great video and I am definitely gonna try inertia

[@nirmitdalal1551]

Amazing! Your style is genuinely refreshing 👍🏻

[@ignasiespi]

great format, explanative but straight to the point!

[@andersmellson]

This is a really cool stack, thanks for sharing!

[@DanielBergholz]

This is great! Thanks for sharing!

[@webspaceadam]

so cool we have an adapter that is official now.

[@hugobarauna]

Awesome!

[@solvm1652]

oh snap

[@balen7555]

How does this compare to live_svelte? There I get the best of both worlds kinda, where I do server rendering, but for immediate actions where latency hurts (like opening modals), I just use client sided svelte.

[@CodeAndStuff]

Live Svelte video coming soon

[@BorisBarroso]

Thanks for the great tutorial. How does this compare to phoenix_live_react?

[@CodeAndStuff]

Thanks! I haven't tried phoenix_live_react yet, but if it's anything like live_svelte I imagine that it's quite different from Interita. Inertia primarily solves the problem of establishing APIs to fetch data for a page, without using LiveView / Phoenix Channels. It originally came out of the Laravel PHP community and the backend API was ported over to Elixir. On the other hand, live_svelte (and I assume phoenix_live_react) actually use the LiveView websocket to interact with the backend. This provides capabilities like pushing data updates to the client and participating in Phoenix PubSub. That's not to say you can't do PubSub in an Inertia app-you'd just have to mount the Phoenix Channel yourself. Hopefully that makes sense! If you want to know more about live_svelte, I have a video on it here: kzbin.info/www/bejne/gnO8gpKEgbt-edk

[@BorisBarroso]

@ thanks for your answer. I use it inertia in a rails project and I really like it. I wonder if it makes sense to use in phoenix if there is livesvelte or live_react. It solves a different problem but anyway liveview is amazing since it basically improves the default controller view working well with SEO

[@prashlovessamosa]

Please create more stuff on phoenix

[@tensiondriven]

Very nice. I wonder if it will *only* work with React, or if it will mount any type of function component?

[@CodeAndStuff]

Inertia supports React, Vue, and Svelte out of the box. The protocol is pretty simple, so I imagine one could port it to anything else with a little effort if there isn’t already an unofficial adapter out there.

[@eileennoonan771]

It would be interesting to see a comparison between this and LiveView

[@CodeAndStuff]

I considered diving deeper into that comparison, but realized in my mind it comes down to this: If you don’t need to use React, Vue, or a ton of JavaScript that’s hard to fit into a hook, LiveView is probably the best choice for an Elixir team. If you have extreme client-side functionality requirements or strong latency concerns, consider Inertia.

[@0Orion]

Can React Inertia be used with Ash framework?

[@CodeAndStuff]

I think they would be compatible, but I haven’t given it a try yet!

[@valeriehyun2512]

can you review Live Svelte, or Live Vue? i think its more relevant rather than react and phoenix with inertia bridge..

[@CodeAndStuff]

Live Svelte video coming soon.

[@pl4gueis]

I get the argument about having to use React if you are forced to use a component library (ask yourself if its worth the complexity) but whats up with all the arguments about "high latency connection"? Its not like React doesn't need to also fetch stuff from the server and in form intensive web apps there is really no difference. You load the page. Fill the form and send it to the server.

[@CodeAndStuff]

The latency stuff comes up for immediate interactivity like opening a modal. There were arguments against Rails Hotwire a few weeks ago where the Hey calendar was compared to Google Calendar. Since the modal code was included in the calendar code bundle, the time from clicking the “new event” button to the modal showing was near-instant. In a Hotwire / Liveview context, this button press event would be sent to the server and HTML would be returned.

[@CodeAndStuff]

Agreed though: if a server round trip is required for both approaches, or if the JS bundle is excessively large, the advantage may swing back toward the server-rendered approach. “It Depends” is definitely in play here.

[@pl4gueis]

@@CodeAndStuff Way too many people don't like "It Depends" because they want it to be easy but engineering is not and never will be easy so its ridiculous to cling to that. Imagine saying building a house is easy and there is only 1 way for everyone. Thanks for claryfing the thing with the Modal :). Didn't know that.