Hey there! There’s a new kid on the block!
What is it?
Full stack isomorphic Elixir web framework that can be used on top of Phoenix.
Inspired by
Elm, Phoenix LiveView, Surface, Svelte, Vue.js, Mint, Ruby on Rails.
How it works
To build your web app, you use basic Hologram blocks: pages, layouts and components.
Hologram builds a call graph of your code (which must follow some basic conventions) and determines which code is used on the client, and it then transpiles such code to JavaScript.
Because the state is kept on the client it makes the programming model simpler, and thanks to stateless or stateful components the app is easily scalable.
Code that is run on the client is encapsulated in “actions”, and code that runs on the server is encapsulated in “commands”. Actions can trigger commands, commands can trigger actions. Both actions and commands can be triggered directly by DOM events.
Client communicates with server through websockets - there is no boilerplate code to make it work, Hologram figures this out automatically.
What is already done
This is work in progress (although usable and used in production). To check what works and what is planned - take a look at the roadmap in the readme: GitHub - bartblast/hologram: Full stack isomorphic Elixir web framework
History / background
I tried to write this kind of framework first in Ruby, and I actually managed to create a working prototype, but the performance was not satisfactory. Then I tried Crystal, but it was very hard to work with its AST. Then I moved to Kotlin, but I realised that it’s better to use a dynamically typed language for that… Then I found Elixir in 2018 and fell in love with it. I started to work on Hologram in the summer of 2020.
Is it used in production?
Yes, it is used in Segmetric: https://www.segmetric.com/ Take a look at the “join beta” and “contact pages" which showcase form handling, or check the mobile menu. This all works on transpiled Elixir code! (But please, submit the forms only if you actually want to join the Segmetric beta or contact Segmetric - it is a live page, thanks!)
I want to see some code!
To see how Hologram app is structured, and see some actual code, take a look at the Hologram’s E2E modules: https://github.com/segmetric/hologram/tree/master/e2e
Basic example
defmodule MyPage do
use Hologram.Page
route "/my-page-path"
def init do
%{
count: 0
}
end
def template do
~H"""
<div>Count is {@count}</div>
<button on:click={:increment, by: 3}>Increment by</button>
<Link to={MyOtherPage}>Go to other page</Link>
"""
end
def action(:increment, params, state) do
put(state, :count, state.count + params.by)
end
def command(:save_to_db, _params) do
# Repo.update (…)
:counter_saved
end
end
# Action can return a new state, or a tuple {new_state, command, params}
# Command can return an action or a tuple {action, params}
# (This is similar to Elm architecture.)
I’m in the process of creating a basic website with installation guide. Let me know what you think about the project? What do you need to try it out? I will be glad to answer your questions