** Note: Updated for Elm 0.18
Course Description
- Structuring Your Apps using the Elm Architecture
- Talking to Servers / Effects (HTTP / Websocket)
- JSON Encoding and Decoding
- Single Page App Navigation (Routing)
- Talking to JavaScript using Ports
- and much more.....
What is Elm?
Elm is an amazing new functional programming language for building Front End Web Applications.
Elm was designed as an answer to the following question:
"What would be a good language for building front end web apps?"
Elm has been thoughtfully crafted over the last several Years by it’s creator Evan Czaplicki, adding just enough features to make it powerful but still simple to use.
Elm, unlike most other functional programming languages, achieves a nice balance between Idealism and Pragmatism.
Why should you consider using Elm?
Benefits such as:
- Zero Runtime Exceptions
- Simplified Debugging
- Easy Refactoring
- Helpful Type System & Compiler
- Improved Productivity
- Inherently testable code
- Enforced Semantic Versioning
- and more...
Personally, I like Elm because it makes my life Simpler, it’s a Joy to use and I’m just more productive.
"I’ve tried to learn functional programming before, but ..."
If you’ve ever dabbled in a functional programming language, or tried to learn functional programming but became frustrated by the learning curve, let me tell you things are different with Elm.
You won’t see a bunch of scary academic terms in the Elm documentation or from hear it from the Elm community.
Elm is very approachable, and is the best language to learn functional programming.
"Should I learn elm if I can’t use it at work?"
Even if you never use Elm Professionally in your Job, it’s still totally worth learning.
You’ll gain functional programming skills that you can take back to your imperative languages... However you may find that Elm is so nice, you may just become the advocate that persuades your employer to start using it at work ;)
What we’ll build
After you learn the major concepts, we'll put them into practice and build a cool realtime Race Leaderboard app to keep track of runners in racing events like Marathons and 10K's. The app will use all the concepts we'll be covering in this course. Watch the Introduction video for more information.
Requirements
You should have a basic understanding of Elmlang. Ideally you will have taken the free course "Elm For Beginners"
Target Audience
Web developers that are curious about the benefits of Functional Programming and Elm.
Web developers that are interested in expanding their horizons.
Git Repo
The companion git repo for this course can be found at:
Your Instructor

James discovered the joy of software development while submerged hundreds of feet deep in the pacific ocean. He liked it so much, he left his career as Navy Nuclear Submariner to learn everything he could about creating software. As a nuclear trained engineer, he figured out how to learn things quickly, which has helped in a career where the learning never stops. Currently he’s an independent software developer, consultant and trainer.
Course Curriculum
-
PreviewIntroduction (12:08)
-
PreviewReview (7:22)
-
StartThe Elm Architecture - Overview (5:01)
-
StartThe Elm Architecture - Example (33:54)
-
StartEffects - Overview (3:48)
-
StartEffects - Example (Chuck Norris Joke App) (10:51)
-
StartJSON (Decoding JSON -> Elm) (13:08)
-
StartWebsockets (Time Streaming Example App) (8:41)
-
StartNavigation (Single Page App Routing) (10:15)
-
StartPorts (Firebase Waitlist App) (32:08)
-
StartPlanning The App (4:21)
-
StartReview Starter / Boilerplate (6:54)
-
StartSetting Up Navigation / Single Page App (SPA) (18:14)
-
StartSetting Up Login/Authentication (11:00)
-
StartSaving / Retrieving Login Token / JWT (5:28)
-
StartLogging Out (2:40)
-
StartAccess Control / Locking Pages (7:20)
-
StartAdding Runners | Http Post (11:32)
-
StartSetting Up The Leaderboard Page | Realtime Updates With Websockets (10:36)
-
StartEstimating Runners Location (9:47)
-
StartQuerying & Sorting Runners (3:57)
-
StartFinal Thoughts (1:59)
-
StartIntroduction (6:04)
-
StartReview (7:46)
-
StartThe Elm Architecture - Overview (5:01)
-
StartThe Elm Architecture - Example (17:34)
-
StartEffects - Overview (3:48)
-
StartEffects - Example (Chuck Norris Joke App) (12:57)
-
StartJSON (Decoding JSON -> Elm) (13:08)
-
StartWebsockets (Time Streaming Example App) (8:41)
-
StartNavigation (Single Page App Routing) (12:53)
-
StartPorts (Firebase Waitlist App) (16:04)