As I currently have lot of things going on (2nd baby arriving in a few weeks, house construction and lot’s of work to cover the costs for everything), I’m not sure if the project will be a usable product anytime soon.
Congratulations! and definitely understand
Indeed, I started with the idea of a having a Vue SPA. I’m not really a front-end guy and wanted to give Vue a try. I later decided to go the EEX/HTML path because I was not feeling really well with writting that much Javascript . In the end, I will try to render most of the interface using server-side rendered HTML and React/Relay for complex components (branch/tag for example).
Yeah, this is exactly how I felt in my first iteration. Nice to know I’m not alone! I always looked forward to days that were heavy in backend Elixir/Phoenix/Ecto/SQL after spending a few days in JS-land. Also, I like Vue but felt it messy and too highly coupled sprinkling it in EEX, targeting it by ID, then writing the JS Vue instances in another per-page .js file.
I felt encapsulated components were a cleaner answer but couldn’t figure out how to embed Vue SFCs with EEX (like the way GitHub - geolessel/react-phoenix: Make rendering React.js components in Phoenix easy or your react_components.ex
file works). Found no examples in the wild doing this with Vue/webpack without going full SPA. At that point decided to learn/try React components instead.
A while ago, I wrote a small SPA using React/Relay + GraphQL. I was pretty amazed how easy it was to implement once the backend was ready (Absinthe). But still, I’m not a Javascript person and for bigger projects, I prefer to stick to render plain boring HTML from the server…
I realize I’m probably overcomplicating things at the moment which will bite me later, but currently experimenting with a fully decoupled React frontend (written in ReasonML instead of JS) progressively rendered server-side by NextJS talking to Phoenix using GraphQL. It’s super fast for the client and most things just work even if they have JS disabled! It’s early and so far, so good, but as a fallback if my experiment fails I’ll probably just follow your lead and go back to EEX rendering with some React components for the complex stuff.
Again, thank you very much for sharing your code and your insights on making this architecture change!