Building Web Apps with Elm
Craft a reactive Elm web app from scratch
Quickly get up to speed with Elm and learn functional programming by building a reactive web app start to finish.
In this hands-on video course, you 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
“This Elm course by @pragmaticstudio is excellent. If you want to go from 0 to 100 real quick with Elm I would highly recommend it.” Philip Brown
“... a great way to get some traction with a super fun language.” James Edward Gray II
“Buy this. I am betting big on Elm for front end development, and this is the best way to learn it.” Brian Hogan
Build a Real Elm Web App with Real Code
Learn the good parts of functional programming while pushing your web dev skills to a new level!
But what we love most about Elm is that it lets you quickly build reliable web apps, which is exactly what we do in this course! By building an application incrementally and progressively using facets of Elm to accomplish specific goals, 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!
22 Concise Videos • 3.5 Hours
Just the way you like 'em: easy to digest, straight to the point, paced just right.
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.
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!
Here's What You Get:
Streamable and downloadable, DRM-free videos on any device. English subtitles on each video.
Each video has hands-on exercises, supplemental notes, alternate design techniques, and handy tips and tricks.
Includes starter files, stepped versions of the app for each course module, and all the source code for the final app.
No monthly subscription or time limit. Start when you want and repeat as often as you like!
For Experienced Developers
Modernize and push your front-end development skills to the next level
To respect your time in the videos, we assume you're already fluent in HTML, CSS, and have project-level experience with 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.
Why should I learn Elm?
It's smart to question why you might need to add another programming language to your repertoire. We think learning Elm is well worth your time if you're one of the following kinds of developers:
You're new to functional programming
If you're simply curious about functional programming or you've struggled with FP concepts in another language, then you'll find Elm relatively easy to learn. Its syntax is clean and readable, and you can build practical stuff with it quickly. Elm is also a gentle gateway into other FP languages.
You're a front-end developer
You're a programming language enthusiast
If you just love learning new languages, then you'll really get a kick out of Elm. It's an innovative and well-designed language. Evan Czaplicki, the designer of Elm, drew inspiration from Haskell, OCaml, F#, and other ML-family languages and made it all approachable in Elm.
It's also easy to play around with Elm. One of the quickest ways to start writing Elm code is to jump in the online editor. There’s also a REPL for experimenting, and the Elm package catalog has a growing collection of community packages.
You want to become a better all-around programmer
And who doesn't want to push their programming skills to the next level? Learning Elm will make you think differently about programming, and as such you'll have a deeper well of expertise to draw from when solving your own programming challenges.
Created with 💛 by Mike and Nicole Clark
Hi, we'd be delighted to have you along as we create stuff in the Studio!
We discovered Elm in late 2014 while looking for something fresh and fun to learn over the holidays. At the time, Elm wasn't really on anybody's radar. But it had a special quality that kept drawing us back. And as we continued to use it, something unexpected happened: we ended up learning functional programming almost without trying! And as a result, we became better overall programmers. Elm has matured since then and has become a viable way to build web apps. It's no surprise why it's gaining in popularity.
As with all our courses, this is the course we would have wanted when we were learning Elm. One that's easy to jump into, doesn't get bogged down in syntax minutiae, and focuses on building a real web app with Elm. We spent a ton of time distilling everything we know about Elm into a course that lets you pick up Elm in just a few hours. We hope you enjoy it!
In addition to this course, we also use Elm to build the front-end in our Multi-Player Bingo course and we show several practical ways to integrate Elm into existing applications in our free Integrating Elm course.
Thousands have loved learning Elm this way!
Here's what some of them have to say…
“Love this Elm tutorial. Time to write front end code again since I don't need to use JS.” Mike Gehard
“Everything was explained really well, working up from very simple foundations. This course is very approachable for just about anyone!” James MacAulay
“I can't think of a better way to introduce someone to Elm and potentially even Haskell than through this course. The production quality is absolutely fantastic. I love that the videos are short as it makes them less intimidating. The decision on when to introduce the topics is really well thought out. Really well done!!” Michael Niessner
“A great, practical introduction to Elm. Straightforward with a great ease-in approach to new concepts.” Jake Trent
“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
“This course is perfect! There is nothing you can do to make it better. The way you modularize the course in small chapters is just perfect. I have taken hundreds of video courses and I can say this is so far the best of all. You have the talent to do this, seriously you surprised me with this awesome content. Love you both!” Victor Hazbun
“A very practical, hands-on approach to learning Elm. Great course overall!” Matthew Machuga
“This course is really great. I expected an introduction focused solely on the language and less on building an app. However I do like it this way even more as I feel like I can actually build something with what you taught me now!” Sebastien Varlet
“...loving the course on @elmlang! finally getting my head around this awesome #WebDev language!” Ian Taylor
“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
“Very well structured, anticipated all the important questions, and provided the "meta" view of working in Elm that most tutorials and books omit. Clearly the instructors know how to bring the right "aha!" moments in order to sustain an enthusiasm for finishing the course. Udemy has NOTHING on Pragmatic Studio. :) Great job!” Robert Calco