Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Give Elm a Chance (newCodeCamp)

Give Elm a Chance (newCodeCamp)

Joel Clermont

March 25, 2017
Tweet

More Decks by Joel Clermont

Other Decks in Technology

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