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
September 22, 2015
Technology
0
57

Elm: A new approach to building the front end

2fe1b2866cfd498a513295d60d5cad0f?s=128

Joel Clermont

September 22, 2015
Tweet

More Decks by Joel Clermont

See All by Joel Clermont
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
17
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
31
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
49
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
52
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
65
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
160
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
140
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
42
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
2
190

Other Decks in Technology

See All in Technology
8ba32afb4b7d6967cb38b2dadf1ddd80?s=48 daigo0927
2
160
98fd7d759e70809e826fd3a35e9fe2cb?s=48 hisaotsu
2
280
D2f212ce418f3daa29c23914c9b6892b?s=48 kenmaz
2
370
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
3
1.5k
Cfd6a7b025c390205d1dd8765230bca1?s=48 kiwi26
0
110
179d41d0fdd38c6980de9f2ae0e4768a?s=48 9wick
0
110
63bf22db8ab8da3851da34d2e0cb0c69?s=48 imairi
17
7.4k
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
5
1.3k
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
2
220
E163ae0588e154424d78e17672076ef4?s=48 kosugitti
3
470
7a0bc9670ff654b04d4361a9afd1bba8?s=48 hcrane
3
900
35e08efcf39d692f540047fb756eb4e3?s=48 konifar
0
480

Featured

See All Featured
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
20
5.1k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
496
110k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
342
16k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
297
39k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
190
14k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
245cee81a9c424266e5e401d844ea881?s=48 lara
26
3.4k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k

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

  12. Statically Typed

  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

    • @elmlang • @czaplic • @rtfeldman • http://noredinktech.tumblr.com

  48. Questions? @jclermont

  49. Thank you! @jclermont