bartblast
I recently started a discussion about reactive patterns in Hologram, but I realized I need to step back and design the composability architecture first - the reactive patterns should fit within that broader framework.
Quick Context on Hologram
Hologram is a framework that compiles Elixir to JavaScript, letting you write isomorphic web applications entirely in Elixir. Components can run on both client and server.
Currently, a Hologram component is represented by a Component struct containing:
- State - the component’s data
- Emitted context - data passed down to child components
- Next operations - instructions for what should happen next (e.g., “run action X”)
Components can define:
- Actions - functions that run client-side and update local state
- Commands - functions that execute on the server
However, don’t feel constrained by this - I’m open to completely different approaches.
The Challenge
We’ll likely need some reactive patterns - things like:
- Memoization/derived state
- Effects (à la React’s
useEffect) - Watchers (à la Vue)
Or maybe something completely different! These are just examples from other frameworks.
In React, hooks provide elegant composability:
// Extract reusable logic
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = () => setValue(v => !v);
return [value, toggle];
}
// Compose it:
function Panel() {
const [isOpen, toggleOpen] = useToggle(false);
return (
<div>
<button onClick={toggleOpen}>Toggle</button>
<div>{isOpen ? 'Open' : 'Closed'}</div>
</div>
);
}
What I’m Looking For
How could actions, state operations, reactive patterns, and other patterns compose in Hologram?
Due to Elixir’s functional/immutable nature, the patterns will likely manifest differently than in React/Vue. That’s the interesting part!
Show me your ingenuity and creativity - every idea matters, no matter how unconventional or silly you think it is. Everything is on the table:
- Function composition
- Macros
- Explicit or implicit namespacing
- Flat keys
- Mixins
- Something else entirely?
Also worth noting: Hologram has compile-time access to the full call graph, which could potentially help solve this problem (though it doesn’t have to).
What patterns would you explore? Feel free to share anything from high-level ideas to concrete code examples or even full system designs.
Where Next?
Trending in Discussions
Other Trending Topics
Latest Hologram Threads
Latest on Elixir Forum
Sponsor Spotlight
Elixir, Erlang & messaging conferences from Code Sync. Next up: ElixirConf US (10–11 Sep) & Code BEAM Europe (21–22 Oct), Haarlem + online.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
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.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
derek-zhou
I think you are thinking too much. Honestly, nobody else matters, it is your project, so do whatever your heart lead you to. If I were you, I will just pick the path that require the least amount of work, as long as it does not prevent you from picking a more adventurous path later. You can have breaking changes! you can have multiple APIs!
nikfp
I always liked the idea of the reducer patterns introduced in Redux ans RTK myself. I didnt like all the plumbing that went into it sometimes, but the base premise of “starting state →input → new state” was simpler to reason about, and would also align with Elixir’s functional nature well IMO.
I also really liked Svelte’s writable and derived stores, as they were easy to compose inside a state module and expose only what I wanted exposed, so I could have a stateful reactive core that the presentation layer could bind to as needed.
In the end though, your leadership, preferences, and vision will have to be the deciding factor. For all the opinions you get on this question, you will naturally have a far better view of how it all fits together.
garrison
I am inclined to agree with this. Unless you’re going to copy an existing solution you have to accept that it’s going to take years of real-world use to nail down these APIs.
I find these discussions fun and helpful for nailing down my own beliefs (and finding out which of them hold up to scrutiny), but at the end of the day you have to iterate on something if you want to make progress.
I will see if I can come up with some thoughts, though, as I do think composition is important. Also remember that in a lot of these frameworks the components are the main unit of composition and features like Hooks or Signals are intended as a means to share logic across components (but they should still compose too, of course).
AstonJ
Bit off-topic for the thread but I’ll quickly respond.
While I would agree that following your heart/what feels right is generally a good way to go I also really like how Bart has been seeking feedback on things he feels might benefit from it
It helps people feel like what they want matters and often leads to comments like this:
It’s something which plays a role in project confidence and helps create a deep and personal affiliation.
I would go as far as to say Hologram, and the way Bart has been involving everyone (/his meticulous attention to these kinds of details) has all the hallmarks of it potentially obtaining that all-elusive cult status
(This won’t just be good for Bart or Hologram, but for the entire Elixir community).
Back on topic, I don’t have any specific thoughts myself other than saying I hope whatever Bart decides echoes his goal of making Hologram as easy (natural and intuitive) and enjoyable to use as possible.
nikfp
This is why I was drawn to Redux and Svelte Stores tbh. They allowed me to centralize state. So the components could be the method of composing UI, but the state could be centralized and decoupled which seemed a lot cleaner to me somehow.
Edit: Let me add an elaboration from an end user
Say you have some semi-complex state, and some of it is derived to either allow or disallow some action.
If the components are responsible for composing the data and deriving that, you have to pass the entire state to the component and then verify if the action is allowed, and then present accordingly.
OTOH, if the state can be decoupled, you can have the component be “dumb” which makes it easier to test in isolation. Then you have the state representation on it’s own which also makes it easier to test in isolation.
If the state is wrong, you have 1 place to check / debug. If the presentation is wrong, it’s dirt simple to sort out.
jam
I think it depends on the overarching goal and vision for Hologram. Zooming out for a second, it seems like these design decisions are mainly influenced by these opposing forces:
#1 seems to generally lead to verbosity but you as the engineer have full control over how things work. #2 generally results in having to write less code but more trust in the framework. If we’re keeping in line with Hologram’s goal to make web dev simple, then I think it should lean more heavily into #2 even if it means sacrificing some sense of control.
With that said, I think composition can be achieved mostly with components. I like the way Hologram is currently designed in this regard. It feels Svelte-like which I prefer. I think the main area that wouldn’t fall directly inside of a component would be some sort of shared store. I typically reach for stores seldomly though, most of my composition is done with components.
Currently, for a store in Hologram, it looks like I’d use
Context. If I wanted a global store, I suppose I’d have aContextat the app’s root (if I have this wrong, let me know). It might be nice to be decouple a store completely from a component and be able to use them in any component (maybe this is already possible?).Beyond that, I think what is missing are:
I think it might be a nice DX if both of these were macros, maybe
derivedandeffect(though I’ve never liked effect as a name, I’m not sure there’s a better alternative at this point).Whatever you choose, I suggest keeping the api and macro surface area small.
IMO, Svelte has done well here whereas Vue has not for example.
To be fair, I’m a bit Svelte-brained at this point. I imagine others that are used to other frameworks will be biased in that framework’s way of thinking too.
One other thing worth considering is: will / should Hologram support fine-grained reactivity?
I agree with Derek though: Ultimately, Hologram should be a reflection of how you think it should work. All of the other frameworks succeeded based on the opinions and taste of the primary author. In Bart we trust.
Lucassifoni
I share your view on composable state/store modules fully decoupled from UIs. Even with LiveView this is really powerful.
As an example, I have a few liveviews that are used by users but also used by programs.
Users act on state via LiveView’s handle_events, that call a public API exposed by the pure state modules to update the sockets, then LiveView re-renders.
But programs can build up state outside of components by creating and calling the pure state module’s public API in isolation, then just ask LiveView for a single render of the built up state.
There’s still coupling since those pure state modules represent UI state, not application state, ( UI_state = fn(app_state, user_or_robot_intents) if you wish) but being able to handle them inside or outside components is very valuable to me. That and the ability to compose smaller state into bigger state.
As Garrison showed it in the other thread, that makes for a bit verbose code for the simpler cases.
I also think Bart is leading the community in a new direction with Hologram and has all the rights of trying a few things and changing his mind
at least before 1.0.0 ! (And even after)
garrison
Just to clarify, my concern is mainly with complex (real-world) cases; simpler cases tend to come up only in examples. Whether you agree with me is another matter (and I won’t drag that debate here), but that’s my intent.
bartblast
While I do make the final decisions based on what feels right, I’ve learned that designing in isolation would likely create a project perfect for some past version of me, but not necessarily for the broader community. Hologram has grown beyond just my personal project - there’s already a growing number of projects using it, including in production. The broader success of Hologram means more Elixir use cases and potential new jobs for the ecosystem.
I hear you both on this. The challenge is that after 5+ years, nearly 10k commits and 1M lines of code, the project has real inertia. Changing core APIs at this stage isn’t a quick iteration - it’s measured in months of work, especially with plans for component libraries and other tooling that depend on these decisions. I don’t have infinite time to experiment, which is exactly why I’m being deliberate about these crucial architectural choices now.
To be clear, I’m not trying to please everyone - I’m trying to understand the solution space and how different patterns might serve real use cases. The feedback here helps with that, even if the final direction is my call.
bartblast
Great point about the reducer pattern - Hologram actions already work this way (current state → action → new state), so this validates that approach. I’d also love to explore how Svelte stores would translate to Hologram, and how these concepts could enable composability patterns. Would you be interested in showing a simple code example of how you’d imagine this in Hologram?