Frontendmasters - Advanced Elm (2018)

In this course, Richard Feldman — returning Frontend Masters instructor and Software Engineer at NoRedInk — takes your Elm abilities to the next level! By following along with Richard, you will learn the best techniques for authentication, scaling, styling, module structure, Single Page Apps, performance optimization, and much more!

Table of Contents:

Introduction

Course Overview
00:00:00 - 00:05:13
Course Overview
Richard Feldman begins the course by explaining that the workshop was created to help people who want to transition from using Elm as a hobby, to using it at work or at scale. The primary goals and an outline of the course are discussed, as well as the workshop's structure.

Opaque Types

Module Boundaries
00:05:14 - 00:08:00
Module Boundaries
Richard introduces how choosing whether or not to expose a custom type's variants from a module affects the guarantees you can enforce about that type.
Opaque Types
00:08:01 - 00:11:52
Opaque Types
Opaque types are types whose implementation details are hidden from other modules. Richard gives examples of opaque types in core Elm libraries, only some of which are custom types under the hood.
Validated Data
00:11:53 - 00:15:40
Validated Data
Richard shows how elm-validate uses a custom type called Valid to guarantee that forms have been run through a validation function before being submitted.
Handling Edge Cases
00:15:41 - 00:19:36
Handling Edge Cases
Richard demonstrates through direct application why it's important to make it impossible for code to compile unless an edge case has been handled.
When Not to Go Opaque
00:19:37 - 00:28:38
When Not to Go Opaque
Richard uses the example of Author custom type in the course repo to demonstrate a case where opaque types are not useful.
Opaque Types Exercise
00:28:39 - 00:31:24
Opaque Types Exercise
Students are instructed to make Cred an opaque type, then fix the resulting compiler errors.
Opaque Types Solution
00:31:25 - 00:41:28
Opaque Types Solution
Richard live-codes the solutions to the Opaque Types exercise.

Extensible Data

Constraint Unification
00:41:29 - 00:50:10
Constraint Unification
Elm's compiler performs type inference through a process called constraint unification. Richard walks through how it works.
Open & Closed Records
00:50:11 - 00:56:00
Open & Closed Records
Closed records define the exact shape of a record, whereas open records specify a minimum set of fields that must be present. Richard shows how these work with constraint unification.
Open Records
00:56:01 - 01:03:20
Open Records
Richard explains why open records are necessary in Elm. Although not designed for it, they are also used for naming arguments, and data modeling.
Extensible Custom Types
01:03:21 - 01:05:53
Extensible Custom Types
Richard demonstrates how a more extensible data shapes could be created with custom types than with an open record.
Questions & Review
01:05:54 - 01:09:34
Questions & Review
A clarification question is asked about the example that was last shown, Richard gives a word of caution about open records, and this section of the course is briefly reviewed.
Extensible Data Exercise
01:09:35 - 01:12:57
Extensible Data Exercise
Students are instructed to return and convert data using extensible data principles.
Extensible Data Solution
01:12:58 - 01:18:20
Extensible Data Solution
Richard live-codes the solution to the Extensible Data exercise.

Creating Constraints

Units of Measure & Phantom Types
01:18:21 - 01:28:54
Units of Measure & Phantom Types
Using the Mars Climate Orbiter disaster as an application, Richard demonstrates how to use custom types to add measurement units to numbers, and contrasts this method with a refactored solution using phantom types.
Accessible HTML
01:28:55 - 01:34:57
Accessible HTML
The tesk9/accessible-html library is introduced. Richard shows how the library uses type constraints to guarantee that semantically non-interactive HTML elements like paragraphs can never be given event handlers.
The Never Type
01:34:58 - 01:37:24
The Never Type
Richard shows how the Never type can be used to describe Tasks that are guaranteed never to fail.
Type Parameter Design
01:37:25 - 01:43:50
Type Parameter Design
Richard summarizes the tradeoffs between accepting Attribute Msg, Attribute msg, and Attribute Never. Phantom types and non-phantom types are discussed, as well as how to use Never as a constraint to require that something is still unbound, and how that will unify with two different type variables.
Creating Constraints Exercise
01:43:51 - 01:46:07
Creating Constraints Exercise
Students are instructed to convert a Task to a Cmd using Task.attempt or Task.perform.
Creating Constraints Solution
01:46:08 - 01:51:48
Creating Constraints Solution
Richard live-codes the solution to the Creating Constraints exercise.

Scaling

What Fits in Our Heads
01:51:49 - 01:57:26
What Fits in Our Heads
Richard discusses the fundamental challenge of scaling: what happens when the codebase gets too big to fit in our heads?
Narrowing Types
01:57:27 - 02:05:12
Narrowing Types
Narrowing types are introduced as the key to scaling. Richard discusses the implications this can have on debugging. - couldn't find this cut…
Enforcement Arguments
02:05:13 - 02:13:57
Enforcement Arguments
Using the current codebase, Richard demonstrates how adding arguments can enforce business rules. He gives the example of adding a mandatory Cred (credentials) argument to certain Msg variants, to enforce that those variants can only be used when the user is logged in.
Using Modules for Modularity
02:13:58 - 02:23:34
Using Modules for Modularity
Richard discusses the benefits of organizing modules around a single type, and the cost of splitting modules based in file length rather than based on types.
Scaling Exercise
02:23:35 - 02:24:53
Scaling Exercise
Students are instructed to refactor three different files to accept narrower types than the entire Model.
Scaling Solution
02:24:54 - 02:35:24
Scaling Solution
Richard live-codes the solution to the Scaling exercise.

