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

Why you should care about Elm

Why you should care about Elm

Tereza Sokol

January 20, 2017
Tweet

More Decks by Tereza Sokol

Other Decks in Programming

Transcript

  1. Why you should care about Elm . 0 @terezk_a

  2. Who am I? 1 @terezk_a

  3. 2 @terezk_a

  4. Copenhagen, Denmark 3 @terezk_a

  5. React.js → Elm 4 @terezk_a

  6. Elm-plot 5 @terezk_a

  7. Agenda Today’s developer experience ✨ How do we fix it?

    ☔ Elm to the rescue! 6 @terezk_a
  8. Part I: Today’s developer experience 7 @terezk_a

  9. @terezk_a 8

  10. The promise 9 @terezk_a

  11. Unfortunate circumstances 10 @terezk_a

  12. Unfortunate circumstances Pressure from deadline Bad management Lack of team

    communication New on the team … Bad day 11 @terezk_a
  13. I’ll fix it later 12 @terezk_a

  14. Emotional consequence 13 @terezk_a

  15. Part II: How do we fix it? ✨ 14 @terezk_a

  16. Mutation of state is the work of the devil, don’t

    do it!!!!! (but like ok, if you really need to then whatever) adasdfgsdafgsafgdsafhdvfsga dghf safgd sagfdh sfgad gfsad gfs fghas fgas fgsad fghas fgha desafg arjegrjhrhsgvrehskjggevhlragjvhrkagd jkhrg bdjhvgcnrldajvrjhfdgv sdjhxfgchjvgjkbscgjhkgncjhfdksgvjhkdfg nxghfdskcnjfhdcgnkjhgsdcngkjfhgsjfhgjhfshjkfgnkjsgkfhjdgsckhjfnsjfkgskjdfhjkcsnjkdfhsgcnjksgc njsjkgghjkfcnsjhkdncghjdfnscjhkgnjkfhdgskjhcnfsjhgcnfghjgnfhjkdsgcnfkjnsgshjkfdgncjhdfskncgh jfdckgnfksjhdcgnkjhfsncjhgfnsjhkcnhjsg Type checking, but only like sometimes, great ¯\_(ツ)_/¯ hlp pls wat 15 Unidirectional data flow, yay more stuff @terezk_a
  17. Does it fix it? Theoretically, yes 16 @terezk_a

  18. Let start over 17 @terezk_a

  19. What are we even trying to do? State 18 @terezk_a

  20. What are we even trying to do? State View 19

    @terezk_a
  21. What are we even trying to do? State View Event

    20 @terezk_a
  22. What are we even trying to do? State View Event

    Event => State 21 @terezk_a
  23. What are we even trying to do? State View Event

    Event => State Timer, mouse position etc. Event 22 @terezk_a
  24. What are we even trying to do? State View Event

    Event => State HTTP request, other async stuff Event Timer, mouse position etc. Event 23 @terezk_a
  25. The Elm architecture Model View Message Update Commands Message Subscriptions

    Message 24 @terezk_a
  26. You can do that in JavaScript? 25 @terezk_a

  27. You can do anything in JavaScript View Message Update Commands

    Message Subscriptions Message 26 @terezk_a Model “I’ll fix it later” Mutated, unclean
  28. Part III: Elm to the rescue! ☔ 27 @terezk_a

  29. Constrains 28 @terezk_a

  30. Only pure functions 29 @terezk_a

  31. Pure and impure functions // Impure function function addOne(x) {

    x++; fireMissiles(); } // Pure function function addOne(x) { return x + 1; } 30 @terezk_a
  32. Pure functions and immutability // JavaScript ✨ // (anything goes)

    var x = { foo: ”bar” } var y = f(x) -- Elm -- (only pure functions) x = { foo = “bar” } y = f x 31 x is always unchanged What is x? ¯\_(ツ)_/¯ @terezk_a
  33. Static type system 32 @terezk_a

  34. Static types and type inference -- With function signature horizontalGrid

    : List GridAttr -> PlotElement msg horizontalGrid attrs = Grid (List.foldr (<|) defaultGridConfig attrs) -- Without function signature horizontalGrid attrs = Grid (List.foldr (<|) defaultGridConfig attrs) 33 @terezk_a
  35. No run time errors! 34 @terezk_a

  36. No run time errors!!!!!!!!!! 35 @terezk_a

  37. No run time errors???? dostoevsky = { firstName = "Fyodor”

    , lastName = "Dostoevsky” } greet person = "Hello " ++ person.firstname main = text (greet dostoevsky) 36 The compiler The program @terezk_a
  38. Ok, but really??? 37 @terezk_a

  39. Enforced semantic versioning 38 @terezk_a

  40. Improved performance 39 @terezk_a

  41. Time traveling debugger! ⏳ 40 @terezk_a

  42. Tailored syntax 41 @terezk_a

  43. Constrains Rules • Only pure functions • Static type system

    • Opinionated on architecture Benefits • No run time errors! • Enforced semantic versioning • Improved performance • ⏳ Time traveling debugger! 42 @terezk_a
  44. The eco-system @terezk_a 43

  45. JavaScript interop 44 @terezk_a

  46. Gradual implementation 45 @terezk_a

  47. Helpful community (#beginners!) 46 @terezk_a

  48. That’s why you should care about Elm 47 @terezk_a

  49. Q & A 48 @terezk_a

  50. Contact Tereza Sokol terezasokol@gmail.com terezk_a terezka 49 @terezk_a