Building Web Apps with Elm
Craft a reactive Elm web app from start to finish
Quickly get up to speed with Elm as you build a reactive, reliable web app from scratch in this 3.5-hour video course.
You'll get step-by-step guidance and expert advice in an engaging format you won't find anywhere else.
Discover the joy of writing front-end code that stays well-factored and easy to maintain as your web app grows!
“... great ramp up from total beginner to building apps and having fun!” Evan Czaplicki, creator of Elm
“If there's a better way to learn Elm out there, I've not found it. Fantastic work!” Alan Gardner
“... a great way to get some traction with a super fun language.” James Edward Gray II
“A very practical, hands-on approach to learning Elm. Great course overall!” Matthew Machuga
Go From a New Project to Talking to a JSON API Developing a real app with real code, you'll gain practical experience putting all the pieces together to craft web apps the Elm way.
This course takes a project-based approach, so you won't find a course module such as "Elm Strings". Boring! Instead, we incrementally add new features as we build out a complete Elm web app from start to finish.
By building up to the point where we need to learn a new facet of Elm to accomplish something in our application, you'll gain a deeper understanding of both the "how" and the "why" of Elm development. Learning this way makes everything "click"... and it's just more fun!
1. Introduction and Setup (1:49) free
Welcome! After taking a quick peek at the app we build in this course...
...we help you get your development environment set up so you can start coding Elm.
2. Hello, Elm! (6:35) free
We start our journey in Elm land by creating a project and running our initial app in the Elm reactor, just to get a quick win.
We also find out for ourselves if the Elm Runtime is really as fast as they say it is. (Spoiler: It is!)
3. Compiling and Running (4:16) free
We also set up elm-live to automatically recompile our Elm files whenever they change.
4. Calling Functions (7:32)
Functions are at the heart of everything we do in Elm. So we initially give 'em a try in the Elm REPL, and then chain multiple functions together using the pipe operator to start bringing our application to life.
In the end you'll find yourself beginning to develop the mindset of functions as transformations.
5. Defining Functions (8:07)
Elm functions are guaranteed to be stateless and free of side effects. We explore what that means as we define our own functions.
We look quickly at basic function syntax (it's really clean!) and how to write anonymous functions in Elm.
6. Rendering HTML (9:41)
Elm doesn't have a separate templating language that renders HTML. Instead of writing markup, you just call Elm functions! And Elm's HTML package comes with a bunch of handy functions for rendering HTML.
We dive into the initial view for our app using HTML package, qualified and unqualified package imports, let expressions, and nested view functions.
7. Not Your Father's Type System (11:38)
Elm is able to boast about not generating runtime exceptions in part because it's a statically-typed language with a world-class compiler. Initially, you can write code without declaring any types because the Elm compiler automatically infers types.
But to truly be proficient with Elm, we need to go deeper and understand type variables, type annotations, and what's happening underneath all the inference.
8. Currying (5:50)
Why is the syntax for type annotations a series of arrows like String -> Int -> Html msg where the arrows are used to separate the arguments types and the return type?
The short answer: all functions in Elm are curried so you don't need to pass all the arguments at once. Understanding how this works is a huge part of designing good Elm code, so don't skip this module!
9. Modeling Application State: Records (5:07)
We laid a lot of groundwork so far designing the view of our app. Now we turn our attention to the application's state. In Elm, the state lives in a model and we use records to model application state.
10. Type Aliases (6:12)
Our type annotations are starting to clutter up our code with duplication. What we really need is a more expressive, shorthand way of referring to a record type. Type aliases to the rescue!
As an added bonus, the type alias for a record gives us a record constructor and allows us to name things in the language of our domain.
11. Mapping Over HTML Lists (7:28)
How are we going to render the collection of entries in our model into an HTML list? You might initially think to use a looping construct. But Elm doesn't have conventional loops. Hmmm...
Elm forces us to think in terms of functions that can transform inputs into outputs, which turns out to be pretty sweet!
12. Updating the Model via Messages (11:31)
It's time to start making our app interactive! We need a way to update the model in response to user inputs and then maintain that application state. But wait... how can we do that if all our functions are stateless?
Thankfully, the Elm Architecture offers an elegant and scalable answer.
13. The Elm Architecture (7:33)
Our app now has three cleanly-separated parts: a model record, a set of nested view functions, and an update function. Understanding the design patterns and how these get wired together is essential.
We examine how messages, union types, type constructors, case expressions, and pattern matching all play a role.
14. Summing Points: Fun with Lists (4:42)
List manipulation is highly optimized in Elm (you use lists a lot), and the List module includes several powerful functions for transforming lists. Summing up the game points is a fun way to explore several of these functions.
Learning to transform collections of values this way also begins to transform your mind more toward functional programming!
15. Intro to Effects and Commands (12:13)
If Elm functions are stateless and can't have side effects, then how do Elm programs ever interact with the outside world or run code that generates inconsistent results?
Turns out that Elm has a very clever way of letting us perform what it refers to as "managed effects."
16. Fetching Data From a Backend API (12:50)
Let's take our managed effects up a notch by fetching JSON from a backend API. To do this, we put together everything we've learned so far and also introduces us to the HTTP package.
17. Decoding JSON (11:29)
Our API is sending back raw JSON and we need to transform the JSON into Elm values using something called a decoder. It's sort of like the secret decoder ring a superhero might use, and after this module you'll know all the secrets.
18. Failures, Maybe? (11:56)
It's time to maybe take off our rose-colored glasses. We've been hanging out on the happy path long enough. So what happens if our backend API goes out to lunch and never returns?
We look wide-eyed at handling errors, which seems better than just doing nothing.
19. Posting JSON To a Backend API (11:53)
In addition to fetching data from the API, we also want to POST the player's name and score to the API. To do that, we dive deeper into the HTTP package and also learn how to encode Elm values into JSON values.
In the end, you'll know how to have a two-way conversation with a backend API!
20. Reacting To Input Fields (11:54)
Designing our app to react to input fields raises a bunch of questions. Where should the contents of the input fields be stored until the user actually clicks the "Save" button? What happens if our user clicks the "Cancel" button instead? What if we want only certain input fields visible based on certain conditions?
As we work through these various scenarios, we explore onInput handlers, onClick handlers, and how union types help us create a small state machine.
21. Organizing Code (11:13)
How you decide to organize your Elm code will ultimately depend on the specific application or package you're writing. If it's a small app, you could rightly leave all the code in a single file. If instead you want to break your code into multiple files, there are different ways of doing so.
We show you some techniques we've found helpful for keeping code organized.
22. Designing Around Concepts (15:23)
We've seen how we can organize code by extracting functions, and even putting those functions in a separate module that gets imported. We round out this course with one final (advanced) technique: using modules to break out a concept and design an abstraction that hides implementation details.
In the end, you have a complete single-page web app designed the Elm way!
Up to 10 team members
Elm and Elixir Course Bundle
For Experienced Developers
Looking to modernize your front-end development skill set? We designed this course for you! To respect your time in the videos, we assume you're already fluent in HTML, CSS, and another programming language. However, we don't assume you have prior experience with functional programming or Elm.
We aim for 100% satisfied developers, so if this course turns out not to be a good fit for you, we'll gladly issue you a 100% refund.
From Mike & Nicole
Hey, there! Mike here. I love to create stuff and teach what I've learned. Over the past 20 years I've taught and used many languages to develop real applications, but there's a quality to Elm that feels special. I discovered it in late 2014 when looking for something fresh and fun to learn over the holidays. I'm as excited about Elm now as I was back then. Elm is what finally got me into functional programming. It made me a better programmer. And so I naturally can't help but want to share it with you!
Together Nicole and I own and run The Pragmatic Studio. We'd love to have you join us in the Studio for this great course! Learn more about us…
How To Integrate Elm Into Your Apps
Once folks learn Elm, they're eager to find ways to use it in existing applications. So how do you go about introducing Elm at your company? Learn several practical ways to integrate Elm into existing applications in our free Integrating Elm course. You can then apply these same techniques on your project!
Also, check out the true story of how one developer successfully integrated Elm into his company and learn from his step-by-step approach.
What Is Elm?
Why are we so excited about Elm? First and foremost, it's designed to be fun and friendly to use. Indeed, Elm upends the notion that functional programming is only accessible to mad scientists and academics. With its clean and readable syntax, world-class tooling, and friendly compiler, Elm is truly a delightful language.
But what we love most about Elm is that you can actually build practical stuff with it quickly, which is exactly what we do in this course.
What developers like you are saying about this course:
“Love this Elm tutorial. Time to write front end code again since I don't need to use JS.” Mike Gehard
“...loving the course on @elmlang! finally getting my head around this awesome #WebDev language!” Ian Taylor
“A great, practical introduction to Elm. Straightforward with a great ease-in approach to new concepts.” Jake Trent
“This is a perfect, succinct introduction that helps cement the idea that Elm is a usable language for the day-to-day.” Vitor Capela
“A very practical, hands-on approach to learning Elm. Great course overall!” Matthew Machuga
“The course was practical, informative and exceptionally well-paced. I love that pretty much as soon as a question sprung into my head you answered it. If there's a better way to learn Elm out there, I've not found it. Fantastic work!” Alan Gardner
“Mike Clark is an excellent teacher. He explains the concepts clearly and concisely... He introduces everything incrementally and at no point did I feel overloaded. Quite the opposite, there were a number of times when he displayed the uncanny ability to read the questions arising in my mind while going through the material...” Philip Poots' Full Course Review