Type-Safe LiveView

with Gleam

Quinn Wilton / @wilton_quinn / quinnwilton.com

Well-typed programs cannot "go wrong".

- Robin Milner, A Theory of Type Polymorphism in Programming (1978)

A little bit about me...

  • Architect & Security Researcher @ Synopsys
    • Building automated security analysis tooling for web applications
  • Background
    • Reverse Engineering
    • Malware Analysis
    • Competitive CTF player
  • Programming Language Theory Enthusiast
    • Active contributor to Gleam

Type-system?

  • The set of rules used by a programming language to define, detect, and prevent illegal program states using types.
  • Erlang / Elixir / Ruby / Python are dynamically typed
    • Type violations are caught at runtime rather than compile time
  • Haskell / Typescript / C++ / Java are statically typed
    • Type violations are caught at compile time
  • "Let it crash" means that dynamic typing works really well for Erlang

...then why does erlang need types?

Compile-time documentation

  • Functions
  • Data Structures
  • Errors

Domain Modeling

  • Nullability
  • Mutual Exclusivity
  • Non-Emptiness

Carefree REfactoring

  • Exhaustiveness Checking
  • Function Signatures
  • Decomposing Interfaces

Critical Systems

  • Safety Critical
  • Mission Critical
  • Security Critical

The quality of software depends primarily on the programming methodology in use. [...] A methodology can be easy or difficult to apply in a given language, depending on how well the language constructs match the structures that the methodology deems desirable. [...]

- Barbara Liskov, Abstractions Mechanisms in CLU (1977)

Gleam - Fast, friendly, functional!

  • Statically typed functional programming language that compiles to Erlang
  • Four principles:
    • Be Safe
    • Be Performant
    • Be Friendly
      • Elm style error messages!
    • Be a Good Citizen
      • Easy interop with BEAM!

What can gleam do now?

  • Almost anything Erlang can do
  • Libraries exist for:
    • Web Servers (Plug, Elli, Cowboy, Lean)
    • HTTP Clients (httpc)
    • JSON (jsone)
    • Postgres (pgo)
    • Templating (mustache)
  • Midas is a web framework
    • Plum Mail — a Y Combinator funded company
  • A wrapper for OTP is in progress
import gleam/int
import gleam/string

pub opaque type Counter {
  Counter(value: Int, step: Int)
}

pub type Msg {
  Increment
  Decrement
  Reset
}

pub fn init(step: Int) -> Counter {
  Counter(value: 0, step: step)
}

pub fn update(counter: Counter, msg: Msg) -> Counter {
  case msg {
    Increment -> Counter(..counter, value: counter.value + counter.step)
    Decrement -> Counter(..counter, value: counter.value - counter.step)
    Reset -> init(counter.step)
  }
}

pub fn render(counter: Counter) -> String {
  string.append("The current count is: ", int.to_string(counter.value))
}
init(Step) ->
    {counter, 0, Step}.

update(Counter, Msg) ->
    case Msg of
        increment ->
            erlang:setelement(
                2,
                Counter,
                erlang:element(2, Counter)
                + erlang:element(3, Counter)
            );

        decrement ->
            erlang:setelement(
                2,
                Counter,
                erlang:element(2, Counter)
                - erlang:element(3, Counter)
            );

        reset ->
            init(erlang:element(3, Counter))
    end.

render(Counter) ->
    gleam@string:append(
        <<"The current count is: "/utf8>>,
        gleam@int:to_string(erlang:element(2, Counter))
    ).
-record(counter, {count, step}).

It's all about layers!

  • Core
    • Data
    • Functions
    • Tests
  • Boundary
    • Processes
    • Supervisors
    • Workers

Sometimes I think the only universal in the computing field is the fetch-execute cycle.

- Alan J. Perlis, Epigrams on Programming (1982)

CHIP-8

  • Interpreted programming language from the mid 1970s
  • Designed to run on the "CHIP-8 Virtual Machine"
    • 4K of RAM
    • 16 registers
    • 48 byte stack
    • Two 60Hz timers
    • 16 key hex keyboard
    • 64x32 pixel screen
    • 35 opcodes

Demo Time

pub type State {
  Running
  AwaitingROM
  AwaitingInput(vx: registers.DataRegister)
}

pub type Command {
  SoundOn
  SoundOff
}

pub type Emulator {
  Emulator(
    state: State,
    registers: registers.RegisterFile,
    keyboard: keyboard.Keyboard,
    pc: Int,
    stack: stack.Stack,
    memory: memory.Memory,
    screen: screen.Screen,
  )
}

pub fn init() -> Emulator {
  Emulator(
    state: AwaitingROM,
    registers: registers.new(),
    keyboard: keyboard.new(),
    pc: 0x200,
    stack: stack.new(),
    memory: memory.put(memory.new(4096), 0, font),
    screen: screen.new(64, 32),
  )
}
import gleam/bit_string
import chip8/helpers

pub opaque type Memory {
  Memory(data: BitString)
}

pub fn new(size: Int) -> Memory {
  Memory(data: helpers.bitstring_copy(<<0>>, size))
}

pub fn put(memory: Memory, position: Int, data: BitString) -> Memory {
  assert Ok(left) = bit_string.part(memory.data, 0, position)
  assert Ok(right) =
    bit_string.part(
      memory.data,
      position + bit_string.byte_size(data),
      bit_string.byte_size(memory.data) - position - bit_string.byte_size(data),
    )

  let data =
    left
    |> bit_string.append(data)
    |> bit_string.append(right)

  Memory(data: data)
}

