$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. What to expect
    • Elm language tour

    View Slide

  3. What to expect
    • Elm language tour
    • Application architecture overview

    View Slide

  4. What to expect
    • Elm language tour
    • Application architecture overview
    • Tour an Elm app

    View Slide

  5. What to expect
    • Elm language tour
    • Application architecture overview
    • Tour an Elm app
    • How does this fit in with my current process?

    View Slide

  6. What to expect
    • Elm language tour
    • Application architecture overview
    • Tour an Elm app
    • How does this fit in with my current process?
    • Tooling

    View Slide

  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?

    View Slide

  8. Elm as a language

    View Slide

  9. Pure Functions

    View Slide

  10. Immutable Data

    View Slide

  11. Statically Typed
    (plus types as data)

    View Slide

  12. Statically Typed
    (another example)

    View Slide

  13. Functional Programming
    • higher-order functions
    • currying
    • recursion
    • pattern matching

    View Slide

  14. All hail the pipe!

    View Slide

  15. Questions?

    View Slide

  16. Elm architecture

    View Slide

  17. Model

    View Slide

  18. Update

    View Slide

  19. View

    View Slide

  20. Questions?

    View Slide

  21. Tour a simple app

    View Slide

  22. Model

    View Slide

  23. Update

    View Slide

  24. View

    View Slide

  25. View Slide

  26. Questions?

    View Slide

  27. How does this fit in?

    View Slide

  28. From Elm to your browser
    • compile to JS

    View Slide

  29. From Elm to your browser
    • compile to JS
    • link JS source in your web app

    View Slide

  30. From Elm to your browser
    • compile to JS
    • link JS source in your web app
    • Elm.fullscreen

    View Slide

  31. From Elm to your browser
    • compile to JS
    • link JS source in your web app
    • Elm.fullscreen
    • Elm.embed

    View Slide

  32. It’s just HTML/CSS/JS

    View Slide

  33. Excellent JS interop

    View Slide

  34. Questions?

    View Slide

  35. Tooling

    View Slide

  36. Compiler

    View Slide

  37. Excellent tooling
    • Package manager

    View Slide

  38. Excellent tooling
    • Package manager
    • REPL

    View Slide

  39. Excellent tooling
    • Package manager
    • REPL
    • Interactive debugger

    View Slide

  40. Excellent tooling
    • Package manager
    • REPL
    • Interactive debugger
    • Great documentation

    View Slide

  41. Questions?

    View Slide

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

    View Slide

  43. Why should I consider Elm?
    • It’s fast
    • It’s safe

    View Slide

  44. Why should I consider Elm?
    • It’s fast
    • It’s safe
    • Great tooling and ecosystem

    View Slide

  45. Why should I consider Elm?
    • It’s fast
    • It’s safe
    • Great tooling and ecosystem
    • Easy to integrate gradually

    View Slide

  46. Why should I consider Elm?
    • It’s fast
    • It’s safe
    • Great tooling and ecosystem
    • Easy to integrate gradually
    • It’s FUN

    View Slide

  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

    View Slide

  48. Questions?
    @jclermont

    View Slide

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


    View Slide