Elm - A new approach to building the front end

As delivered at True North PHP 2015

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