Give Elm a Chance! (that conference)

Transcript

1. 

   Give Elm a Chance!
   Joel Clermont

   @jclermont
   

   View Slide

2. Hello audience
   

   View Slide

3. Goal

   You leave here wanting to

   play with Elm for an afternoon
   

   View Slide

4. What to expect
   Elm language tour
   

   View Slide

5. What to expect
   What is Elm?
   

   View Slide

6. What to expect
   Why bother with Elm instead of Javascript?
   

   View Slide

7. What to expect
   What makes Elm useful and interesting?
   • Code that doesn’t crash
   • A powerful type system
   • Ecosystem: quality over quantity
   • Care-free refactoring
   • Amazing QA / debug experience
   

   View Slide

8. What is Elm?
   

   View Slide

9. What is Elm?
   Elm is a language that compiles to JS
   

   View Slide

10. What is Elm?
    Elm (currently) targets the browser
    

    View Slide

11. What is Elm?
    Elm does not replace PHP, C#, Elixir, etc
    

    View Slide

12. What is Elm?
    Elm does not (yet) replace JavaScript
    

    View Slide

13. The Elm Architecture
    

    View Slide

14. Language + Framework
    

    View Slide

15. Model
    

    View Slide

16. Update
    

    View Slide

17. View
    

    View Slide

18. View Slide

19. No side effects
    

    View Slide

20. Questions?
    

    View Slide

21. Why bother with Elm
    instead of Javascript?
    

    View Slide

22. View Slide

23. Why bother with Elm instead of
    Javascript?
    User interfaces get complex quickly
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. What makes Elm
    useful and interesting?
    

    View Slide

29. No runtime exceptions
    

    View Slide

30. No runtime exceptions
    • Hooray, no bugs! Not quite.
    

    View Slide

31. No runtime exceptions
    • Hooray, no bugs! Not quite.
    • Runtime exceptions are a common class of bugs
    

    View Slide

32. No runtime exceptions
    • Hooray, no bugs! Not quite.
    • Runtime exceptions are a common class of bugs
    • “undefined is not a function”
    

    View Slide

33. No Red Ink’s testimonial
    Since we began using Elm in 2015, our production Elm
    code has yet to cause a single runtime exception. Our
    error logs show plenty of crashes from our legacy
    JavaScript code, but none from our Elm code. We've also
    found our Elm-powered front-end substantially easier to
    scale than our previous React code base.
    

    View Slide

34. Spot the error
    

    View Slide

35. Pattern matching
    

    View Slide

36. Error handling in types
    

    View Slide

37. Algebraic data types
    

    View Slide

38. The power of the type system
    • PHP’s type system is getting better, but still basic
    • C# and Java? Better yet, but not very expressive
    • ML type system
    

    View Slide

39. Data modeling!!
    https://youtu.be/IcgmSRJHu_8
    

    View Slide

40. Refactoring
    • refactoring can be scary on
    larger projects, even with tests
    • First few times, I thought it
    couldn’t possibly be that easy
    in Elm
    • Move things around, get
    everything to compile, done
    

    View Slide

41. Questions?
    

    View Slide

42. Ecosystem
    

    View Slide

43. Elm ecosystem
    • Package manager enforces semantic versioning
    

    View Slide

44. Elm ecosystem
    • Package manager enforces semantic versioning
    • API design is extremely thoughtful
    

    View Slide

45. Elm ecosystem
    • Package manager enforces semantic versioning
    • API design is extremely thoughtful
    • Awesome tooling!
    

    View Slide

46. Compiler
    

    View Slide

47. Editors
    

    View Slide

48. Editors
    

    View Slide

49. Editors
    

    View Slide

50. Editors
    

    View Slide

51. Editors
    

    View Slide

52. Debugger
    http://elm-lang.org/assets/blog/0.18/todomvc.html
    

    View Slide

53. Ellie
    https://ellie-app.com/kLKCgY6sK9/0
    

    View Slide

54. Bonus Elm Goodies
    Elm Search
    Elm CSS
    Style Elements
    

    View Slide

55. Questions?
    

    View Slide

56. My story with Elm
    

    View Slide

57. My final sales pitch
    • Welcoming community
    • Lots of effort to making concepts accessible
    • Easy to use it gradually
    • Will make you a better JavaScript developer
    • Developing with Elm is fun!
    

    View Slide

58. Closing survey
    

    View Slide

59. Next steps
    • http://elm-lang.org
    • https://guide.elm-lang.org/
    • https://pragmaticstudio.com/elm
    • https://frontendmasters.com/courses/elm/
    • https://www.dailydrip.com/topics/elm
    • @elmlang @czaplic @rtfeldman @jclermont
    

    View Slide

60. I want to hear from you
    

    @jclermont
    

    View Slide

61. Questions?
    @jclermont
    

    View Slide

62. Thank you!
    @jclermont

    

    

    View Slide