Toward a Better Front End Architecture: Elm - Codemash 2017

By: Jeremy Fairbank

269   2   14757

Uploaded on 01/18/2017

Amidst the overwhelming cacophony of competing JavaScript frameworks, Elm is a promising voice. Elm is a relatively new language that compiles to JavaScript. Elm is a functional language that encourages describing UI, state, and events in a declarative manner, while performing as good as or better than the current JavaScript framework hotness. With type safety and pure programming constructs, Elm promises code that has fewer bugs and is easier to reason about. In this talk, dive into Elm, exploring its syntax and more importantly its architecture. Learn about unidirectional data flow, composable UI components, update functions, and commands for side effects. Ultimately, discover how functional programming with Elm’s architecture can solve real problems. Leave this talk equipped to start utilizing Elm to construct non-trivial apps with more maintainable code and better determinism.


Around 42:54 I erroneously claimed that the error at the top of the file is a "type error". I meant to state that it was a syntax error.

Comments (5):

By mixedCase    2017-09-20

Compared to JS, yes. But it's not JS that Dart truly competes against, it's all the other compile-to-JS languages some of which I mentioned, and Dart simply can't beat their pragmatism and/or expresiveness.

Elm is deceptively easy since it has great docs, the best compiler errors in the entire industry (no exaggeration here) and skips all the voodoo incantations of pure functional programming favoring a familiar language instead. Took me a couple of days to start writing toy websites with it coming with no functional experience, and a week to be productive.

I'd suggest you take a look at some of the talks on Elm. This is a good one:

Anything by Richard Feldman is great, too.

Original Thread

By anonymous    2017-09-20

Pragmatic's Elm video course is the most productive way to learn Elm, especially if you are relatively new to web development.

Another video series that is highly recommended is

Towards a better front-end architecture provides a good overview of Elm and also serves as a excellent motivation as to why you must learn the language.

Original Thread

By anonymous    2017-09-20

Http.send internally calls Task

Here are the Response from other channels (Slack & Youtube)

Elm's task system will eventually invoke the constructor function LoadUser.

Http.send creates a Cmd that we hand to the Elm architecture so it can perform the HTTP request on our behalf. The function we provide to Http.send informs Elm how we want to handle the result when it comes back.

You can see where the Cmd is created here:

Because we provide a Msg value LoadUser as our function to Http.send, it allows us to respond to LoadUser later in our update function once we have the result back.

Here is where Elm generates a Task: The resultToMessage parameter would be LoadUser in this case.

It might be hard to understand with the function composition operator, but here is where eventually resultToMessage, or LoadUser in this case, gets called in the Task module:

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.