Elm - A new approach to building the front end

Slide 1

Slide 1 text

Elm  A new approach to building the front end Joel Clermont  @jclermont

Slide 2

Slide 2 text

What to expect • Elm language tour

Slide 3

Slide 3 text

What to expect • Elm language tour • Application architecture overview

Slide 4

Slide 4 text

What to expect • Elm language tour • Application architecture overview • Tour an Elm app

Slide 5

Slide 5 text

What to expect • Elm language tour • Application architecture overview • Tour an Elm app • How does this ﬁt in with my current process?

Slide 6

Slide 6 text

What to expect • Elm language tour • Application architecture overview • Tour an Elm app • How does this ﬁt in with my current process? • Tooling

Slide 7

Slide 7 text

What to expect • Elm language tour • Application architecture overview • Tour an Elm app • How does this ﬁt in with my current process? • Tooling • Why should I give Elm a try?

Slide 8

Slide 8 text

Elm as a language

Slide 9

Slide 9 text

Pure Functions

Slide 10

Slide 10 text

Immutable Data

Slide 11

Slide 11 text

Statically Typed (plus types as data)

Slide 12

Slide 12 text

Statically Typed (another example)

Slide 13

Slide 13 text

Functional Programming • higher-order functions • currying • recursion • pattern matching

Slide 14

Slide 14 text

All hail the pipe!

Slide 15

Slide 15 text

Questions?

Slide 16

Slide 16 text

Elm architecture

Slide 17

Slide 17 text

Model

Slide 18

Slide 18 text

Update

Slide 19

Slide 19 text

View

Slide 20

Slide 20 text

Questions?

Slide 21

Slide 21 text

Tour a simple app

Slide 22

Slide 22 text

Model

Slide 23

Slide 23 text

Update

Slide 24

Slide 24 text

View

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Questions?

Slide 27

Slide 27 text

How does this ﬁt in?

Slide 28

Slide 28 text

From Elm to your browser • compile to JS

Slide 29

Slide 29 text

From Elm to your browser • compile to JS • link JS source in your web app

Slide 30

Slide 30 text

From Elm to your browser • compile to JS • link JS source in your web app • Elm.fullscreen

Slide 31

Slide 31 text

From Elm to your browser • compile to JS • link JS source in your web app • Elm.fullscreen • Elm.embed

Slide 32

Slide 32 text

It’s just HTML/CSS/JS

Slide 33

Slide 33 text

Excellent JS interop

Slide 34

Slide 34 text

Questions?

Slide 35

Slide 35 text

Tooling

Slide 36

Slide 36 text

Compiler

Slide 37

Slide 37 text

Excellent tooling • Package manager

Slide 38

Slide 38 text

Excellent tooling • Package manager • REPL

Slide 39

Slide 39 text

Excellent tooling • Package manager • REPL • Interactive debugger

Slide 40

Slide 40 text

Excellent tooling • Package manager • REPL • Interactive debugger • Great documentation

Slide 41

Slide 41 text

Questions?

Slide 42

Slide 42 text

Why should I consider Elm? • It’s fast

Slide 43

Slide 43 text

Why should I consider Elm? • It’s fast • It’s safe

Slide 44

Slide 44 text

Why should I consider Elm? • It’s fast • It’s safe • Great tooling and ecosystem

Slide 45

Slide 45 text

Why should I consider Elm? • It’s fast • It’s safe • Great tooling and ecosystem • Easy to integrate gradually

Slide 46

Slide 46 text

Why should I consider Elm? • It’s fast • It’s safe • Great tooling and ecosystem • Easy to integrate gradually • It’s FUN

Slide 47

Slide 47 text

Next steps • http://elm-lang.org (live demos, debugger, REPL) • https://pragmaticstudio.com/elm • https://pragmaticstudio.com/blog/2014/12/19/ getting-started-with-elm • @elmlang @czaplic @rtfeldman • http://noredinktech.tumblr.com