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
51

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
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
100
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
36
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
2
150

Other Decks in Technology

See All in Technology
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
130
254ef4587f3c010fc0c52517ff5514c2?s=48 watanabeyu
0
170
40301c0affdf359eaca771713e22b71a?s=48 harshbothra
0
150
A1792748885fe8f2555d9c718ee7ae53?s=48 joytomo
0
110
8065fe5a0d33908c6f71c5ae28939dcd?s=48 ayatokura
0
100
8e1e170fce92e2300b3bb1780326dc9a?s=48 takehaya
0
150
18c4748985323ef0e69f3436f89fbdb8?s=48 hiroyaiizuka
0
210
8a84268593355816432ceaf78777d585?s=48 dena_tech
1
860
B1dca90d4b3ffd2ccd918774e1ba170d?s=48 hmatsu47
0
110
2795514d0184c363832fd7591caaf3f5?s=48 armaniacs
0
410
8a84268593355816432ceaf78777d585?s=48 dena_tech
15
3.6k
C21becdee5cd08b34c7452276e64c1fe?s=48 yamamuteki
3
890

Featured

See All Featured
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
272
16k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
18
1.2k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
53
3.5k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
188
14k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
79acae287842acf29084005533a7fb3b?s=48 hursman
106
9.3k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
332
29k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
112
10k
78b475797a14c84799063c7cd073962f?s=48 holman
447
130k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
437
28k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
610
55k

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