JazzCon 2017: Building Web Apps with Elm Workshop

@elpapapollo / jfairbank Building Web Apps with Elm Jeremy Fairbank
Follow instructions here to get setup! github.com/jfairbank/elm-workshop

Goals • Benefits of Elm

Goals • Benefits of Elm • Elm Syntax

Goals • Benefits of Elm • Elm Syntax • Functional
Programming

Goals • Benefits of Elm • Elm Syntax • Functional
Programming • Build web apps with Elm

Format • Some slides. • Coding. • Ask questions! •
Code along if you want. - Exercises

Follow Along github.com/jfairbank/elm-workshop

elm • Created in 2012 Evan Czaplicki

elm • Created in 2012 Evan Czaplicki • Web and
UI focused

UI focused • Compiles to JavaScript

UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F#

UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F# • Functional

UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F# • Functional • Statically Typed

What’s all the fuss about?

undefined is not a function

No runtime exceptions in practice.

The argument to function `greet` is causing a mismatch. 11|
greet 42 ^^ Function `greet` is expecting the argument to be: String But it is: number Compile time static type checks

Functional

Expressive and Declarative Concise and intent-revealing

Expressive and Declarative Fewer lines of code!

function doubleNumbers(numbers) { const doubled = []; const l =
numbers.length; for (let i = 0; i < l; i++) { doubled.push(numbers[i] * 2); } return doubled; } doubleNumbers([1, 2, 3]); // [2, 4, 6] ×

doubleNumbers list = List.map ((*) 2) list doubleNumbers myList --
[2, 4, 6] ✓

Pure Functions Predictable and easier to test

add x y = x + y add 2 2
== 4 add 2 2 == 4 add 2 2 == 4

Immutable Data No mutation bugs or inconsistent state

× conference = { name = "JazzCon" } conference.name =
"ConnectJS"

conference = { name = "JazzCon" } nextConference = {
conference | name = "ConnectJS" } ✓

Built-in Framework The Elm Architecture

Built-in Framework Unidirectional with organized state changes

Update View Model Messages

Sold? Let’s learn Elm!

Plan 9:00 - 9:15 Intro 9:15 - 9:45 Code: Syntax
and Functional Programming 9:45 - 9:55 The Elm Architecture 9:55 - 10:30 Code: Building a Todo List 10:30 - 11:00 Code: Exercise and Break 11:00 - 11:10 HTTP: Commands and Decoders 11:10 - 11:45 Code: Fetching a GitHub User 11:45 - 12:00 Code: Exercise 12:00 - 12:15 Code: Components 12:15 - 12:30 Wrap Up

Coding Time! Elm Syntax

The Elm Architecture Model-View-Update

Controller View Model Model Model Model Model View View View
View MVC

View Model Model Model Model Model View Model View Model
View Model View Model Model Two-way Data Binding

Update View Model Messages Unidirectional

Model Single source of truth

Model • String • Int • Record • List •
Etc. Any data type

View Projection of model

UI as a Function Model Virtual DOM View

elm Virtual DOM Todo List Learn Elm Build awesome Elm
apps Learn functional programming <html />

Todo List Learn Elm Build awesome Elm apps Learn functional
programming Model Delete first todo item <html />

View Model Notice missing item in virtual DOM list, so
just remove corresponding <li>. elm Virtual DOM Todo List Build awesome Elm apps Learn functional programming <html />

Messages Standardized application events

elm app model

elm app model Commands HTTP Dates Random #’s Subscriptions WebSockets
Browser Window Mouse Position Events Text Input Mouse Click

Update Responds to messages and creates new state

Update Model New Model Command

model Update View elm

model Update View elm !

model Update View elm

Coding Time! Building a Todo List

Exercise(s) • Allow adding new todo items. • Underneath todo
list add a button to add a new todo item to the todo list. • The new todo item should have a blank description and should start oﬀ in an Editing state. • Hint: you’ll probably want the :: or ++ operators. • Allow deleting todo items. • Add delete button next to edit button. • Hint: editing/saving/completing required List.map. Deletion will require List.filter. • Allow marking a complete todo item as incomplete.

Working with HTTP Commands and Decoders

Update Model New Model Command

Update Model New Model Command ?

Side Eﬀects I/O Mutable State

Commands Describe side eﬀects instead of doing them

HTTP Commands Update Command elm

What about the response? Update elm JSON

What about the response? Update elm JSON Dynamic Payloads

What about the response? Update elm JSON Dynamic Payloads Static
Types

Decoders Transform arbitrary JSON to static types

user : User user = { id = 1 ,
name = "Jeremy" } { "id": 1, "name": "Jeremy" } Decoder type alias User = { id : Int, name : String }

{ "id": 1 } type alias User = { id
: Int, name : String } Decoder ?

{ "id": 1 } Decoder BadPayload Err

{ "id": 1 } Decoder BadPayload Err Result type

Result type Result error value = Ok value | Err
error

user = { id = 1 , name = "Jeremy"
} { "id": 1, "name": "Jeremy" } Decoder Ok

{ "id": 1, "name": "Jeremy" } “id” int “name” string

Field decoders

1 Ok "Jeremy" Ok

1 Ok "Jeremy" Ok User Decoder user = { id
= 1 , name = "Jeremy" } Ok

1 Ok User Decoder BadPayload Err BadPayload Err

Coding Time! Fetching a GitHub User

Exercise(s) • Add a loading screen. • Display something like
“Fetching user <user.login>…” • Hint: what state should you update and when? • Display another field or two for the user. • Hint: Remember to update the User type and the userDecoder. • Decode GitHub error messages. • Use login nouser for testing. • Hint: you need to decode response.body in the Http.BadStatus branch. • Hint: you’ll probably want the decodeString and field functions from:  package.elm-lang.org/packages/elm-lang/core/5.1.1/Json-Decode

Coding Time! Components

Components vs. Flat Structure

Components vs. Flat Structure • Components • Pros • Perfect
for independent, reusable applications • Single-page applications • Cons • Nested complexity • More boilerplate • Cumbersome parent-child communication

Components vs. Flat Structure • Components • Pros • Perfect
for independent, reusable applications • Single-page applications • Cons • Nested complexity • More boilerplate • Cumbersome parent-child communication • Flat Structure • Flatter state • Use function and module helpers • Pros • No parent-child communication ceremony • Easier to follow flow of application • Cons • Larger models • More Msg values

Boilerplate But greater guarantees and safety

Solving Boilerplate • github.com/halfzebra/create-elm-app • github.com/elm-community/elm-webpack- starter • github.com/gkubisa/elm-app-boilerplate •
github.com/splodingsocks/elm-starter

create-elm-app

Tutorials • www.elm-tutorial.org • guide.elm-lang.org • frontendmasters.com/ courses/elm/

Elm in Action manning.com/books/elm-in-action

Final Questions?

@elpapapollo / jfairbank Thanks! Jeremy Fairbank Code: github.com/jfairbank/elm-workshop Slides: bit.ly/jazzcon17-elm-workshop

JazzCon 2017: Building Web Apps with Elm Workshop

JazzCon 2017: Building Web Apps with Elm Workshop

More Decks by Jeremy Fairbank

Other Decks in Programming

Featured

Transcript