HackerReposA FIELD GUIDE TO OPEN SOURCE
ProSponsor the shelf♧ 0
← Back to top all-time
evancz
elm-architecture-tutorial
Elm2015–2017
evancz / elm-architecture-tutorial

elm-architecture-tutorial

How to create modular Elm code that scales nicely with your app

18Distinct people
18Mentions
1Explicit recommenders
4.2KGitHub stars
REPOSITORY AT A GLANCE

What to know before exploring

What it is

How to create modular Elm code that scales nicely with your app

GitHub

Where it is used

No documented product use was verified in the last source check.

What people are saying

I imagine building this was a useful learning experience (and your intro blog post alludes to that), but keep in mind that Redux is much more a way of thinking about state…

CGamesPlay used a recommendation phrase. One indexed comment matches. This is a phrase match, not a verdict.

No classified warning is attached to this page. Read the discussions before treating silence as approval.

Also in these discussions

No other repository is repeatedly linked in the same discussions.

This week on Hacker News

Nov 7–Nov 14 UTC · Direct repository links and separately labeled related project stories. Indexed through 11/14/2026, 6:01:08 PM UTC.

No direct repository links were found in the indexed HN discussions over the past seven days. Older discussions are available below.

Mentions over time

HN mentions by year18 dated mentions

Observed mentions: 2015-02-16 17:28:37 UTC to 2017-10-21 16:57:11 UTC.

0369122015-01-01 00:00:00 UTC to 2016-01-01 00:00:00 UTC (exclusive): 12 mentions; 2 submissions, 10 comments20152016-01-01 00:00:00 UTC to 2017-01-01 00:00:00 UTC (exclusive): 4 mentions; 0 submissions, 4 comments20162017-01-01 00:00:00 UTC to 2018-01-01 00:00:00 UTC (exclusive): 2 mentions; 0 submissions, 2 comments2017

Counts come from the repository’s dated source evidence. Index cutoff: 2026-11-02 08:16:59 UTC.

View mention counts and date ranges
UTC ranges include their start and exclude their end. Select a period to filter the source evidence.
PeriodStart (UTC)End (exclusive, UTC)MentionsSubmissionsComments
20152015-01-01 00:00:00 UTC2016-01-01 00:00:00 UTC12210
20162016-01-01 00:00:00 UTC2017-01-01 00:00:00 UTC404
20172017-01-01 00:00:00 UTC2018-01-01 00:00:00 UTC202

From the project README

An excerpt from the repository, fetched Nov 13, 2026.

Read the project’s introduction
Elm Elm is a programming language that compiles to JavaScript. It is known for its friendly error messages, helping you find issues quickly and refactor large projects with confidence. Elm is also very fast and very small when compared with React, Angular, Ember, etc. This repo focuses on The Elm Architecture, an architecture pattern you see in all Elm programs. It has influenced projects like Redux that borrow core concepts but add many JS-focused ideas. The Elm Architecture The Elm Architecture is a simple pattern for architecting webapps. The core idea is that your code is built around a Model of your application state, a way to update your model, and a way to view your model. To learn more about this, read the the official guide and check out this section which is all about The Elm Architecture. This repo is a collection of all the examples in that section, so you can follow along and compile things on your computer as you read through. Run The Examples After you install, run the following commands in your terminal to download this repo and start a server that compiles Elm for you: git clone https://github.com/evancz/elm-architecture-tutorial.git cd elm-architecture-tutorial elm reactor Now go to http://localhost:8000/ and start looking at the examples/ directory. When you edit an Elm file, just refresh the corresponding page in your browser and it will recompile!
Read the full README on GitHub

What Hacker News says

2 sources
CGamesPlay·Oct 21, 2017Recommendation phrase
I imagine building this was a useful learning experience (and your intro blog post alludes to that), but keep in mind that Redux is much more a way of thinking about state transitions than it is a library for providing them. The Elm architecture was the original inspiration for Redux, and I recommend running through the rest of the Elm examples [1] to decide if your removals from Redux are worth pursuing. Notably, how will you handle composing your action-reducers? Can you build the "dynamic list of counters" example without compromising the simplicity you're looking for? [1] https://github.com/evancz/elm-architecture-tutorial/blob/f8a...
In Redux-zero: A lightweight state container based on Redux
Thanks. I'm glad you ask. The motivation was a web client for a research project at work. My first choice was React+Redux, since that's what we already use for our service Qiita, but I wanted something more lightweight. I made the first prototype using Elm, but it was too painful to integrate with third party components, like CodeMirror[1]. I made the next prototype using yo-yo, but yo-yo is agnostic about state management, lacks inline CSS styles (by choice) and it's based in morphodom (which updates DOM nodes directly) whereas I preferred a virtual DOM approach like Snabbdom or Vidom. I also considered choo.js, a framework based on yo-yo, but it has the same limitations as yo-yo. It was also very difficult to integrate third party components with it, e.g, CodeMirror, involving the creation of a portal[2], reminiscent of Elm ports. I als
Read the rest
o couldn't agree with some of its API choices like namespaces, router design and models as containers for state objects. HyperApp is ~1kb, and takes inspiration from several sources: the Elm architecture[3], yo-yo/choo's API, the SAM pattern[4], Snabbdom and Vidom. [1]: https://codemirror.net [2]: https://github.com/trainyard/choo-codemirror#choo-codemirror) [3]: https://github.com/evancz/elm-architecture-tutorial/#the-elm... [4]: http://sam.js.org
In 1kb functional JavaScript library for building UI applications

MAKE YOURSELF AT HOME

A few shortcuts

/
Search the collection
?
Open this guide
Esc
Close dialogs and navigation

Your saved repositories and interests stay in this browser.