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
55

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
29
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
47
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
51
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
49
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
150
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
110
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
39
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
2
160

Other Decks in Technology

See All in Technology
7ff130a0c1a4966472a4bdfaaf05e791?s=48 chandi
0
110
C825832c4fc71ffdfd44905729281fb0?s=48 puhitaku
0
230
3e43337419f62a7e3eefc1b81145a987?s=48 yutakasugiura
0
1.3k
Ec122b66ddfb9af0fba980ec2d0b0de4?s=48 kenjiasaba
0
540
2da0f25da3bb542a8724475589ac79a3?s=48 katsuma
0
230
2219597a939c895e5db6f8b7c94e2859?s=48 pojiro
3
720
657ac87f75c375156e5f79cdadebed4d?s=48 yasuoyasuo
0
100
97a7f7899e0df28c3636b8d44bbe6578?s=48 korodroid
0
160
90c8484f9a934529d21fc1db59b0e4be?s=48 ychan
0
150
7e20183342a040a32924a41343603286?s=48 konabuta
0
1.1k
5df7b3418b4b5528ddfe514d73008883?s=48 tsugimot
0
110
8e308462954f8c38cc60dabb8b7bc6a3?s=48 widstkyi
0
340

Featured

See All Featured
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
204
20k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
12
1.9k
Ba530e786553390f3fb271848485681c?s=48 3n
163
22k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
38k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
115
26k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
120
16k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
258
36k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
503
37k

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