praveenperera

praveenperera

Turbolinks with Phoenix

How We Replaced React with Phoenix
By: Thought Bot

Most Liked

homanchou

homanchou

Any one tried Morphdom? https://github.com/patrick-steele-idem/morphdom

Supposedly simple way to update parts of DOM preserving states like input cursor positions

As described in this well written blog post: https://0x2a.sh/replacing-react-with-rails-66e25cd23777#.yuwzpcj6m

It feels like I’m seeing more of the “replaced react with traditional rails/turbo-links” type of posts suggesting web-dev is coming round full circle:

Early 2000’s.
Full page refresh is the standard. Works great.
Sprinkle in a little js. Works good.
Add more js, jquery mess. Not so good.
SPA everything. Explosion of frameworks and tools. Total confusion, increased development time.
Now:
No more SPA. Go back to full traditional full page refresh. Hey, still works great!
Now add back a little js… :wink:
(continue…)

nerdyworm

nerdyworm

As promised a Phoenix, Turbolinks, React, Redux, and Immutable.js example. Redux and Immutable are not a requirement for this setup, but they make frontend work a tad more enjoyable for me :slight_smile:

source: https://github.com/nerdyworm/returb
demo: https://sleepy-shore-92135.herokuapp.com (disclaimer: user editable content on the internets)

Pain Points/Things I haven’t figured out:

  1. Mix of html, server side js, and json serialization are required to get everything working in a real app. Full SPA would only require json.
  2. I’d really like to override the redirect function instead of: https://github.com/nerdyworm/returb/blob/master/web/turbolinks.ex#L2
  3. Turbolinks caching and react components that change state cause some screen flickering. My current solution is to basically just bust the cache on state changes.
  4. Remote forms are a bit tricky to get right when react.js components are involved.
  5. Flash messages are not working, not sure why. Probably simple.
  6. You have to go all in with Turbolinks if you have any components that depend on global state. I actually have not run into this yet, but I can see it happening in a full featured app.

I do not have that much experience with React and elixir. I could be doing it totally wrong. If I am please help :wink:

If there are any questions just ping me and I’ll be happy to help.

Cheers,
Ben

nerdyworm

nerdyworm

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.

Where Next?

Popular in Discussions Top

PragTob
Hello everyone, I know we had quite some threads (read through lots of them) about background job processing but it remains a hotly deba...
New
owaisqayum
I have a sample string sentence = "Hello, world ... 123 *** ^%&*())^% %%:>" From this string, I want to only keep the integers, ...
New
Nvim
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
mmport80
I have put far too much effort into Dialyzer over the last year or so - and basically - I doubt it’s worth the effort. It’s not as easy ...
New
rms.mrcs
A couple of days ago I was discussing with a friend about different approaches to write microservices. He said that if he was going to w...
New
restack_oslo
Hello, Please pardon me for any faux paux. I am 46 and this is my first time on a forum of any kind. I wanted to to get answers from tho...
New
chulkilee
Here are the list of HTTP client libraries/wrappers, and some thoughts on HTTP client in general. I’d like to hear from others how they w...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
Markusxmr
Since Drab has been developed for a while in the open, introducing the Liveview functionality in a way it happend appears to undermine th...
New

Other popular topics Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53578 245
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I fore...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement