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