Elm - A new approach to building the front end

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

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
22
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
41
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
46
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
31
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
140
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
51
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
34
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
2
120

Other Decks in Programming

See All in Programming
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
1
200
3e049ed33195d00a8b745b16c63dce6e?s=48 leew
0
140
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
5
570
01129e638b5aa4d5324cc72fc7d6ee40?s=48 casek
0
190
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
2
350
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
0
120
Bfb93c5dc0fde76ddac605bba0e1b642?s=48 sucitw
0
130
913963fd6beff0a716f512efd3792065?s=48 hampen2929
1
600
0aa238a274c2397214b20d6eed58939b?s=48 moomooya
2
380
5ad0bb268dd2605b09165d464308cb7e?s=48 igaiga
2
120
C44d9ff0fb47045ae04e3183694c7d68?s=48 wafuwafu13
0
280
D79e3b0b78ca7027eb61d73028d45ad6?s=48 uchi_k
0
380

Featured

See All Featured
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
7
580
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
70
7k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
308
21k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
304
16k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
310
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
257
24k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k

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