Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elm - A new approach to building the front end

Elm - A new approach to building the front end

As delivered at True North PHP 2015

Joel Clermont

November 06, 2015
Tweet

More Decks by Joel Clermont

Other Decks in Programming

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