pub fn read(
  memory: Memory,
  position: Int,
  length: Int,
) -> Result(BitString, Nil) {
  bit_string.part(memory.data, position, length)
}
import gleam/int
import gleam/string

pub external fn bitstring_copy(subject: BitString, n: Int) -> BitString =
  "binary" "copy"

pub external fn bitstring_to_list(subject: BitString) -> List(Int) =
  "binary" "bin_to_list"

pub external fn rand_uniform(n: Int) -> Int =
  "rand" "uniform"

pub fn int_to_hex_string(n: Int) -> String {
  string.append("0x", int.to_base_string(n, 16))
}
defmodule Chip8.Emulator do
  use Strucord,
    name: :emulator,
    from: "gen/src/chip8@emulator_Emulator.hrl"

  alias __MODULE__

  def init() do
    from_record(:chip8@emulator.init())
  end

  def reset(%Emulator{} = emulator) do
    with_record(emulator, fn record ->
      :chip8@emulator.reset(record)
    end)
  end

  def load_rom(%Emulator{} = emulator, rom) when is_binary(rom) do
    with_record(emulator, fn record ->
      :chip8@emulator.load_rom(record, rom)
    end)
  end

  def step(%Emulator{} = emulator) do
    {emulator, commands} = :chip8@emulator.step(to_record(emulator))

    {from_record(emulator), commands}
  end
  
  def handle_timers(%Emulator{} = emulator) do
    {emulator, commands} = :chip8@emulator.handle_timers(to_record(emulator))

    {from_record(emulator), commands}
  end
end
defmodule Chip8Web.PageLive do
  use Chip8Web, :live_view
  
  def mount(_params, _session, socket) do
    emulator = Chip8.Emulator.init()
    socket = assign(socket, emulator: Emulator.init())

    {:ok, socket}
  end

  def handle_event("load_rom", %{"name" => rom_name}, socket) do
    rom = Chip8.ROMs.get_rom(rom_name)
    emulator =
      Chip8.Emulator.load_rom(
        socket.assigns.emulator,
        rom.data
      )

    socket = assign(socket, emulator: emulator)

    {:noreply, socket}
  end
  
  def handle_event("step", _value, socket) do
    {emulator, commands} = Chip8.Emulator.step(socket.assigns.emulator)

    socket =
      socket
      |> assign(:emulator, emulator)
      |> handle_commands(commands)

    {:noreply, socket}
  end
 end
Hooks.SoundCard = {
    mounted() {
        this.synth = createAudio();
        this.handleEvent("enable_soundcard", () => {
            this.synth.on();
        });
        this.handleEvent("disable_soundcard", () => {
            this.synth.off();
        });
    },
    beforeDestroy() {
        this.synth.close();
    },
    disconnected() {
        this.synth.off();
    }
}
  defp handle_commands(socket, commands) do
    Enum.reduce(commands, socket, fn command, socket ->
      case command do
        :sound_on -> push_event(socket, "enable_soundcard", %{})
        :sound_off -> push_event(socket, "disable_soundcard", %{})
      end
    end)
  end
<div phx-window-keyup="key_up">
<div phx-window-keydown="key_down" phx-throttle="100">

<div class="grid-container">
  <div class="window window-screen">
    <h1 class="header">Screen</h1>
    <div class="body">
      <svg id="screen" class="screen" viewBox="0 0 64 32">
        <%= for {x, y, opacity} <- :chip8@screen.to_list(@emulator.screen) do %>
          <%= if opacity > 0 do %>
           <rect x="<%= x %>" y="<%= y %>" width="1" height="1" opacity="<%= opacity %>"/>
          <% end %>
        <% end %>
      </svg>
    </div>
  </div>
 <div>
pub type Pixel {
  OnPixel
  OffPixel
  DecayingPixel(lifetime: Float)
}

pub opaque type Screen {
  Screen(width: Int, height: Int, contents: List(List(Pixel)))
}

pub fn new(width: Int, height: Int) -> Screen {
  Screen(
    width: width,
    height: height,
    contents: list.repeat(list.repeat(OffPixel, width), height),
  )
}
pub type Instruction {
  ClearScreen
  ReturnFromSubroutine
  JumpRelative(offset: Int)
  SkipNextIfEqualConstant(vx: registers.DataRegister, value: Int)
  ...
}

pub fn decode_instruction(instruction: BitString) -> Instruction {
  case instruction {
    <<0:4, 0:4, 0xE:4, 0:4>> -> ClearScreen
    <<0:4, 0:4, 0xE:4, 0xE:4>> -> ReturnFromSubroutine
    <<0xB:4, nnn:12>> -> JumpRelative(nnn)
    <<3:4, x:4, kk:8>> ->
      SkipNextIfEqualConstant(registers.to_data_register(x), kk)
    ...
  }
}

pub fn execute_instruction(
  emulator: Emulator,
  instruction: instruction.Instruction,
) -> Emulator {
  case instruction {
    instruction.ClearScreen ->
      Emulator(..emulator, screen: screen.clear(emulator.screen))
    instruction.JumpAbsolute(address) ->
      Emulator(..emulator, pc: address - 2)
    ...
  }
}

LiveView + Gleam = ❤️

Thank you!

Quinn Wilton / @wilton_quinn / quinnwilton.com

github.com/QuinnWilton/gleam-chip8 

gleam.run/

chip8.quinnwilton.com 

Type-Safe LiveView with Gleam

By quinnwilton

Type-Safe LiveView with Gleam

  • 567