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 durability of ReactJS applications with Elm components Vyacheslav Voronchuk OdessaJS 2017
Javascript is not so cool 1.NPM is cancer 2.Runtime exceptions 3.Debugging
NPM 1.Big builds, slow installations 2.Build engineering is needed for production deployments 3.Security issues
random errors
undefined errors
Elm is cool! 1.elm-package 2.elm-reactor 3.elm-make 4.HTML.lazy
elm-package
Automatic versioning
elm-reactor demo
elm-make No build engineering is needed by default, just works
Type mismatches
Missing cases
No null and undefined
Other Errors • No side-effects in functions (pure functions) • Explicit error conditions (Maybe, Result, Task) • Runtime e...
Elm integration •Fullscreen •DOM container •React Component
Fullscreen
DOM container
Flags Used to pass initialisation settings
Doesn’t work well with elm-reactor
Ports Pub/Sub architecture for dynamic communication by JSON
• Booleans and Strings – both exist in Elm and JS • Numbers – Elm ints and floats -> to JS numbers • Lists –> to JS arrays...
react-elm-components Use elm component as react component in existing react application
with ports
with flags
Why not write all code in Elm?
Verbose markup code All HTML element is a function, each attribute is a function, each event is a function… hard to edit b...
Lack of existing solutions
bootstrap collapse
collapse port
window scrolling
Lack of engineers
React.js / Elm Frontend Engineer
Thank you! voronchuk@starbuildr.com Skype: voronhukvk https://www.linkedin.com/in/voronchuk
References •http://elm-lang.org/ •https://pragmaticstudio.com/elm •https://guide.elm-lang.org •https://github.com/evancz/r...
Enhancing React.js applications with Elm components.
Enhancing React.js applications with Elm components.
Enhancing React.js applications with Elm components.
Enhancing React.js applications with Elm components.
Enhancing React.js applications with Elm components.
Upcoming SlideShare
Loading in …5
×

Enhancing React.js applications with Elm components.

326 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
no profile picture user

  • Login to see the comments

  • 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

×