Introduction to Elm, v2
Table of Contents
Costs & BenefitsRichard 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 StructureThe 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.
Nested Function ExpressionsRichard covers how to write a comment and how functions are called in Elm.
Smart Compile ErrorsRichard demonstrates how the type inference build into the language can benefit the user by catching errors before the code compiles.
Virtual DOMRichard 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&AQuestions 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 ExerciseThis exercise explores using Elm's Virtual DOM system to add elements to a static page.
Rendering a Page SolutionRichard live-codes the solution to the Rendering a Page exercise.
StringsRichard introduces the process of manipulating strings in Elm.
let ExpressionsRichard explains how let expressions affect scope, and give names to values.
Anonymous FunctionsRichard gives an example of an anonymous function defined inline with a slightly different syntax from named functions. - whole clip
Partial ApplicationRichard introduces the concept of partial application in Elm.
Render a List to a ViewRichard demonstrates how using Elm's functional nature can make creating an unordered list an extremely quick task.
Manipulating Values ExerciseIn this exercise, students use List.map and string manipulations to add a list of tags to the page rendered.
Manipulating Values SolutionRichard live-codes the solution to the Manipulating Values exercise.
RecordsRichard introduces interactions in Elm by first explaining what records are, and how to update them.
Record IterationThe differences while iterating over records in comparison to other collections.
BooleansRichard introduces how booleans and boolean operations are done in Elm.
Boolean OperationsIn this section, List.member and List.filter are used to demonstrate booleans in Elm.
The Elm ArchitectureTo make an application interactive, Richard introduces Elm's architecture. - 1:35 - 3:47
The Elm Architecture: UpdateThe 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&AQuestions 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 ExerciseIn this exercise, students make the selected tag on their page filter the posts on the page.
Interaction SolutionRichard live-codes the solution to the Introducing Interaction exercise.
Type Annotation OverviewRichard 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.
ParametersRichard exaplains why Lists in Elm have to have a consistent type, and how to apply type annotation using type parameters.
AliasesRichard demonstrates how type aliases can tersely describe compound types.
Html MsgRichard introduces the usage Html Msg type parameter on the Html type.
FunctionsRichard uses the Elm REPL to explain why type annotations for functions benefit directly from partial application in Elm.
Type Annotations ExerciseStudents add type annotations to the page they've built in the previous exercises.
Type Annotations SolutionRichard live-codes the solution to the Type Annotations exercise.
Case ExpressionsRichard 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 & BooleansRichard 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 ExpressionsCustom types are utilized to create a tab bar, wherein Richard demonstrates there is no need for a default case.
ContainersRichard transforms the custom type enumeration from the previous exercise into a container.
Custom Types in MessagesThrough the use of pagination in the example app, custom types are shown to be a boon when applied to messages.
Custom Types Review & Q&ARichard reviews what we've learned with Custom Types and fields a question from the audience.
Custom Types ExerciseThis 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 SolutionRichard live-codes the solution to the Custom Types exercise.
Type VariablesRichard 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 & ReviewThe 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 ExerciseStudents use Maybe to fix a bug related to users' avatars, and use pipelines on the Edit Article page.
Maybe & Pipelines SolutionRichard live-codes the solution to the Maybe and Pipelines exercise. - all of the clip
DecodingRichard explains how to decode data from one format to another in Elm, using String.toInt and Json.Decode.decodeString as examples.
Pipeline DecodingRichard walks through how to use Json.Decode.Pipeline to decode JSON objects with several fields.
Optional & NullableRichard introduces the concepts of Nullable and Optional Decoders that allow for optional or nonexistent fields in JSON data.
Decoding Review & Q&AA 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 ExerciseStudents use JSON decoding to read data from the server into the articles in the feed.
Decoding JSON SolutionRichard walks through the solution to the Decoding JSON exercise.
Talking to Servers
TuplesRichard introduces tuples, and explains how they differ from records.
Function Guarantees, Randomness, & CommandsEvery 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.elementRichard introduces Browser.element, which returns a tuple and allows the user to execute Commands.
Pure FunctionsEvery 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.getStringRichard describes how to use Http.getString and Http.send to define a Cmd that sends a HTTP request.
Http.getRichard 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 & ReviewPattern 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 ExerciseStudents 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 SolutionRichard walks through the solution to the Talking to Servers exercise.
SubscriptionsRichard shows how subscriptions fit into the Elm Architecture, giving the example of Browser.onMouseMove.
Unbound Type VariablesRichard introduces unbound type variables, which are useful because they are compatible with any other type variable.
Talking to JS ExerciseIn this exercise, students set up ports to send and receive data to localForage.
Talking to JS SolutionRichard walks through the solution to the Talking to JS Exercise.