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
22
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
42
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
46
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
32
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
140
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
100
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
34
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
2
120

Other Decks in Technology

See All in Technology
95aaab3d693889550fd2e7ae02f2f789?s=48 takaking22
13
5.1k
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
2
1.4k
23190387d424e33d6a1a807cea1e0469?s=48 osamtimizer
1
260
66a1bb94b08fe5dcd07635a59681626c?s=48 agilesingapore
0
150
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
340
84907687e50c8ac2a09b02e0d1b36ab1?s=48 toricls
12
2.1k
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
0
190
098ad475722e3697ec2fba28c8654f9f?s=48 yuhta28
0
460
B78199b075c1bbf42f205e04eb2bd764?s=48 himidev
6
1.5k
Ecad9d801d79f6c6e5df93094690685e?s=48 sinsoku
3
570
E8da8d13d06ca69dbe019ecad71ed2a4?s=48 vinaygaba
2
230
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
3
680

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
8.7k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
165
18k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
297
30k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
101
5.8k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
36k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
254
36k
24fc194843a71f10949be18d5a692682?s=48 gr2m
82
11k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
5
360

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