Introduction to Elm, v2
Learning Paths:
Table of Contents
Course Introduction
Introduction
Richard Feldman introduces Elm as a functional programming language that compiles to JavaScript. - 0:19-1:03
Costs & Benefits
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.
Workshop Structure
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
Functions & if expressions
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.
Nested Function Expressions
Richard covers how to write a comment and how functions are called in Elm.
Smart Compile Errors
Richard demonstrates how the type inference build into the language can benefit the user by catching errors before the code compiles.
Virtual DOM
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.
Introduction Review & Q&A
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.
Rendering a Page Exercise
This exercise explores using Elm's Virtual DOM system to add elements to a static page.
Rendering a Page Solution
Richard live-codes the solution to the Rendering a Page exercise.
Manipulating Values
Strings
Richard introduces the process of manipulating strings in Elm.
let Expressions
Richard explains how let expressions affect scope, and give names to values.
Lists
Lists in Elm are as common as Arrays in JavaScript. Richard explains how lists are implemented in Elm.
Anonymous Functions
Richard gives an example of an anonymous function defined inline with a slightly different syntax from named functions. - whole clip
Partial Application
Richard introduces the concept of partial application in Elm.
Render a List to a View
Richard demonstrates how using Elm's functional nature can make creating an unordered list an extremely quick task.
Manipulating Values Review & Q&A
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.
Manipulating Values Exercise
In this exercise, students use List.map and string manipulations to add a list of tags to the page rendered.
Manipulating Values Solution
Richard live-codes the solution to the Manipulating Values exercise.
Interaction
Records
Richard introduces interactions in Elm by first explaining what records are, and how to update them.
Record Iteration
The differences while iterating over records in comparison to other collections.
Booleans
Richard introduces how booleans and boolean operations are done in Elm.
Boolean Operations
In this section, List.member and List.filter are used to demonstrate booleans in Elm.
The Elm Architecture
To make an application interactive, Richard introduces Elm's architecture. - 1:35 - 3:47
The Elm Architecture: Update
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.
Interaction Review & Q&A
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.
Interaction Exercise
In this exercise, students make the selected tag on their page filter the posts on the page.
Interaction Solution
Richard live-codes the solution to the Introducing Interaction exercise.
Type Annotations
Type Annotation Overview
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.
Primitives & Records
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
Parameters
Richard exaplains why Lists in Elm have to have a consistent type, and how to apply type annotation using type parameters.
Aliases
Richard demonstrates how type aliases can tersely describe compound types.
Html Msg
Richard introduces the usage Html Msg type parameter on the Html type.
Functions
Richard uses the Elm REPL to explain why type annotations for functions benefit directly from partial application in Elm.
Type Annotations Exercise
Students add type annotations to the page they've built in the previous exercises.
Type Annotations Solution
Richard live-codes the solution to the Type Annotations exercise.
Custom Types
Case Expressions
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.
Variants & Booleans
Richard goes into detail about how to create custom type variants. Booleans are also revealed to be a custom type in Elm.
Custom Types in Case Expressions
Custom types are utilized to create a tab bar, wherein Richard demonstrates there is no need for a default case.
Containers
Richard transforms the custom type enumeration from the previous exercise into a container.
Custom Types in Messages
Through the use of pagination in the example app, custom types are shown to be a boon when applied to messages.
Custom Types Review & Q&A
Richard reviews what we've learned with Custom Types and fields a question from the audience.
Custom Types Exercise
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.
Custom Types Solution
Richard live-codes the solution to the Custom Types exercise.
Maybe
Maybe Overview
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.
Type Variables
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.
Pipelines & Review
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
Maybe & Pipelines Exercise
Students use Maybe to fix a bug related to users' avatars, and use pipelines on the Edit Article page.
Maybe & Pipelines Solution
Richard live-codes the solution to the Maybe and Pipelines exercise. - all of the clip
Decoding JSON
Decoding
Richard explains how to decode data from one format to another in Elm, using String.toInt and Json.Decode.decodeString as examples.
Result
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 :-/
Pipeline Decoding
Richard walks through how to use Json.Decode.Pipeline to decode JSON objects with several fields.
Optional & Nullable
Richard introduces the concepts of Nullable and Optional Decoders that allow for optional or nonexistent fields in JSON data.
Decoding Review & Q&A
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.
Decoding JSON Exercise
Students use JSON decoding to read data from the server into the articles in the feed.
Decoding JSON Solution
Richard walks through the solution to the Decoding JSON exercise.
Talking to Servers
Tuples
Richard introduces tuples, and explains how they differ from records.
Function Guarantees, Randomness, & Commands
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.
Browser.element
Richard introduces Browser.element, which returns a tuple and allows the user to execute Commands.
Pure Functions
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
Http.getString
Richard describes how to use Http.getString and Http.send to define a Cmd that sends a HTTP request.
Http.get
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 & Review
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.
Talking to Servers 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.
Talking to Servers Solution
Richard walks through the solution to the Talking to Servers exercise.
Talking to JavaScript
Subscriptions
Richard shows how subscriptions fit into the Elm Architecture, giving the example of Browser.onMouseMove.
The JavaScript Ecosystem
Richard explains how Elm uses a "client/server" communication strategy to access the JavaScript ecosystem without sacrificing Elm's Guarantees
Unbound Type Variables
Richard introduces unbound type variables, which are useful because they are compatible with any other type variable.
port Modules, localForage, & Review
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.
Talking to JS Exercise
In this exercise, students set up ports to send and receive data to localForage.
Talking to JS Solution
Richard walks through the solution to the Talking to JS Exercise.
