Elm - A new approach to building the front end

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

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

Want more?

2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
17
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
15
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
39
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
2
480
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
14
860
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
6
470
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
290
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
610
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
330
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
360
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
5
900
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
230

Transcript

  1. 1.

    Elm
 A new approach to building the front end Joel

    Clermont
 @jclermont
  2. 2.

    What to expect • Elm language tour

  3. 3.

    What to expect • Elm language tour • Application architecture

    overview
  4. 4.

    What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app
  5. 5.

    What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app • How does this fit in with my current process?
  6. 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. 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. 8.

    Elm as a language

  9. 9.

    Pure Functions

  10. 10.

    Immutable Data

  11. 11.

    Statically Typed (plus types as data)

  12. 12.

    Statically Typed (another example)

  13. 13.

    Functional Programming • higher-order functions • currying • recursion •

    pattern matching
  14. 14.

    All hail the pipe!

  15. 15.

    Questions?

  16. 16.

    Elm architecture

  17. 17.

    Model

  18. 18.

    Update

  19. 19.

    View

  20. 20.

    Questions?

  21. 21.

    Tour a simple app

  22. 22.

    Model

  23. 23.

    Update

  24. 24.

    View

  25. 25.
    None
  26. 26.

    Questions?

  27. 27.

    How does this fit in?

  28. 28.

    From Elm to your browser • compile to JS

  29. 29.

    From Elm to your browser • compile to JS •

    link JS source in your web app
  30. 30.

    From Elm to your browser • compile to JS •

    link JS source in your web app • Elm.fullscreen
  31. 31.

    From Elm to your browser • compile to JS •

    link JS source in your web app • Elm.fullscreen • Elm.embed
  32. 32.

    It’s just HTML/CSS/JS

  33. 33.

    Excellent JS interop

  34. 34.

    Questions?

  35. 35.

    Tooling

  36. 36.

    Compiler

  37. 37.

    Excellent tooling • Package manager

  38. 38.

    Excellent tooling • Package manager • REPL

  39. 39.

    Excellent tooling • Package manager • REPL • Interactive debugger

  40. 40.

    Excellent tooling • Package manager • REPL • Interactive debugger

    • Great documentation
  41. 41.

    Questions?

  42. 42.

    Why should I consider Elm? • It’s fast

  43. 43.

    Why should I consider Elm? • It’s fast • It’s

    safe
  44. 44.

    Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem
  45. 45.

    Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem • Easy to integrate gradually
  46. 46.

    Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem • Easy to integrate gradually • It’s FUN
  47. 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. 48.

    Questions? @jclermont

  49. 49.

    https://joind.in/15744 Thank you! @jclermont