zed.dev
Introduction to Elm, v2
5 hours, 6 minutes
CC
Course Description
Learn the benefits of Elm and learn why it has the reputation for never crashing. In this course, you'll build an Elm application from start to finish using elm-package to access Elm's package ecosystem, write tests with elm-test, work with third-party JavaScript libraries from Elm using JavaScript Interop, and much more! Throughout the course, Richard discusses tips and tricks for getting the most out of the language. This course uses the latest 0.19 version of Elm.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: October 17, 2018
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Course Introduction
Section Duration: 16 minutes
Richard Feldman introduces Elm as a functional programming language that compiles to JavaScript. - 0:19-1:03
Richard explains some of the costs and benefits of using Elm. The concerns that people have when considering Elm are addressed but are countered with its measurable technical advantages.
The Elm RealWorld Example App, which resembles Medium.com, is introduced at the project that will be built throughout the course. Richard explains how this project will progress from a single webpage to knowledge of how to fix bugs, and to modify and maintain a real-world Elm codebase.
Elm Introduction
Section Duration: 33 minutes
Richard introduces functions and if expressions in Elm by comparing how one would write a simple function in JavaScript, and then in Elm. Elm's compiler plays a similar role to Babel or TypeScript, but then advantages it has over both is demonstrated.
Richard covers how to write a comment and how functions are called in Elm.
Richard demonstrates how the type inference build into the language can benefit the user by catching errors before the code compiles.
Richard explains that Elm uses a Virtual DOM for rendering - the same underlying approach React uses. However, Elm does it with plain function calls instead of templates.
Questions are asked regarding the syntax for versions of Elm after 0.9, the learning curve of elm, source maps, and how new features are decided upon in the language.
This exercise explores using Elm's Virtual DOM system to add elements to a static page.
Richard live-codes the solution to the Rendering a Page exercise.
Manipulating Values
Section Duration: 27 minutes
Richard introduces the process of manipulating strings in Elm.
Richard explains how let expressions affect scope, and give names to values.
Lists in Elm are as common as Arrays in JavaScript. Richard explains how lists are implemented in Elm.
Richard gives an example of an anonymous function defined inline with a slightly different syntax from named functions. - whole clip
Richard introduces the concept of partial application in Elm.
Richard demonstrates how using Elm's functional nature can make creating an unordered list an extremely quick task.
Questions from the audience are asked about how Elm handles .map() differently than JavaScript, and backward compatibility in Elm. Richard also discusses the future of compiling to Web Assembly.
In this exercise, students use List.map and string manipulations to add a list of tags to the page rendered.
Richard live-codes the solution to the Manipulating Values exercise.
Interaction
Section Duration: 36 minutes
Richard introduces interactions in Elm by first explaining what records are, and how to update them.
The differences while iterating over records in comparison to other collections.
Richard introduces how booleans and boolean operations are done in Elm.
In this section, List.member and List.filter are used to demonstrate booleans in Elm.
To make an application interactive, Richard introduces Elm's architecture. - 1:35 - 3:47
The question is posed about how to update the state of a page when an event happens. Richard explains how update takes the two arguments of msg and model to transition to the new application state.
Questions are asked about whether Elm has anything comparable to the React component lifecycles, and about CSS in Elm. Richard reviews what was covered in this section of the workshop.
In this exercise, students make the selected tag on their page filter the posts on the page.
Richard live-codes the solution to the Introducing Interaction exercise.
Type Annotations
Section Duration: 26 minutes
Richard introduces type annotations, which apply to primitives, parameters, aliases, and functions. In Elm, the compiler enforces types, and it's explained why this is helpful for long-term applications.
Examples of how to use type annotations on primitives when the type changes is demonstrated. Record type annotations are also explained, and it becomes clear why the syntax for records is different than in JavaScript. - couldn't find the cut here in real-time
Richard exaplains why Lists in Elm have to have a consistent type, and how to apply type annotation using type parameters.
Richard demonstrates how type aliases can tersely describe compound types.
Richard introduces the usage Html Msg type parameter on the Html type.
Richard uses the Elm REPL to explain why type annotations for functions benefit directly from partial application in Elm.
Students add type annotations to the page they've built in the previous exercises.
Richard live-codes the solution to the Type Annotations exercise.
Custom Types
Section Duration: 38 minutes
Richard introduces custom types, and hints that they will allow the audience to add features such as pagination and tabs to the example app. To demonstrate case expressions, it's demonstrated how a snippet would be written with an if statement, and then the same statement is rewritten with a case expression.
Richard goes into detail about how to create custom type variants. Booleans are also revealed to be a custom type in Elm.
Custom types are utilized to create a tab bar, wherein Richard demonstrates there is no need for a default case.
Richard transforms the custom type enumeration from the previous exercise into a container.
Through the use of pagination in the example app, custom types are shown to be a boon when applied to messages.
Richard reviews what we've learned with Custom Types and fields a question from the audience.
This exercise is designed to teach students how to work within an existing Elm codebase. Custom types are utilized to fix a bug in a Sign Up form.
Richard live-codes the solution to the Custom Types exercise.
Maybe
Section Duration: 19 minutes
Richard contrasts Elm with JavaScript when accessing the first element of an array, and an empty array. The concepts of "Just" and "Maybe" are introduced.
Richard reveals that type variables allow for different type parameters on functions such as List.head. It's also discussed how the type Maybe could be defined as a custom type.
The pipeline operator (|>) allows the user to express a sequence of transformations without naming the intermediate values. Richard reviews what was learned in the last few sections before going on to the exercise. - 0:35-1:39
Students use Maybe to fix a bug related to users' avatars, and use pipelines on the Edit Article page.
Richard live-codes the solution to the Maybe and Pipelines exercise. - all of the clip
Decoding JSON
Section Duration: 28 minutes
Richard explains how to decode data from one format to another in Elm, using String.toInt and Json.Decode.decodeString as examples.
Result has failure case includes a value that provides more detail on what went wrong. Richard points out how JavaScript and TypeScript fail in this regard. - couldn't find the cut :-/
Richard walks through how to use Json.Decode.Pipeline to decode JSON objects with several fields.
Richard introduces the concepts of Nullable and Optional Decoders that allow for optional or nonexistent fields in JSON data.
A point is clarified regarding Pipeline decoding, and determining whether the data received may be nullable. Richard reviews what was learned in the last few sections before going on to the exercise.
Students use JSON decoding to read data from the server into the articles in the feed.
Richard walks through the solution to the Decoding JSON exercise.
Talking to Servers
Section Duration: 36 minutes
Richard introduces tuples, and explains how they differ from records.
Every Elm function is deterministic in nature. Richard explains how Elm turns a Generator into a randomly value. To do this, a Command must also be introduced. Time is taken to map the Command message into the Elm Architecture model.
Richard introduces Browser.element, which returns a tuple and allows the user to execute Commands.
Every Elm function is a pure function. Richard explains that, because of this, Elm has managed effects instead of side effects. - all of the clip
Richard describes how to use Http.getString and Http.send to define a Cmd that sends a HTTP request.
Richard introduces Http.get, which is built on top of Http.getString, but accepts a decoder for whatever shape of response it might get.
Pattern matching is utilized in a case-expression to handle the possibility of an HTTP request succeeding or failing. Richard reviews what was learned in the last few sections before going on to the exercise.
Students fix a problem where the Sign Up page is not sending a HTTP request when the user submits the form. Debug.todo is also introduced as a useful tool.
Richard walks through the solution to the Talking to Servers exercise.
Talking to JavaScript
Section Duration: 36 minutes
Richard shows how subscriptions fit into the Elm Architecture, giving the example of Browser.onMouseMove.
Richard explains how Elm uses a "client/server" communication strategy to access the JavaScript ecosystem without sacrificing Elm's Guarantees
Richard introduces unbound type variables, which are useful because they are compatible with any other type variable.
Richard explains and walks through the process of using "ports" to send to and receive data from JavaScript. The ownership of state is also briefly discussed, and what was learned in the last few lessons is reviewed before going on to the exercise.
In this exercise, students set up ports to send and receive data to localForage.
Richard walks through the solution to the Talking to JS Exercise.
Wrapping Up
Section Duration: 5 minutes
Richard reviews the topics the workshop has covered and shares additional resources.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops