In this course, you will learn functional programming techniques that are useful not only in Elm but in other languages as well.
Elm in Action
The Elm Language
- 07:14 - 11:50 Why bother? Richard explores the motive for choosing to code in Elm and show some advantages—such as the Elm compiler catches errors and suggests remedies.
- 11:50 - 19:00 HTML and the virtual DOM Elm comment syntax and HTML elements are shown as functions. He answers a question on Elm vs. TypeScript.
- 19:00 - 21:00 Exercise 1 The first exercise is to resolve the ToDo’s in the code provided. We’re building an application similar to GitHub but for Elm repos.
- 21:00 - 23:26 Exercise 1 Solution We add some HTML elements into the Main.elm application.
- 23:26 - 28:13 Basic Data Structures Richard talks about basic data structures in Elm such as strings, let expressions, records, tuples, and lists.
- 28:13 - 36:27 Collections Richard discusses destructuring the data structures.
- 36:27 - 39:34 Exercise 2 The second exercise is to display the results of a search.
- 39:34 - 43:54 Exercise 2 Solution The search results are displayed and formatted with data destructured from the model.
- 43:54 - 45:53 Booleans The Boolean datatype and operators are shown.
- 45:53 - 50:12 Partial Application Richard explores partial function application. Partial function application means that a function can be called with fewer arguments than expected, also known as currying.
- 50:12 - 55:22 List.filter and List.map The List methods filter and map are presented.
- 55:22 - 01:05:45 The Elm Architecture Richard introduces the Elm architecture of model, view, and update. All of the application state lives in the model. When the update function changes the model, the view function returns the Html record and then the Elm runtime renders that as HTML.
- 01:05:45 - 01:08:37 Interactivity User interaction handlers send messages to the update function which creates a new model. That new model gets passed to view and view sends a new Html record to the Elm runtime.
- 01:08:37 - 01:13:36 Exercise 3 The third exercise adds delete functionality to the search results.
- 01:13:36 - 01:18:35 Exercise 3 Solution The solution is to add a delete message to update that creates a new model by using filter.
- 01:18:35 - 01:23:20 Type Annotations Type annotations are optional but if declared the compiler will enforce them. You can create type aliases to compound type annotations.
- 01:23:20 - 01:36:44 Function Annotations Function arguments and returns can also have type annotations that are enforced by the compiler.
- 01:36:44 - 01:37:56 Exercise 4 The fourth exercises involves improving documentation by adding type aliases.
- 01:37:56 - 01:45:53 Exercise 4 Solution Type annotations are added to variables, functions, and type aliases.
- 01:45:53 - 01:48:58 Case Expressions Case expressions are presented as more concise than if-then-else.
- 01:48:58 - 01:59:25 Union Types You can declare custom types. Union types can be compounds of values, constants, and functions
- 01:59:25 - 02:05:18 Messages Messages are shown as type aliases. A case expression is used to parse the message.
- 02:05:18 - 02:09:29 Exercise 5 The fifth exercise grabs a string from a text field to set the model’s query field. The second task is to add a delete by ID message
- 02:09:29 - 02:13:03 Questions: Functions Richard answers questions about functions without bodies. He discusses uppercase and lowercase function names.
- 02:13:03 - 02:21:48 Exercise 5 Solution Richard writes code to grab a string from a text field and add it to a message using OnInput. He uses an OnClick handler to delete a result.
- 02:21:48 - 02:24:12 Questions: Functions & Messages Update Richard answers a question about when functions are executed and the flow of messages and the Update function.
- 02:24:12 - 02:31:09 Result and Maybe Built-in functions return a union type that contains two values, Ok and Err. It’s necessary to use a case expression to parse the union to get the value. The Maybe type has at most one value.
- 02:31:09 - 02:40:11 Pipelines Pipeline style allows an expression to be coded on multiple lines separated by pipes. Each line takes as it’s argument the value returned from previous line.
- 02:40:11 - 02:50:12 Decoders Decoders are functions that accept JSON data as an argument and return a value. A decoder can be composed of multiple decoders arranged pipeline style.
- 02:50:12 - 02:57:15 Questions: Decoder & Refactoring Richard explains that decoders make for easier refactoring.
- 02:57:15 - 03:04:35 Exercise 6 The sixth exercise involves building a decoder for search results.
- 03:04:35 - 03:11:03 Questions: Decode Identity & Naming Richard answers questions about decode identity and function name uppercase.
- 03:11:03 - 03:16:25 Exercise 6 Solution Richard builds out the case expression that accepts the search results.Then he completes the pipe that decodes the search results.
- 03:16:25 - 03:23:58 Questions: Logging, Types, Pipeline Decoding, etc Richards answers questions about logging inside a case expression, having multiple expressions inside a case branch, uppercase for type annotations, pipeline decoding, debug.log, let expressions, and virtual DOM.
- 03:23:58 - 03:31:52 Function Guarantees Functions in Elm are pure. If you give functions the same arguments they will always return the same value. It’s impossible for Elm to have a function that generates a random number. To get a random number from Elm you must use a command.
- 03:31:52 - 03:38:58 Another Function Guarantee Elm functions do not perform side effects. Functions do not modify external state. Commands may modify external state. Tasks may also modify state.
- 03:38:58 - 03:40:52 HTTP GET Http.get takes as arguments a decoder and a URL.
- 03:40:52 - 03:49:00 Exercise 7 The seventh exercise involves commands and tasks to work with the search results.
- 03:49:00 - 03:58:46 Exercise 7 Solution Richard creates a task that converts into a command that decodes the search results and handles the error.
03:58:46 - 04:01:09
Day One Wrap Up
Richards presents some links to Elm resources and talks about his book.
- 05:00:00 - 05:10:06 Questions: Imports, Subscriptions, Perf, etc Richard answers questions about imports, graphQL, subscriptions, reordering a list, virtual DOM, performance, server-side Elm, concurrency, Elm for native mobile applications, and server-side rendering.
05:29:31 - 05:33:48
- 05:33:48 - 05:36:28 Subscriptions Subscriptions manage messages from outside Elm.
- 05:36:28 - 05:43:05 Receiving Responses Richard discusses how Elm listens for responses.
05:43:05 - 05:50:54
Questions: Events, Handlers, Ports, etc
Richard answers questions about listening for window events and web sockets. A question is asked about click handlers and other event handlers. Ports manage communications asynchronously.
05:50:54 - 05:55:12
The eight exercise asks the user to complete the port code and implement decoders. Richard answers questions about subscriptions and ports, and getting DOM properties.
- 05:55:12 - 06:01:58 Exercise 8 Solution Richard hooks up the ports and logic for receiving the search results.
06:01:58 - 06:10:07
Questions: Memoize JSON, Caching, Error Types
Richard answers questions about memoizing JSON requests and caching server responses. He talks about error types.
- 06:10:07 - 06:23:17 The Elm Package The elm-pack.json file is explored.
- 06:23:17 - 06:33:02 Testing Setup The tests directory with it’s own elm-pack.json is explored, showing dependencies on test runners. Richard answers questions about npm.
06:33:02 - 06:41:09
You can search the package manager for packages by type.
Unit tests are shown in Elm and compared to Mocha and Jasmine.
- 06:41:09 - 06:53:55 Fuzz Testing Fuzz testing allows for randomly generated arguments for functions. Richards answers questions about custom fuzzers.
- 06:53:55 - 07:03:32 Exercise 9 The ninth exercise asks the user to create a unit test and a fuzz test.
- 07:03:32 - 07:13:53 Exercise 9 Solution Richard completes the todos and resolves the errors revealed by the tests. He answers questions about debouncing, and task versus command.
- 07:16:15 - 07:23:34 Delegation Introduction Refactoring with delegation is introduced as a technique to be able to scale your application and organize your code.
- 07:23:34 - 07:38:53 Building Search The search options are scoped from the model with map functions.
- 07:38:53 - 07:52:54 Exercise 10 The tenth exercise asks you to use delegation to refactor the search options in the model and the view. Richard answers questions about organizing your modules, accessing the model from the view options, and module size.
- 07:52:54 - 08:07:26 Exercise 10 Solution A new constructor function is added for the search options and the view options. Richard shows how a helper function to destructure the model may complicate your code.
Scaling Elm Code
- 08:07:26 - 08:15:49 Unidirectional Data Flow Richard explains how to solve the deeply nested component problem with the Elm architecture.
08:15:49 - 08:22:30
Expand and refactor to scale your code. Richard answers a question about using Elm and React together, and also using multiple Elm apps, and multiple Elm app communication using ports.
- 08:22:30 - 08:32:33 Scaling Examples One way to scale the viewer the model, or update is to split into smaller helper functions.
- 08:32:33 - 08:38:53 Portable Signup Form Richard discusses approaches to creating a reusable signup form with validation.
08:38:53 - 08:44:32
Exercise 11 involves using a sortable table component.
08:44:32 - 08:52:43
Exercise 11 Solution
The tasks to be completed are add table state to the model, initialize the state, add a new message, change the update function to receive the new message, and configure the table with the table state, and add it to the view. Richard shows another component as an example—autocomplete.
- 08:52:43 - 08:59:16 Composition Richard show various ways to write functions to access fields.
- 08:59:16 - 09:13:27 List Performance List performance techniques are explained by examining the underlying data structures.
- 09:22:59 - 09:29:44 Rendering Performance Rendering performance is improved by skipping DOM building using the lazy function.
- 09:29:44 - 09:35:58 RequestAnimationFrame Restricting the view function to repaint no faster than the browser repaints is built into Elm.
- 09:35:58 - 09:38:10 Exercise 12 Exercise 12 involves using debug.log and lazy.
- 09:38:10 - 09:39:31 Exercise 12 Solution The solution adds lazy to the search results.
09:39:31 - 09:53:12
The first tool accepts HTML and returns Elm Html.
The second tool accepts JSON and returns Elm type alias and decoders and encoders.
The third tool lists compiler error messages.
The fourth tool generates boilerplate Elm application code.
The fifth tool is a pretty print for Elm code.
The sixth tool is built into the latest version of ELM and is a history of messages that map to each change of application state.
The seventh tool lets you define your CSS in Elm.
- 09:53:12 - 09:56:11 Elm-css Richard mentions the last exercise of using elm-css.
09:56:11 - 09:57:22
Links of Interest
Links of interest.
- 09:39:31 - 09:53:12 Tools The first tool accepts HTML and returns Elm Html.