The Elm Architecture with React

Risyad Rais Rafsanjani — Wed, 24 Dec 2025 04:37:13 +0000

I was not interested in learning front-end development so much. Not really hated it. I just underestimated it so much that I think I'll learn it in an instant. Oh, boy. My arrogance bit me hard!

My front-end development journey was not so straightforward. From JQuery around 2014, I skipped all the way to _hyperscript (2023? Can't remember exactly). Then I started learning Rescript-react, Elm, exploring what's out there other than JS to build a front-end. Found Preact only to help me understand a bit more of React, and going back to Rescript-React only to rediscover Elm with the infamous The Elm Architecture. At this point, I'm still waiting for the next twist.

State management is a hell of a pain to dance around to. So I kind of jokingkly said to my learning partner (chatGPT lol). What if I do React, but do the state management like Elm? On top of Rescript? And boom. Everything's fallen to it's place. Reducer, ADTs, etc, etc. Now it's been weeks and I'm still having fun learning.

Imitating Elm

Imitating Elm to a TEA (got it?) using Rescript means you get the architecture and noisy compiler. And I'm in for it.

The architecture is simple. If I understand it correctly, the architecture is:

Model -> Update -> View

The model is the state of the application. The update is the function that updates the model. The view changes matching the shape of the model (state).

Heh, I know. I'm bad at explaining so let's just jump into it. Read this snippet:

type model = {
    sub_1Model: Sub_1.model,
    sub_2Model: Sub_2.model,
    sub_3Model: Sub_3.model,
}

let init = (): model => {
  sub_1Model: Sub_1.init(),
  sub_2Model: Sub_2.init(),
  sub_3Model: Sub_3.init(),
}

type msg = 
    | Sub_1Msg(Sub_1.msg)
    | Sub_2Msg(Sub_2.msg)
    | Sub_3Msg(Sub_3.msg)

let update = (model: model, msg: msg): model =>
  switch msg {
      | Sub_1Msg(sub1msg) => {sub_1Model: Sub_1.update(sub1msg, model.sub_1Model)}
      | Sub_2Msg(sub2msg) => {sub_2Model: Sub_2.update(sub2msg, model.sub_2Model)}
      | Sub_3Msg(sub3msg) => {sub_3Model: Sub_3.update(sub3msg, model.sub_3Model)}
  }

How'd that work under React, you asked?

  let (model, dispatch) = React.useReducer(update, init())

Boom. Reducer, baby!

See! I'm really bad at explaining. I hope future me know how to make this make sense since I'm writing this for him.

Using SQLite with Ecto in a Phoenix App

Risyad Rais Rafsanjani — Thu, 26 Jan 2023 06:57:37 +0000

Phoenix (or Ecto) defaults PostgreSQL as their database of choice. What if you just want to do something simple or just start learning Phoenix and too lazy to set up a Postgres server (like me)?

After setting up your Erlang and Elixir in your machine, you need to install hex. If you haven't had it installed, run this:

mix local.hex

Then you need to install Phoenix application generator:

mix archive.install hex phx_new

To kick start your Phoenix project, run this line:

mix phx.new sqlite_app --database sqlite3

Now you're ready to develop your next awesome Phoenix project with SQLite.

What Happened?

The --database flag tells the generator that we want to use SQLite in our project and added ecto_sqlite3 as a dependency so we can use it with Ecto.

Actually, Phoenix is well documented (and from what I heard, Elixir projects are generally well documented). You can find most of what you want to do when kickstarting your Phoenix project in this hexdocs page.

Now run:

mix ecto.create

to create your SQLite database file in your project direcory.

I hope this helps and hope you have some fun times ahead!

DEV Community: Risyad Rais Rafsanjani

The Elm Architecture with React

Imitating Elm

Using SQLite with Ecto in a Phoenix App

What Happened?