Tweet
Tweet

Slide 1

Slide 1 text

Jeremy Fairbank @elpapapollo / jfairbank Building web apps with Elm Visit README for demo and exercise URLs: bit.ly/fluent-elm-18

Slide 2

Slide 2 text

@testdouble helps improves how the world build software. testdouble.com/agency

Slide 3

Slide 3 text

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 • Static applications • Dynamic applications with the Elm Architecture • Working with Lists • Static Types and Type Aliases • Input Events and Union Types

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/fluent-elm-18

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

    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 46

    Slide 46 text

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