ClojureScript and React

Talk given at KyivClojure #7 on Apr 16 2015

Transcript

1. Moving from bad to good ClojureScript and React by Myron Mavko for KyivClojure #7, 2015
2. About me ๏ Myron Mavko ๏ Software engineer at Attendify.com ๏ Years of JS, jQuery, Backbone, ExtJS and all the classics ๏ Finally moving to something that works!
3. Agenda ๏ Product overview ๏ What it was like: Knockout, jQuery, Backbone ๏ What it became like: ClojureScript, React ๏ React: what is it all about? ๏ Overview of ClojureScript React wrappers
4. Attendify Product Overview
5. Attendify ‣ Mobile applications builder ‣ Thousands of mobile apps ‣ Private social networks in each application ‣ Real-time analytic ‣ Sponsored Posts (ads) ‣ EventWall for screen projection
6. Attendify Hub
7. Social
8. Multi-Event App
9. What it was like: Knockout, jQuery, Backbone
10. JS dev diary ๏ Exceptions you can’t understand ๏ Debugging ๏ Lack of basic means ๏ Remembering about all known JS pitfalls ๏ Remembering about framework specific pitfalls
11. Knockout.js ๏ Two-way bindings ๏ Templates / Composability ๏ Performance!
12. Backbone.js+ ๏ Manual memory management ๏ Manual DOM-events management ๏ Turning project into a mess ๏ Performance!
13. What it became like: ClojureScript, React
14. Our experience ๏ Being early adopters of ClojureScript (1.5+ years) ๏ Being early adopters of React (1.5+ years) ๏ Being early adopters of React cljs wrappers ๏ Watching it all evolves
15. CLJS dev diary ๏ Exceptions and errors are easy to understand ๏ No reason for debugging ๏ No JS with its pitfalls and tons of libraries ๏ Power of Clojure at your fingertips ๏ core.async ๏ Incredibly fast incremental builds (+ live reloading)
16. ClojureScript benefits
17. ClojureScript benefits
18. ClojureScript benefits
19. React: what is it all about?
20. Virtual DOM
21. Virtual DOM
22. Virtual DOM
23. Component Picture from: http://calendar.perfplanet.com/2013/diff/ ‣ reusable ‣ composable ‣ testable ‣ stateful
24. Component
25. Component Mount Rerender Update Unmount cWillMount cWillReceiveProps shouldCUpdate shouldCUpdate cWillUpdate cWillUpdate render render render cDidMount cDidUpdate cDidUpdate cWillUnmount
26. ClojureScript React wrappers
27. Acknowledged ones ๏ Om ๏ Quiescent ๏ Reagent ๏ Rum
28. Om
29. Om ✓ Industry pioneer ✓ Most widespread ✗ Overcomplicated ✗ Cursors for us turned out to be a misconception that leads to unjustified coherence between UI structure and app state structure
30. Quiescent
31. Quiescent ✓ Dead simple ✗ Inability to set component react-key
 (fixed in upcoming 0.2.0 version)
32. Reagent
33. Reagent ✓ Dead simple ✗ Ratoms is real magic. Easy to loose control.
34. Rum /static
35. Rum /reactive
36. Rum ✓ Most flexible concept ✓ Source code easy to understand (comparing to Om) ✗ Very young project ✗ Complex cases (like mixin dependencies) need investigation
37. alexey@attendify.com We’re hiring!
38. Thank You! Questions?