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 full-size slide

  2. Hello audience

    View full-size slide

  3. Goal

    You leave here wanting to

    play with Elm for an afternoon

    View full-size slide

  4. What to expect
    Elm language tour

    View full-size slide

  5. What to expect
    What is Elm?

    View full-size slide

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

    View full-size 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 full-size slide

  8. What is Elm?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. The Elm Architecture

    View full-size slide

  14. Language + Framework

    View full-size slide

  15. No side effects

    View full-size slide

  16. Why bother with Elm
    instead of Javascript?

    View full-size slide

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

    View full-size slide

  18. No runtime exceptions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. Spot the error

    View full-size slide

  24. Pattern matching

    View full-size slide

  25. Error handling in types

    View full-size slide

  26. The power of the
    type system

    View full-size slide

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

    View full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. Algebraic data types

    View full-size slide

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

    View full-size slide

  32. Elm ecosystem
    • Package manager enforces semantic versioning

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. My story with Elm

    View full-size slide

  38. 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 full-size slide

  39. Closing survey

    View full-size slide

  40. 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 full-size slide

  41. Questions?
    @jclermont

    View full-size slide

  42. Thank you!
    @jclermont


    View full-size slide