How We Replaced React with Phoenix
By: Thought Bot
5 Likes
From the Thought Bot article:
We also added Turbolinks to the app which makes page transitions nearly seamless and let us keep that single-page app feel.
Older tweets on the topic:
https://twitter.com/josevalim/status/591658331988742144
https://twitter.com/mschae/status/615617889870159872
Would be interesting to see in a Phoenix app just to compare and out of curiosity. I actually quite liked Turbolinks (in Rails anyway).
2 Likes
Yea, I always thought it was a very solid concept for more straightforward sites too. The bulk of your page load time is assets and turbolinks prevents all of those reloading on every page. Even if they’re browser cached, the browser still has to make the HEAD calls to verify last modified and etag for every asset. After reading that article yesterday I tried loading it up on my site but kept get blank pages on every click.
Turbolinks is one of those things that I’d love to be able to get working if I wanted it, but would definitely stay away from building into Phoenix under any circumstances.
1 Like
This is not true. Browsers do not make HEAD requests to check if a cached resource is fresh. They also won’t make a request at all if the resource is cached and the response had cache headers which indicates the resource is long-lived. All proper asset systems makes sure to set response header that ensures the client caches the resource for a long time.
2 Likes
I posted this in another thread but maybe something like progressive rendering would be a better fit for Phoenix…
I spend too much time in Firefox Developer Edition. 
The reprocessing of all CSS and JS on each page load would still apply without Turbolinks though, even if it does have a far future expire.
Seems would be good match for Phoenix for MVPs. I have personally never used it so would appreciate information from people who have experience with Turbolinks in production.
Seems like it would actually be fairly easy to do in Phoenix, although I wonder if it is still useful with HTTP/2.
1 Like
It’s for the most part orthogonal to HTTP/2. It’s more that if there are time and/or resource constraints for delivering full size SPA+Server side rendering+API+Android+iOS solution this seems to provide a “good enough” option. The fact that with http/2 we will get faster page transitions if used with turbolinks is just an added bonus.
1 Like
Hmm, an idea for even faster, instead of another request and then swapping the body, could request it over an open websocket. Would be easy to package up into a library.
2 Likes
See thread in the Phoenix category: Turbolinks with Phoenix
I have never tried Turbolinks before, but from what I’ve read: You don’t need it in Phoenix.
1 Like
@andre1sk I’ve merged your thread with the existing one
With regards to Turbolinks, I actually quite like it (with Rails anyway) - it helps give the site an app feel. You can see it in action on a Rails site here (only on info, photos, and want more pages - the forum is not Rails) and some cat pages like here.
2 Likes
I’ve been toying around with a turbolinks/react apps lately. So far it seems quite solid. Turbolinks makes all the crud stuff seem snappy and react allows for the higher fidelity UI to be well designed and sprinkled throughout the app. It has pain points, but far fewer pain points then going full SPA.
If enough folks are interested in this I would be more than happy to extract a demo app out of my project.
7 Likes
This sounds pretty cool. Currently I’m playing with vue.js because it plays well with the rendered DOM.
But I’m very interested in a demo app, or more information
3 Likes
Would be really cool
[quote=“nerdyworm, post:14, topic:1091”]
It has pain points
[/quote] What would you consider to be the biggest pain points?
I would also like to see a demo how you integrated turbolinks and react into phoenix without having a SPA.
I added a turbolinks branch to a demo forum app that I made just to see what it would be like. You can view it here if you want
1 Like
How does it perform with phoenix? Done any timings with Chrome’s network graph or so? Any integration issues? Any CSRF issues? Etc…?
2 Likes
