As for why not do JSX-style directly in Elixir - you’d need either a custom compiler (which would be complex and lose Elixir tooling compatibility) or sigils (which wouldn’t be as seamless as native JSX syntax). The data-based template approach felt like a better fit for the language.
Anyway, just wanted to share the thinking behind Hologram’s templating approach. I’m not saying it’s universally better than JSX, but I do think it leverages Elixir’s strengths better.
Since I started this thread, I have been using only inline templates (no more .heex files) in my app, and it made my life much easier. I can move code around, they are just regular function. I can refactor, modularize and in general I understand the code better.
It’s a bit anecdotal experience and might not apply to all usage, but I highly recommend it.
Not really an issue thanks to display: contents (or just contents in TW).
Don’t know about React and VDOM, but LiveView (LiveCompoents) + web components has pretty much solved all of my problems and eliminated the need for a JS framework since there’s virtually nothing you can’t achieve with this combo and the Lit library provides a decent way to deal with reactivity (let alone that the Lit Signals is planned for becoming a part of the standard i.e. built in the browsers).
This is totally subjective and UC dependent IMO. In our (pretty large) code base most of our templates are in separate heex files while the LiveComponent modules contain only the pure Elixir code (in charge of managing the state which is often not trivial in our case). We keep all the template files (both the main one, any possible alternatives to it and any local function components) typically in the same directory named after the LiveComponent file name and embed them all together with embed_templates. This has proven pretty compact, well encapsulated and easy to move around/refactor when necessary.