Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Elm - A new approach to building the front end
Joel Clermont
November 06, 2015
Programming
0
100
Elm - A new approach to building the front end
As delivered at True North PHP 2015
Joel Clermont
November 06, 2015
Tweet
Share
More Decks by Joel Clermont
See All by Joel Clermont
jclermont
0
17
jclermont
0
24
jclermont
0
44
jclermont
0
48
jclermont
0
35
jclermont
0
140
jclermont
0
51
jclermont
0
35
jclermont
2
150
Other Decks in Programming
See All in Programming
tkmnzm
0
140
heistak
2
130
martysuzuki
1
570
rarous
0
170
shiz
1
110
tkow
1
120
itok
1
890
j5ik2o
1
150
dqneo
3
340
ryokbt
2
300
bk_18
2
230
tooppoo
0
210
Featured
See All Featured
nonsquared
81
3.4k
philhawksworth
192
8.8k
holman
447
130k
davidbonilla
70
3.6k
lara
172
9.6k
revolveconf
200
9.7k
pauljervisheath
195
15k
jponch
103
5.1k
jeffersonlam
329
15k
paulrobertlloyd
72
1.4k
rocio
155
11k
jonrohan
1021
380k
Transcript
Elm A new approach to building the front end Joel
Clermont @jclermont
What to expect • Elm language tour
What to expect • Elm language tour • Application architecture
overview
What to expect • Elm language tour • Application architecture
overview • Tour an Elm app
What to expect • Elm language tour • Application architecture
overview • Tour an Elm app • How does this fit in with my current process?
What to expect • Elm language tour • Application architecture
overview • Tour an Elm app • How does this fit in with my current process? • Tooling
What to expect • Elm language tour • Application architecture
overview • Tour an Elm app • How does this fit in with my current process? • Tooling • Why should I give Elm a try?
Elm as a language
Pure Functions
Immutable Data
Statically Typed (plus types as data)
Statically Typed (another example)
Functional Programming • higher-order functions • currying • recursion •
pattern matching
All hail the pipe!
Questions?
Elm architecture
Model
Update
View
Questions?
Tour a simple app
Model
Update
View
None
Questions?
How does this fit in?
From Elm to your browser • compile to JS
From Elm to your browser • compile to JS •
link JS source in your web app
From Elm to your browser • compile to JS •
link JS source in your web app • Elm.fullscreen
From Elm to your browser • compile to JS •
link JS source in your web app • Elm.fullscreen • Elm.embed
It’s just HTML/CSS/JS
Excellent JS interop
Questions?
Tooling
Compiler
Excellent tooling • Package manager
Excellent tooling • Package manager • REPL
Excellent tooling • Package manager • REPL • Interactive debugger
Excellent tooling • Package manager • REPL • Interactive debugger
• Great documentation
Questions?
Why should I consider Elm? • It’s fast
Why should I consider Elm? • It’s fast • It’s
safe
Why should I consider Elm? • It’s fast • It’s
safe • Great tooling and ecosystem
Why should I consider Elm? • It’s fast • It’s
safe • Great tooling and ecosystem • Easy to integrate gradually
Why should I consider Elm? • It’s fast • It’s
safe • Great tooling and ecosystem • Easy to integrate gradually • It’s FUN
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
Questions? @jclermont
https://joind.in/15744 Thank you! @jclermont