mjrusso / ascee

Tiny learning project: Elixir, LiveView, OTP, and other goodies

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ascee

ascee is a tiny example project, created to help learn some Elixir, LiveView, and OTP concepts.

In particular:

  • every cell in the grid is backed by a process; the "value" of each cell is an ASCII character
  • each cell periodically broadcasts its current value using Phoenix PubSub
    • all LiveView processes (note: one LiveView process per open browser tab) receive these messages and update internal state, which automatically re-renders the grid
  • cells periodically ask their neighbouring cells what their value is
  • each cell updates its value to match the most common neighbouring value
    • (the goal is for the grid to eventually converge on a common value, although this is not directly codified; each cell is an independent process)
  • clicking on a cell will deliberately crash the process associated with cell
    • when the associate supervisor restarts the process, it will start with a random value
    • all cells will be restarted if cells are crashed more than max_restarts times in max_seconds periods; see this commit for details

Demos

Grid + Message Passing

ascee-demo-1.mp4

Individual Process Crash + Restart

ascee-demo-2.mp4

Too Many Crashes: Supervisor Restarts All Child Processes

ascee-demo-3.mp4

Built-in Sync Across Tabs

ascee-demo-4.mp4

Setup and Usage

  • Exact versions of required system dependencies (Elixir and Erlang) are specified via .tool-versions. Using asdf is recommended, but not required. (Read the .tool-versions file for documentation on how to install asdf and all of the required plugins.)

  • After installing Elixir and Erlang, run mix setup to install and setup project dependencies

  • Start the Phoenix endpoint with mix phx.server, or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

About

Tiny learning project: Elixir, LiveView, OTP, and other goodies

License:MIT License


Languages

Language:Elixir 91.1%Language:JavaScript 6.6%Language:HTML 2.2%Language:CSS 0.2%