Pro Yearly is on sale from $80 to $50! »

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

2fe1b2866cfd498a513295d60d5cad0f?s=128

Joel Clermont

November 06, 2015
Tweet

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