How to integrate Hologram with existing LiveView app?

Questions & Help Questions
,
1

Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app?

Looking for hints regarding:

  • Adding a Hologram component to a LiveView page
  • Sending commands / events between LiveView and Hologram components (e.g. JS.push, JS.dispatch)
  • Having Hologram router + LiveView router at the same time
  • Any other tricks and pitfalls that come to mind

Cheers!

2

I hope someone answers your question but I suppose another option would be to just go whole hog and convert everything from LiveView to Hologram. I think @olivermt did this recently. He may be able to share more.

3

Yeah I wouldnt mix them. I ported a 84kloc react app with tons of local state with complex multi stage forms.

Love it!

A few sharp edges for sure, but bart is really into this thing so he is on it if you find bugs :slight_smile:

4

Mixing them on the same page isn’t technically possible today, and even if it were, I wouldn’t do it - two runtimes competing for one DOM just doesn’t make sense, and there’s no event bridge between them by design. The good news is that converting LiveView to Hologram is a far shorter hop than the React port @olivermt did - both are declarative Elixir, so it’s mostly a mechanical translation, and AI tools handle it really well (honestly one of the best use cases for them). During the migration you can keep both routers side by side and convert page by page.

5

Thank you for the insights.

@olivermt What made you take the risk? Wanna share some bits and pieces?

@bartblast I see. I kinda hoped that Hologram would support an interactive island approach either via phx-update="ignore" for LiveView codebases or just via plain islands for static Phoenix views. Would be awesome to build transpiled colocated JS using Elixir :exploding_head:

6

What risk? I set up a loop engineering cycle and had great test coverage :laughing:

I saw a bigger risk in being exposed to pnpm ecosystem (I hope Bart will vendor the js deps in Hologram eventually)

7

The colocated JS part is the step you get to skip entirely. You do not write JS with Hologram, you write Elixir and Hologram compiles it to run in the browser.

Which is also why mixing is a bad trade. Wiring two very different execution models together is a large amount of work for a small payoff, and converting a page gets you the same interactivity without the bridge.

Yeah, already in the short-term goals - coming soon!