Reuse

Helper Functions
02:35:25 - 02:42:38
Helper Functions
Richard walks through examples of the most important tool for reuse in Elm: the helper function. It works for view logic, update logic, and everything in between.
Similar vs the Same
02:42:39 - 02:50:32
Similar vs the Same
Sometimes reuse is not best practice. Three different flavors of status are discussed. Richard shows some examples of similar code where reuse would result in excessive configuration.
Html msg
02:50:33 - 02:58:26
Html msg
When a view function returns an Html msg, it is reusable across pages and projects. Richard discusses two possibilities: either an unbounded type, or receiving a message.
Html.map & Cmd.map
02:58:27 - 03:10:36
Html.map & Cmd.map
Richard discusses the most powerful with the most overhead reuse method. When a view function needs several different message variants, returning Html msg can require excessive configuration. In these cases, Html.map and Cmd.map can replace the configuration with a one-time translation operation.
Reuse Exercise
03:10:37 - 03:12:09
Reuse Exercise
Students are instructed to refactor their code such that the concepts of reuse are utilized effectively.
Reuse Solution
03:12:10 - 03:18:54
Reuse Solution
Richard live-codes the solution to the Reuse exercise.

Sources of Truth

Impossible States
03:18:55 - 03:23:36
Impossible States
When we have multiple sources of truth for the same information, our application can end up in states that ought to be impossible. Richard gives an example of how this can affect the tabs in the sample application.
Derived Data
03:23:37 - 03:29:16
Derived Data
Richard explains why, given the option of rendering a value that is derived from another in view and throwing it away, this is a much better alternative than recording it in the model.
Authentication
03:29:17 - 03:35:20
Authentication
Authentication is a case where the source of truth is on the server, but the client must cache the authentication token to get acceptable performance. Richard walks through what can happen if this cached information becomes invalid.
JavaScript & Review
03:35:21 - 03:39:08
JavaScript & Review
When interoperating with JavaScript, Elm or JavaScript be the source of truth. Richard argues ultimately for letting JavaScript own the state because of the consequences of competing for state. This section of the course is also reviewed.
Caching Exercise
03:39:09 - 03:41:44
Caching Exercise
Students are tasked with creating a single source of truth within the tab functionality in the application.
Caching Solution
03:41:45 - 03:49:02
Caching Solution
Richard live-codes the solution to the Caching exercise.

Decoding

Pipeline types & Decode.map3
03:49:03 - 03:53:38
Pipeline types & Decode.map3
Richard shows how the Decode Pipeline types interact with the types of the Decoder primitives using Decode.map3.
Decode.succeed
03:53:39 - 04:02:13
Decode.succeed
Richard compares the Decode.succeed function to Decode.map3, and explains the use cases.
Decode.map & Decode.andThen
04:02:14 - 04:06:44
Decode.map & Decode.andThen
Richard explains that Decode.andThen works similarly to Decode.map, with the exception that it can additionally change successes to failures.
Decoderizing
04:06:45 - 04:10:42
Decoderizing
Richard shows how Decode.andThen can be used with a result to "decoderize" an operation.
Intermediate Representations & Review
04:10:43 - 04:14:41
Intermediate Representations & Review
Richard uses the example application as a reference while explaining intermediate representations as for the idea of using internals only for the purpose of creating a decoder, not exposing it to the outside world as an intermediate step, then using Decode.map to convert to the one that the world sees.
Decoding Exercise
04:14:42 - 04:15:47
Decoding Exercise
Students are instructed to decode a Time.Posix value using Decode.andThen.
Decoding Solution
04:15:48 - 04:22:46
Decoding Solution
Richard live-codes the solution to the Decoding exercise.

Single-Page Apps

Routes
04:22:47 - 04:30:50
Routes
Richard uses the example application to demonstrate how to define a Route custom type that represents the different URL pathways in the application, and how to parse URLs into them.
Pages
04:30:51 - 04:35:05
Pages
Despite the name, Single-Page Apps have multiple logical "Pages" in them. Richard demonstrates how to model these in Elm. - Maybe 0:00-1:40 ? Cliffhanger??
Module Structure
04:35:06 - 04:42:56
Module Structure
Great Elm modules tend to be organized around a particular type. Richard uses the sample application to demonstrate how the modules in the example application are organized, and why the boundaries are drawn where they are.
Loading & Persisting Data
04:42:57 - 04:49:03
Loading & Persisting Data
There are several possible strategies for loading and persisting data between pages. Richard discusses trade-offs between different strategies.
SPAs Exercise
04:49:04 - 04:49:50
SPAs Exercise
This exercise is intended to help students to become familiar with this DSL for going from URLs to Routes.
SPAs Solution
04:49:51 - 04:52:38
SPAs Solution
Richard live-codes the solution to the SPAs exercise.

Wrapping Up

Recap & Resources
04:52:39 - 04:59:44
Recap & Resources
Richard reviews the goals and topics the workshop has covered and shares additional resources. There is a special behind-the-scenes discussion with Richard to conclude the course.

also You can watch my other last: Programming-posts