JazzCon 2018: Build Web Apps with Elm

Jeremy Fairbank @elpapapollo / jfairbank Build Web Apps with Elm
Visit README for demo and exercise URLs: bit.ly/jf-elm-workshop

Software is broken. We are here to fix it. Say
[email protected]

In beta now! bit.ly/programming-elm

Functional and statically typed programming language for frontend development elm

Web and UI Focused

Compiles to JavaScript

No runtime exceptions in practice.

The 2nd argument to function `add` is causing a mismatch.
7| add 2 "3" ^^^ Function `add` is expecting the 2nd argument to be: Int But it is: String Compile time static type checks

Functional

Pure Data in Data out

Pure No side eﬀects

Pure Predictable and Testable!

Immutable Data • Safety and consistency • Explicit flow of
data • No subtle mutation bugs

No undefined is not a function

One framework. No fatigue. Update View Model Messages

✓ Easier to write code ✓ Easier to write tests
✓ Easier to refactor

Content • Functions and expressions • Lists, records, and immutability
• Static types and type aliases • Union types and pattern matching • Building Apps with the Elm Architecture • JSON Decoders • Adding HTTP to applications

Format • Demos via ellie-app.com • Exercises via ellie-app.com •
Q&A

Coding Time! README for demo and exercise URLs: bit.ly/jf-elm-workshop

Update View Model Messages The Elm Architecture

Application State Model

Model Virtual DOM View UI as a Function

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

× Todo List Learn Elm Build awesome Elm apps Learn
functional programming User deletes first todo item <html /> Model: New Todo List

Todo List Learn Elm Build awesome Elm apps Learn functional
programming View Model: New Todo List Elm notices missing todo item in virtual DOM list, so it just removes the corresponding <li> instead of fully rendering. elm Virtual DOM ×<html />

Messages Standardized application events

elm app model

elm app model Events Text Input Mouse Click Associate message
with event

elm app model Events Text Input Mouse Click When event
triggers (i.e. user clicks), deliver message

Update Model New Model Respond to messages and create new
state

model Update View

model Update View VDOM

model Update View Select red color

model Update View

model Update View VDOM

Coding Time!

HTTP Commands and Decoders

elm app model ?

elm app model Commands HTTP Dates Random #’s Create command
with response message

elm app model Receive back message with response value when
command completes Commands HTTP Dates Random #’s

Update Model New Model Command

GET /todos/1 Cmd

{ "id": 1, "title": "Learn Elm", "complete": false }

{ "id": 1, "title": "Learn Elm", "complete": false } Dynamic
JSON Static Type type alias TodoItem = { id : Int , title : String , complete : Bool } ?

JSON Decoders Ok { id = 1 , title =
"Learn Elm" , complete = False } { "id": 1, "title": "Learn Elm", "complete": false }

Err BadPayload { "id": 1, "description": "Learn Elm", "complete": false
} Wrong property key, expected title.

type Result error value = Ok value | Err error

404 Not Found Err BadStatus

Coding Time!

Resources • bit.ly/programming-elm • elm-lang.org • elm-lang.org/examples • guide.elm-lang.org •
www.elm-tutorial.org • builtwithelm.co • Slack • elmlang.herokuapp.com

Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/elm-jazzcon-18

JazzCon 2018: Build Web Apps with Elm

JazzCon 2018: Build Web Apps with Elm

More Decks by Jeremy Fairbank

Other Decks in Programming

Featured

Transcript