Slide 1

Slide 1 text

Elm, the functional frontend Seiya Izumi (@sy_izumi)

Slide 2

Slide 2 text

Seiya Izumi (@sy_izumi) Software Engineer at Unipos

Slide 3

Slide 3 text

Recent work ● Talked at elm Europe 2019 ● Organized elm Meetup 2019 in Japan

Slide 4

Slide 4 text

What is Elm?

Slide 5

Slide 5 text

Key features ● Typed, functional AltJS ● No runtime error ● Nice error message ● Everything is immutable

Slide 6

Slide 6 text

No runtime error numbers = [1, 2, 3] first = List.head numbers multiplied = first * 2

Slide 7

Slide 7 text

No runtime error numbers = [1, 2, 3] first = List.head numbers multiplied = first * 2 Here raises a compile error

Slide 8

Slide 8 text

No runtime error numbers = [1, 2, 3] first = numbers |> List.head |> Maybe.withDefault 0 multiplied = first * 2 Now, Maybe was unwrapped into Int with a default value

Slide 9

Slide 9 text

Builtin types String, Int, Bool, Seq, Dict, List, … type Maybe a = Just a | Nothing type Result a b = Ok a | Err b type Task x a

Slide 10

Slide 10 text

Nice error message

Slide 11

Slide 11 text

Nice error message Syntax errors are highly concentrated in the first weeks with a language, and people are particularly vulnerable in this time. When a beginner asks themselves why something is hard, it is easy to think, "Because I am bad at it!" And it is easy to spiral from there. “The Syntax Cliff” by Evan Czaplicki

Slide 12

Slide 12 text

Meanwhile in TypeScript...

Slide 13

Slide 13 text

Port (JavaScript interoperability) Elm JavaScript Subscribe Send

Slide 14

Slide 14 text

Elm on React cultureamp/react-elm-components import Elm from 'react-elm-components' import { Todo } from '../dist/elm/todomvc.js' function render() { return }

Slide 15

Slide 15 text

Why functional programming on frontend?

Slide 16

Slide 16 text

Frontend is full of side-effect ● DOM rendering ● Web API ● Browser API ● Timer and more...

Slide 17

Slide 17 text

Frontend is full of side-effect ● DOM rendering ● Web API ● Browser API ● Timer and more... Predictability is a key

Slide 18

Slide 18 text

Typical “Event Emitter” Hell Component Component Component Component Component Event Emitter Subscribe Emit Event Emitter Event Emitter Subscribe Emit Subscribe Subscribe Emit Subscribe Subscribe

Slide 19

Slide 19 text

Predictability: Flux architecture “MVC Does Not Scale, Use Flux Instead” by Jing Chen, Facebook

Slide 20

Slide 20 text

Referential Transparency and Predictability Function Function Function

Slide 21

Slide 21 text

The Elm Architecture Model View Update Msg

Slide 22

Slide 22 text

Gotcha: Frontend is a function! Application User Interaction Web API Timer DOM

Slide 23

Slide 23 text

Real world usage

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

50k LOC 2+ years 7+ frontend engineeers

Slide 26

Slide 26 text

No hustling in tools

Slide 27

Slide 27 text

TEA as a railway

Slide 28

Slide 28 text

States are predictable “How to fix a bad interface” by Scott Hurf

Slide 29

Slide 29 text

States are predictable type State = Blank | Loading Progress | Partial Partial.Model | Error Error.Model | Ideal Ideal.Model view : State -> Html msg view state = case state of Blank -> … Loading _ -> … Partial _ -> … Error _ -> … Ideal _ -> …

Slide 30

Slide 30 text

Maintainability keeping productivity Making a massive, aggressive changes everyday!

Slide 31

Slide 31 text

Benefits we got ● Predictable, maintainable codebase ● Lower communication cost ● Aggressive, fearless change

Slide 32

Slide 32 text

Further resources

Slide 33

Slide 33 text

https://speakerdeck.com/izumisy/elmfalsebu-kifang-2019

Slide 34

Slide 34 text

Elm-jp Discord

Slide 35

Slide 35 text

Elmlang Slack

Slide 36

Slide 36 text

JSConf 2019

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

@sy_izumi