🎁  A gift for you: save an additional 20% through Dec. 31st with coupon code MERRY2017.

Building Web Apps with Elm

Craft a reactive Elm web app from start to finish

Elm 0.18

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!

Evan czaplicki
“... great ramp up from total beginner to building apps and having fun!” Evan Czaplicki, creator of Elm
Alan gardner
“If there's a better way to learn Elm out there, I've not found it. Fantastic work!” Alan Gardner
James edward gray
“... a great way to get some traction with a super fun language.” James Edward Gray II
Matthew machuga
“A very practical, hands-on approach to learning Elm. Great course overall!” Matthew Machuga

Course Outline

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!

22 Videos • 3.5 Hours • Exercises Cover
  • 1. Introduction and Setup (1:49) free

    Welcome! After taking a quick peek at the app we build in this course...

    01

    ...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.

    02

    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

    Next up, we put an efficient build process in place. We look at how to compile Elm code into JavaScript that runs either as a full-screen app or as a "component" embedded in an HTML element.

    03

    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.

    04

    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.

    05

    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.

    06

    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.

    07

    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?

    08

    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.

    09
  • 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!

    10

    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...

    11

    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?

    12

    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.

    13

    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.

    14

    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?

    15

    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.

    16
  • 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.

    17
  • 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?

    18

    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.

    19

    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?

    20

    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.

    21

    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.

    22

    In the end, you have a complete single-page web app designed the Elm way!

High-Quality Videos
Access to streamable and downloadable, DRM-free videos on any device. Total duration is 3.5 hours.
Exercises and Notes
Each video has hands-on exercises, supplemental notes, alternate design techniques, and handy tips and tricks.
Source Code
Includes starter files, stepped versions of the app for each module, and all the source for the final app.
Instant, Lifetime Access
No monthly subscription or time limit. Revisit all the material whenever you want!

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…

Mike nicole framed
Integrating elm large

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?

Elm is a functional programming language that compiles to JavaScript and runs in the browser, designed and developed by Evan Czaplicki. Elm embraces the good parts of functional programming, but lets you ignore the theoretical underpinnings.

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.

Don't let its friendly face fool you though; Elm is also incredibly powerful and ready for the biggest projects. The Elm Architecture helps you create complex, modular web apps with code that stays easy to maintain as you add features. Toss in great performance, no runtime exceptions, and JavaScript interop, and you've got a super-charged way to produce reliable, scalable, and maintainable web apps!

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:

Mike gehard
Love this Elm tutorial. Time to write front end code again since I don't need to use JS.” Mike Gehard
Ian taylor
“...loving the course on @elmlang! finally getting my head around this awesome #WebDev language!” Ian Taylor
Jake trent
“A great, practical introduction to Elm. Straightforward with a great ease-in approach to new concepts.” Jake Trent
Vitor capela
“This is a perfect, succinct introduction that helps cement the idea that Elm is a usable language for the day-to-day.” Vitor Capela
Matthew machuga
“A very practical, hands-on approach to learning Elm. Great course overall!” Matthew Machuga
Misha moroshko
“Well done! This course is a great value for the money! It was straight to the point for developers with Javascript knowledge.” Misha Moroshko
Alan gardner
“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
Philip poots
“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