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.
(This won’t just be good for Bart or Hologram, but for the entire Elixir community).
IMO, Svelte has done well here whereas Vue has not for example.
at least before 1.0.0 ! (And even after)
I’ll admit I overthink things constantly (just ask anyone who knows me), but at least it’s paying off in ways that matter. The cult status thing made me laugh though - let’s see if we can earn it!
.
