Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elm - A new approach to building the front end

2fe1b2866cfd498a513295d60d5cad0f?s=47 Joel Clermont
November 06, 2015
Programming
0
100

Elm - A new approach to building the front end

As delivered at True North PHP 2015

2fe1b2866cfd498a513295d60d5cad0f?s=128

Joel Clermont

November 06, 2015
Tweet

More Decks by Joel Clermont

See All by Joel Clermont
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
17
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
24
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
44
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
48
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
35
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
140
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
51
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
35
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
2
150

Other Decks in Programming

See All in Programming
7867fe52a9be4257508a516d4df61578?s=48 tkmnzm
0
140
843e2b37af4a84f89438478aa939a324?s=48 heistak
2
130
Ae276805027a01983503c3edafbdb6b2?s=48 martysuzuki
1
570
428a9c6e5b151e618d4db288105bc5f3?s=48 rarous
0
170
Cc8ec9594b83b5dc3c7eef345c05dc8d?s=48 shiz
1
110
20e0cb05da78d2c0efdd215de213e72a?s=48 tkow
1
120
70adfe7679427fa498899769e632b672?s=48 itok
1
890
933291444e456bfb511a66a2fa9c6929?s=48 j5ik2o
1
150
7b606c5039f083d13e2d2320ce6ddcfa?s=48 dqneo
3
340
6c366ab6293eb42aec0e6f5f69b50882?s=48 ryokbt
2
300
465a530291aedb53fff5a6333e3dedaa?s=48 bk_18
2
230
B8403d102456248570005ee7fb2ba0f7?s=48 tooppoo
0
210

Featured

See All Featured
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.4k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
78b475797a14c84799063c7cd073962f?s=48 holman
447
130k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
70
3.6k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.6k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
200
9.7k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
103
5.1k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
329
15k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
1.4k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
380k

Transcript

  1. Elm
 A new approach to building the front end Joel

    Clermont
 @jclermont

  2. What to expect • Elm language tour

  3. What to expect • Elm language tour • Application architecture

    overview

  4. What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app

  5. What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app • How does this fit in with my current process?

  6. What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app • How does this fit in with my current process? • Tooling

  7. 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?

  8. Elm as a language

  9. Pure Functions

  10. Immutable Data

  11. Statically Typed (plus types as data)

  12. Statically Typed (another example)

  13. Functional Programming • higher-order functions • currying • recursion •

    pattern matching

  14. All hail the pipe!

  15. Questions?

  16. Elm architecture

  17. Model

  18. Update

  19. View

  20. Questions?

  21. Tour a simple app

  22. Model

  23. Update

  24. View

  25. None

  26. Questions?

  27. How does this fit in?

  28. From Elm to your browser • compile to JS

  29. From Elm to your browser • compile to JS •

    link JS source in your web app

  30. From Elm to your browser • compile to JS •

    link JS source in your web app • Elm.fullscreen

  31. From Elm to your browser • compile to JS •

    link JS source in your web app • Elm.fullscreen • Elm.embed

  32. It’s just HTML/CSS/JS

  33. Excellent JS interop

  34. Questions?

  35. Tooling

  36. Compiler

  37. Excellent tooling • Package manager

  38. Excellent tooling • Package manager • REPL

  39. Excellent tooling • Package manager • REPL • Interactive debugger

  40. Excellent tooling • Package manager • REPL • Interactive debugger

    • Great documentation

  41. Questions?

  42. Why should I consider Elm? • It’s fast

  43. Why should I consider Elm? • It’s fast • It’s

    safe

  44. Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem

  45. Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem • Easy to integrate gradually

  46. Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem • Easy to integrate gradually • It’s FUN

  47. 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

  48. Questions? @jclermont

  49. https://joind.in/15744 Thank you! @jclermont