A perfect marriage of JavaScript and Elixir
LiveData
who am i
Co-founder of a boostrapped SaaS
Webhacker
Rails
my journey
React
Elixir
let's start with React
frustration.
why?
misunderstanding
what does it do
fn(state) -> UI
UI events
what it doesn't do
data fetching
state management
routing
project organization
caching
react excels in web uis
one way data flow
immutability
purity
React is very functional on high-level
react
as a set of primitives
for building Web UIs
Hypothesis: if you treat it like a set primitives, it's no longer frustrating
let's talk about Redux
One of many State Management libraries for React
Helps keeping state, but that's it
Introduces another layer of FRUSTRATION and BOILERPLATE
what does it do
fn(state, action) -> state
that's it!
redux is also a primitive
no data fetching
no caching
no sharing client/server logic
no handling side effects (you need to use separate libraries for that!)
recap
React excels in rendering web UIs
there is more to building web apps than rendering UI
ecosystem for other stuff is fragmented and frustrating on its own
let's talk about GenServers
fn(message, state) -> state
, side effects
defmodule TodoList do
use GenServer
@initial_state [%{id: 1, name: "Finish slides"}]
def init([]) do
{:ok, @initial_state}
end
def handle_info({:add_todo, todo}, state) do
{:noreply, [todo | state]}
end
def handle_info({:remove_todo, id}, state) do
{:noreply, Enum.filter(state, &(&1.id != id)}
end
end
const initialState = [{ id: 1, name: "Finish slides" }]
function todosReducer(state = initialState, [action, payload]) {
switch (action) {
case 'add_todo':
return [payload, ...state]
case 'remove_todo':
return state.filter(({ id }) => id !== payload.id)
}
}
Elixir GenServer
Redux reducer
LiveView
Elixir + Phoenix is excellent enough, and LiveView is what really sealed the deal for me as the perfect web development stack
started using LiveView after any years of single page apps... all I can say, is "oh fuck, did we get it wrong." The experience is truly great.
LiveView
strips frontend code to bare minimum
by reimplementing React on the server
LiveView
strips JavaScript code to bare minimum
by reimplementing React on the server
LiveView
Elixir all the way down
React + Redux
JavaScript all the way down
LiveData
GenServer to keep the state
React to transform the state into UI and handle events
let's write
Hello World
JSFiddle for HAProxy
Phoenix LiveData
By Lucjan Suski
Phoenix LiveData
- 521
