bartblast
Composability Patterns for Hologram - Looking for Your Ideas
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.
Most Liked
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.
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.
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.
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:
- Offering complete control and explicitness
- Abstracting complexity and optimizing for ergonomics
#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 a Context at 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:
- Derived / memoized values
- Side effects
I think it might be a nice DX if both of these were macros, maybe derived and effect (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.
Popular in Discussions
Other popular topics
Latest Hologram Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
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.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"