Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Enhancing React.js applications with Elm components.

210 views

Published on

Unlike hand-written JavaScript, Elm code does not produce runtime exceptions in practice. Instead, Elm uses type inference to detect problems during compilation, we can take advantage of this and introduce Elm components to our existing ReactJS applications to improve their production durability.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Enhancing React.js applications with Elm components.

  1. 1. Enhancing durability of ReactJS applications with Elm components Vyacheslav Voronchuk OdessaJS 2017
  2. 2. Javascript is not so cool 1.NPM is cancer 2.Runtime exceptions 3.Debugging
  3. 3. NPM 1.Big builds, slow installations 2.Build engineering is needed for production deployments 3.Security issues
  4. 4. random errors
  5. 5. undefined errors
  6. 6. Elm is cool! 1.elm-package 2.elm-reactor 3.elm-make 4.HTML.lazy
  7. 7. elm-package
  8. 8. Automatic versioning
  9. 9. elm-reactor demo
  10. 10. elm-make No build engineering is needed by default, just works
  11. 11. Type mismatches
  12. 12. Missing cases
  13. 13. No null and undefined
  14. 14. Other Errors • No side-effects in functions (pure functions) • Explicit error conditions (Maybe, Result, Task) • Runtime error can happen in Javascript Interop
  15. 15. Elm integration •Fullscreen •DOM container •React Component
  16. 16. Fullscreen
  17. 17. DOM container
  18. 18. Flags Used to pass initialisation settings
  19. 19. Doesn’t work well with elm-reactor
  20. 20. Ports Pub/Sub architecture for dynamic communication by JSON
  21. 21. • Booleans and Strings – both exist in Elm and JS • Numbers – Elm ints and floats -> to JS numbers • Lists –> to JS arrays • Arrays –> to JS arrays • Tuples –> to fixed-length, mixed-type JS arrays • Records –> to JavaScript objects • Maybes –> Nothing and Just 42 -> to null and 42 in JS • Json – JSON.Encode.Value -> to arbitrary JSON
  22. 22. react-elm-components Use elm component as react component in existing react application
  23. 23. with ports
  24. 24. with flags
  25. 25. Why not write all code in Elm?
  26. 26. Verbose markup code All HTML element is a function, each attribute is a function, each event is a function… hard to edit by designers and managers
  27. 27. Lack of existing solutions
  28. 28. bootstrap collapse
  29. 29. collapse port
  30. 30. window scrolling
  31. 31. Lack of engineers
  32. 32. React.js / Elm Frontend Engineer
  33. 33. Thank you! voronchuk@starbuildr.com Skype: voronhukvk https://www.linkedin.com/in/voronchuk
  34. 34. References •http://elm-lang.org/ •https://pragmaticstudio.com/elm •https://guide.elm-lang.org •https://github.com/evancz/react-elm-components •“Elm in Action” by Richard Feldman

×