dli
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!
Where Next?
Trending in Questions
Other Trending Topics
Latest Hologram Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Bringing learning, work and compliance together since 1987.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 6 of 6 Posts
jam
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.
olivermt
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
bartblast
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.
dli
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 Elixirolivermt
What risk? I set up a loop engineering cycle and had great test coverage
I saw a bigger risk in being exposed to pnpm ecosystem (I hope Bart will vendor the js deps in Hologram eventually)
bartblast
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!