Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

In beta now! bit.ly/programming-elm

Slide 4

Slide 4 text

Functional and statically typed programming language for frontend development elm

Slide 5

Slide 5 text

Web and UI Focused

Slide 6

Slide 6 text

Compiles to JavaScript

Slide 7

Slide 7 text

No runtime exceptions in practice.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Functional

Slide 10

Slide 10 text

Pure Data in Data out

Slide 11

Slide 11 text

Pure No side effects

Slide 12

Slide 12 text

Pure Predictable and Testable!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No undefined is not a function

Slide 15

Slide 15 text

Fast

Slide 16

Slide 16 text

One framework. No fatigue. Update View Model Messages

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Update View Model Messages The Elm Architecture

Slide 22

Slide 22 text

Application State Model

Slide 23

Slide 23 text

Model Virtual DOM View UI as a Function

Slide 24

Slide 24 text

elm Virtual DOM Todo List Learn Elm Build awesome Elm apps Learn functional programming

Slide 25

Slide 25 text

× Todo List Learn Elm Build awesome Elm apps Learn functional programming User deletes first todo item

Slide 26

Slide 26 text

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
  • instead of fully rendering. elm Virtual DOM ×
  • Slide 27

    Slide 27 text

    Messages Standardized application events

    Slide 28

    Slide 28 text

    elm app model

    Slide 29

    Slide 29 text

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

    Slide 30

    Slide 30 text

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

    Slide 31

    Slide 31 text

    Update Model New Model Respond to messages and create new state

    Slide 32

    Slide 32 text

    model Update View

    Slide 33

    Slide 33 text

    model Update View

    Slide 34

    Slide 34 text

    model Update View VDOM

    Slide 35

    Slide 35 text

    model Update View VDOM

    Slide 36

    Slide 36 text

    model Update View Select red color

    Slide 37

    Slide 37 text

    model Update View Select red color

    Slide 38

    Slide 38 text

    model Update View Select red color

    Slide 39

    Slide 39 text

    model Update View

    Slide 40

    Slide 40 text

    model Update View

    Slide 41

    Slide 41 text

    model Update View

    Slide 42

    Slide 42 text

    model Update View VDOM

    Slide 43

    Slide 43 text

    model Update View VDOM

    Slide 44

    Slide 44 text

    Coding Time!

    Slide 45

    Slide 45 text

    HTTP Commands and Decoders

    Slide 46

    Slide 46 text

    elm app model ?

    Slide 47

    Slide 47 text

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

    Slide 48

    Slide 48 text

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

    Slide 49

    Slide 49 text

    Update Model New Model Command

    Slide 50

    Slide 50 text

    GET /todos/1 Cmd

    Slide 51

    Slide 51 text

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

    Slide 52

    Slide 52 text

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

    Slide 53

    Slide 53 text

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

    Slide 54

    Slide 54 text

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

    Slide 55

    Slide 55 text

    type Result error value = Ok value | Err error

    Slide 56

    Slide 56 text

    type Result error value = Ok value | Err error

    Slide 57

    Slide 57 text

    type Result error value = Ok value | Err error

    Slide 58

    Slide 58 text

    404 Not Found Err BadStatus

    Slide 59

    Slide 59 text

    Coding Time!

    Slide 60

    Slide 60 text

    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

    Slide 61

    Slide 61 text

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