Enhancing React.js applications with Elm components.

1. Enhancing durability of
ReactJS applications with
Elm components
Vyacheslav Voronchuk
OdessaJS 2017

2. Javascript is not so cool
1.NPM is cancer
2.Runtime exceptions
3.Debugging

3. NPM
1.Big builds, slow installations
2.Build engineering is needed for
production deployments
3.Security issues

4. random errors

5. undefined errors

6. Elm is cool!
1.elm-package
2.elm-reactor
3.elm-make
4.HTML.lazy

7. elm-package

8. Automatic versioning

9. elm-reactor demo

10. elm-make
No build engineering is needed by default, just
works

11. Type mismatches

12. Missing cases

13. No null and undefined

14. Other Errors
• No side-effects in functions (pure functions)
• Explicit error conditions (Maybe, Result, Task)
• Runtime error can happen in Javascript Interop

16. Elm integration
•Fullscreen
•DOM container
•React Component

17. Fullscreen

18. DOM container

19. Flags
Used to pass initialisation settings

20. Doesn’t work well with elm-reactor

21. Ports
Pub/Sub architecture for dynamic
communication by JSON

24. • 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

25. react-elm-components
Use elm component as react
component in existing react application

26. with ports

27. with flags

28. Why not write all code
in Elm?

29. 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

32. Lack of existing
solutions

33. bootstrap collapse

34. collapse port

35. window scrolling

36. Lack of engineers

37. React.js / Elm Frontend Engineer

38. Thank you!
voronchuk@starbuildr.com
Skype: voronhukvk
https://www.linkedin.com/in/voronchuk

39. 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