Rethinking All Practices: Building Web Applications with Elm

Slide 1

Slide 1 text

React.js CONF 2016

Slide 2

Slide 2 text

Rethinking All Practices Building Web Applications in Elm Jamison Dance

Slide 3

Slide 3 text

@jergason http://jamison.dance JavaScript Jabber Who am I? React Rally

Slide 4

Slide 4 text

Isomorphic

Slide 5

Slide 5 text

“ For most algebraic structures, including groups and rings, a homomorphism is an isomorphism if and only if it is bijective.” - Some Internet Rando

Slide 6

Slide 6 text

Isomorphic

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

UNIVERSAL

Slide 11

Slide 11 text

Big JavaScript 2047 1 petabyte

Slide 12

Slide 12 text

More Tools

Slide 13

Slide 13 text

Rethink Best Practices console.lol = console.log; for (var i = 0; i < 100; i++) { console.lol('lol'); }

Slide 14

Slide 14 text

Rethink Best Practices console.lol = console.log for (var i = 0 i < 100 i++) { console.lol('lol') }

Slide 15

Slide 15 text

Elm

Slide 16

Slide 16 text

The Problem

Slide 17

Slide 17 text

function foo(num) { if (num > 10) { return 'demo code is best code' } } console.log(foo(1).toUpperCase()) //

Slide 18

Slide 18 text

Know when they happen

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Bob did this

Slide 21

Slide 21 text

Prevent them

Slide 22

Slide 22 text

function foo(num) { if (num > 10) { return 'demo code is best code' } } console.log(foo(1).toUpperCase()) //

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

function foo(num: number): any { if (num > 10) { return 'demo code is best code' } } console.log(foo(1).toUpperCase()) //

Slide 25

Slide 25 text

ᕕ( ᐛ )ᕗ

Slide 26

Slide 26 text

Gradual Type Systems

Slide 27

Slide 27 text

Code that is hard to type is code you will not type.

Slide 28

Slide 28 text

Elm has a static type system. No runtime errors

Slide 29

Slide 29 text

foo num = if num > 10 then "demo code is best code"

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

foo num = if num > 10 then "demo code is best code" else null

Slide 32

Slide 32 text

No `null` ¯\_(ϑ)_/¯

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

foo num = if num > 10 then "demo code is best code" else "shoot"

Slide 35

Slide 35 text

type Bool = True | False

Slide 36

Slide 36 text

type Maybe a = Just a | Nothing

Slide 37

Slide 37 text

foo num = if num > 10 then Just "demo code is best code" else Nothing

Slide 38

Slide 38 text

foo : Int -> Maybe String foo num = if num > 10 then Just "demo code is best code" else Nothing

Slide 39

Slide 39 text

bar num = case foo num of Just str -> String.toUpper str Nothing -> "WELP"

Slide 40

Slide 40 text

bar num = case foo num of Just str -> String.toUpper str

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

“ The competent programmer is fully aware of the strictly limited size of their own skull.” - Edsger W. Dijkstra

Slide 43

Slide 43 text

Uber For Cats For Dogs

Slide 44

Slide 44 text

The Problem

Slide 45

Slide 45 text

React!

Slide 46

Slide 46 text

Or not

Slide 47

Slide 47 text

Elm Architecture

Slide 48

Slide 48 text

Stateless functions

Slide 49

Slide 49 text

function add(a, b) { return a + b }

Slide 50

Slide 50 text

Or not

Slide 51

Slide 51 text

function add(a, b) { fireZeMissiles() return a + b }

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Uber For Cats For Dogs

Slide 54

Slide 54 text

function add(a, b) { recordUserAddition(a, b) return a + b }

Slide 55

Slide 55 text

Elm only has stateless functions.

Slide 56

Slide 56 text

add a b = a + b

Slide 57

Slide 57 text

Immutable data

Slide 58

Slide 58 text

function updateUserScore(user, points) { return { ...user, points: user.points + points } }

Slide 59

Slide 59 text

Or not

Slide 60

Slide 60 text

function updateUserScore(user, points) { user.points += points }

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Elm only has immutable data.

Slide 63

Slide 63 text

updateUser user points = { user | points = user.points + points }

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Solutions Callbacks Flux Redux Observables

Slide 66

Slide 66 text

Button ButtonClicked Update Button Model

Slide 67

Slide 67 text

Constraints versus guidelines.

Slide 68

Slide 68 text

All Programs Good Programs Elm Programs

Slide 69

Slide 69 text

Constraints can guide you towards better design.

Slide 70

Slide 70 text

“ The competent programmer is fully aware of the strictly limited size of their own skull.” - Edsger W. Dijkstra

Slide 71

Slide 71 text

Caveats • Smaller community • Server rendering is not easy (but improving) • No React Native • Elm does best when it runs everything • Early days still

Slide 72

Slide 72 text

Elm React Native http://ohanhi.github.io/elm-native-ui.html

Slide 73

Slide 73 text

Browser apps are growing.

Slide 74

Slide 74 text

JS tooling is evolving.

Slide 75

Slide 75 text

Elm is what it is evolving towards.

Slide 76

Slide 76 text

Resources • elm-lang.org • elmlang.herokuapp.com • devchat.tv/js-jabber/175-jsj-elm-with-evan- czaplicki-and-richard-feldman • Eﬀects As Data • Let's Be Mainstream • just bug me on twitter @jergason

Slide 77

Slide 77 text

Thanks.