Give Elm a Chance (newCodeCamp)

Transcript

1. 1.

   
 Give Elm a Chance! Joel Clermont
 @jclermont

2. 2.

   Hello audience

3. 3.

   Goal
 You leave here wanting to
 play with Elm for

   an afternoon
4. 4.

   What to expect Elm language tour

5. 5.

   What to expect What is Elm?

6. 6.

   What to expect Why bother with Elm instead of Javascript?

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

   What is Elm?

9. 9.

   What is Elm? Elm is a language that compiles to

   JS
10. 10.

    What is Elm? Elm (currently) targets the browser

11. 11.

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

    etc
12. 12.

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

13. 13.

    The Elm Architecture

14. 14.

    Language + Framework

15. 15.

    Model

16. 16.

    Update

17. 17.

    View

18. 18.

    None
19. 19.

    No side effects

20. 20.

    Questions?

21. 21.

    Why bother with Elm instead of Javascript?

22. 22.

    None
23. 23.

    Why bother with Elm instead of Javascript? User interfaces get

    complex quickly
24. 24.

    None
25. 25.

    None
26. 26.

    None
27. 27.

    None
28. 28.

    Questions?

29. 29.

    No runtime exceptions

30. 30.

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

31. 31.

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

    Runtime exceptions are a common class of bugs
32. 32.

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

    Runtime exceptions are a common class of bugs • “undefined is not a function”
33. 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.
34. 34.

    Spot the error

35. 35.

    Pattern matching

36. 36.

    Error handling in types

37. 37.

    Questions?

38. 38.

    The power of the type system

39. 39.

    The power of the type system • PHP’s type system

    is getting better, but still basic
40. 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
41. 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
42. 42.

    Algebraic data types

43. 43.

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

44. 44.

    Questions?

45. 45.

    Ecosystem

46. 46.

    Elm ecosystem • Package manager enforces semantic versioning

47. 47.

    Elm ecosystem • Package manager enforces semantic versioning • API

    design is extremely thoughtful
48. 48.

    Elm ecosystem • Package manager enforces semantic versioning • API

    design is extremely thoughtful • Awesome tooling!
49. 49.

    Compiler

50. 50.

    Editors

51. 51.

    Editors

52. 52.

    Editors

53. 53.

    Editors

54. 54.

    Editors

55. 55.

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

56. 56.

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

57. 57.

    Questions?

58. 58.

    My story with Elm

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

    Closing survey

61. 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
62. 62.

    Questions? @jclermont

63. 63.

    Thank you! @jclermont