Hacker News new | ask | show | jobs
by dugmartin 2275 days ago
I'm playing with something similar on a side project inspired to Gatsy & Next but for Elixir/Phoenix. I've created a webpack plugin that compiles Next-like React page components into .eex templates and then optionally generates a bundle to "hydrate" the page using assigns from the Phoenix controller.

You get the speed/reliability of Phoenix and the (for me at least) power of creating your UI in React without having to run a node server at runtime. I'm planning on releasing the plugin once I've used it on a couple of personal projects to remove the rough edges.

2 comments

Would you consider open sourcing this? I’d be interested in using this for some of my own projects, having dealt with similar problems to the one you’re describing.

Phoenix Live View is cool and all, but still not stable enough for my liking. Also, depending on the use case, it can be unviable.

I plan to open source it soon but I want to try it out on at least one personal project first to figure out any holes in the api before I release it.

I have it working with a sample page that renders three dates (static webpack render date, phoenix render date and current date that updates each second with a timer) but I think I need to try it on a real page with real data.

Is that using Phoenix LiveView? Sounds pretty cool!
No LiveView in the mix (that is pretty cool though), it just serializes the static props to the html output if you enable hydration and then has a hook I wrote (useHydrate) that initially returns the static props for the first render (so you don’t get warnings about the render not matching the static output) and then has a callback that lets you map the assigns from the Phoenix controller to the props.