Frontendmasters - Introduction to Elm, v2 (2018)

In this course, Richard Feldman — returning Frontend Masters instructor and Software Engineer at NoRedInk — demonstrates the benefits of Elm, including its highly cohesive independent package ecosystem and reputation for practically never crashing.

By coding along with Richard, you will 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.

Table of Contents:

Course Introduction

Introduction
00:00:00 - 00:01:34
Introduction
Richard Feldman introduces Elm as a functional programming language that compiles to JavaScript. - 0:19-1:03
Costs & Benefits
00:01:35 - 00:09:31
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
00:09:32 - 00:16:20
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
00:16:21 - 00:21:22
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
00:21:23 - 00:23:15
Nested Function Expressions
Richard covers how to write a comment and how functions are called in Elm.
Smart Compile Errors
00:23:16 - 00:27:28
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
00:27:29 - 00:35:27
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
00:35:28 - 00:40:43
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
00:40:44 - 00:46:16
Rendering a Page Exercise
This exercise explores using Elm's Virtual DOM system to add elements to a static page.
Rendering a Page Solution
00:46:17 - 00:49:30
Rendering a Page Solution
Richard live-codes the solution to the Rendering a Page exercise.

Manipulating Values

Strings
00:49:31 - 00:52:10
Strings
Richard introduces the process of manipulating strings in Elm.
let Expressions
00:52:11 - 00:56:52
let Expressions
Richard explains how let expressions affect scope, and give names to values.
Lists
00:56:53 - 01:00:06
Lists
Lists in Elm are as common as Arrays in JavaScript. Richard explains how lists are implemented in Elm.
Anonymous Functions
01:00:07 - 01:01:50
Anonymous Functions
Richard gives an example of an anonymous function defined inline with a slightly different syntax from named functions. - whole clip
Partial Application
01:01:51 - 01:03:51
Partial Application
Richard introduces the concept of partial application in Elm.
Render a List to a View
01:03:52 - 01:06:11
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
01:06:12 - 01:12:12
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
01:12:13 - 01:15:00
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
01:15:01 - 01:17:16
Manipulating Values Solution
Richard live-codes the solution to the Manipulating Values exercise.

Interaction

Records
01:17:17 - 01:19:47
Records
Richard introduces interactions in Elm by first explaining what records are, and how to update them.
Record Iteration
01:19:48 - 01:21:29
Record Iteration
The differences while iterating over records in comparison to other collections.
Booleans
01:21:30 - 01:22:45
Booleans
Richard introduces how booleans and boolean operations are done in Elm.
Boolean Operations
01:22:46 - 01:25:21
Boolean Operations
In this section, List.member and List.filter are used to demonstrate booleans in Elm.
The Elm Architecture
01:25:22 - 01:29:09
The Elm Architecture
To make an application interactive, Richard introduces Elm's architecture. - 1:35 - 3:47
The Elm Architecture: Update
01:29:10 - 01:35:29
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
01:35:30 - 01:38:06
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
01:38:07 - 01:47:56
Interaction Exercise
In this exercise, students make the selected tag on their page filter the posts on the page.
Interaction Solution
01:47:57 - 01:54:15
Interaction Solution
Richard live-codes the solution to the Introducing Interaction exercise.

Type Annotations

Type Annotation Overview
01:54:16 - 01:56:20
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
01:56:21 - 01:57:41
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
01:57:42 - 01:59:22
Parameters
Richard exaplains why Lists in Elm have to have a consistent type, and how to apply type annotation using type parameters.
Aliases
01:59:23 - 02:00:42
Aliases
Richard demonstrates how type aliases can tersely describe compound types.
Html Msg
02:00:43 - 02:04:00
Html Msg
Richard introduces the usage Html Msg type parameter on the Html type.
Functions
02:04:01 - 02:12:29
Functions
Richard uses the Elm REPL to explain why type annotations for functions benefit directly from partial application in Elm.
Type Annotations Exercise
02:12:30 - 02:13:41
Type Annotations Exercise
Students add type annotations to the page they've built in the previous exercises.
Type Annotations Solution
02:13:42 - 02:21:19
Type Annotations Solution
Richard live-codes the solution to the Type Annotations exercise.

Custom Types

Case Expressions
02:21:20 - 02:26:01
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
02:26:02 - 02:29:30
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
02:29:31 - 02:32:28
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
02:32:29 - 02:37:59
Containers
Richard transforms the custom type enumeration from the previous exercise into a container.
Custom Types in Messages
02:38:00 - 02:44:37
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
02:44:38 - 02:48:51
Custom Types Review & Q&A
Richard reviews what we've learned with Custom Types and fields a question from the audience.
Custom Types Exercise
02:48:52 - 02:55:16
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
02:55:17 - 03:00:02
Custom Types Solution
Richard live-codes the solution to the Custom Types exercise.

Maybe

Maybe Overview
03:00:03 - 03:03:55
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
03:03:56 - 03:07:28
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
03:07:29 - 03:12:13
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
03:12:14 - 03:15:42
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
03:15:43 - 03:19:09
Maybe & Pipelines Solution
Richard live-codes the solution to the Maybe and Pipelines exercise. - all of the clip

Decoding JSON

Decoding
03:19:10 - 03:23:50
Decoding
Richard explains how to decode data from one format to another in Elm, using String.toInt and Json.Decode.decodeString as examples.
Result
03:23:51 - 03:26:39
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
03:26:40 - 03:36:10
Pipeline Decoding
Richard walks through how to use Json.Decode.Pipeline to decode JSON objects with several fields.
Optional & Nullable
03:36:11 - 03:40:25
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
03:40:26 - 03:43:57
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
03:43:58 - 03:45:45
Decoding JSON Exercise
Students use JSON decoding to read data from the server into the articles in the feed.
Decoding JSON Solution
03:45:46 - 03:47:52
Decoding JSON Solution
Richard walks through the solution to the Decoding JSON exercise.

Talking to Servers

Tuples
03:47:53 - 03:52:17
Tuples
Richard introduces tuples, and explains how they differ from records.
Function Guarantees, Randomness, & Commands
03:52:18 - 03:59:15
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
03:59:16 - 04:00:37
Browser.element
Richard introduces Browser.element, which returns a tuple and allows the user to execute Commands.
Pure Functions
04:00:38 - 04:02:33
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
04:02:34 - 04:09:53
Http.getString
Richard describes how to use Http.getString and Http.send to define a Cmd that sends a HTTP request.
Http.get
04:09:54 - 04:11:42
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
04:11:43 - 04:14:00
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
04:14:01 - 04:18:55
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
04:18:56 - 04:24:43
Talking to Servers Solution
Richard walks through the solution to the Talking to Servers exercise.

Talking to JavaScript

Subscriptions
04:24:44 - 04:30:35
Subscriptions
Richard shows how subscriptions fit into the Elm Architecture, giving the example of Browser.onMouseMove.
The JavaScript Ecosystem
04:30:36 - 04:35:07
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
04:35:08 - 04:41:42
Unbound Type Variables
Richard introduces unbound type variables, which are useful because they are compatible with any other type variable.
port Modules, localForage, & Review
04:41:43 - 04:53:18
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
04:53:19 - 04:56:18
Talking to JS Exercise
In this exercise, students set up ports to send and receive data to localForage.
Talking to JS Solution
04:56:19 - 05:01:31
Talking to JS Solution
Richard walks through the solution to the Talking to JS Exercise.

Wrapping Up

Review & Other Resources
05:01:32 - 05:07:20
Review & Other Resources
Richard reviews the topics the workshop has covered and shares additional resources.

also You can watch my other last: Programming-posts