Give Elm a Chance (newCodeCamp)

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. Questions?
    

    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. Questions?
    

    View Slide

38. The power of the
    type system
    

    View Slide

39. The power of the type system
    • PHP’s type system is getting better, but still basic
    

    View Slide

40. 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
    

    View Slide

41. 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

42. Algebraic data types
    

    View Slide

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

    View Slide

44. Questions?
    

    View Slide

45. Ecosystem
    

    View Slide

46. Elm ecosystem
    • Package manager enforces semantic versioning
    

    View Slide

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

    View Slide

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

    View Slide

49. Compiler
    

    View Slide

50. Editors
    

    View Slide

51. Editors
    

    View Slide

52. Editors
    

    View Slide

53. Editors
    

    View Slide

54. Editors
    

    View Slide

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

    View Slide

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

    View Slide

57. Questions?
    

    View Slide

58. My story with Elm
    

    View Slide

59. 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
    

    View Slide

60. Closing survey
    

    View Slide

61. Next steps
    • http://elm-lang.org (live demos, debugger, REPL)
    • https://guide.elm-lang.org/
    • https://www.elm-tutorial.org
    • https://pragmaticstudio.com/elm
    • https://frontendmasters.com/courses/elm/
    • https://uwm.edu/business/research/centers-institutes/technology-
    innovation/cti-workshop-series/
    • https://www.dailydrip.com/topics/elm
    • @elmlang @czaplic @rtfeldman @jclermont
    

    View Slide

62. Questions?
    @jclermont
    

    View Slide

63. Thank you!
    @jclermont

    

    

    View Slide