ClojureScript and React

Transcript

1. 1.

   Moving from bad to good ClojureScript and React by Myron

   Mavko for KyivClojure #7, 2015
2. 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. 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. 4.

   Attendify Product Overview

5. 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. 6.

   Attendify Hub

7. 7.

   Social

8. 8.

   Multi-Event App

9. 9.

   What it was like: Knockout, jQuery, Backbone

10. 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. 11.

    Knockout.js ๏ Two-way bindings ๏ Templates / Composability ๏ Performance!

12. 12.

    Backbone.js+ ๏ Manual memory management ๏ Manual DOM-events management ๏

    Turning project into a mess ๏ Performance!
13. 13.

    What it became like: ClojureScript, React

14. 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. 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. 16.

    ClojureScript benefits

17. 17.

    ClojureScript benefits

18. 18.

    ClojureScript benefits

19. 19.

    React: what is it all about?

20. 20.

    Virtual DOM

21. 21.

    Virtual DOM

22. 22.

    Virtual DOM

23. 23.

    Component Picture from: http://calendar.perfplanet.com/2013/diff/ ‣ reusable ‣ composable ‣ testable

    ‣ stateful
24. 24.

    Component

25. 25.

    Component Mount Rerender Update Unmount cWillMount cWillReceiveProps shouldCUpdate shouldCUpdate cWillUpdate

    cWillUpdate render render render cDidMount cDidUpdate cDidUpdate cWillUnmount
26. 26.

    ClojureScript React wrappers

27. 27.

    Acknowledged ones ๏ Om ๏ Quiescent ๏ Reagent ๏ Rum

28. 28.

    Om

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

    Quiescent

31. 31.

    Quiescent ✓ Dead simple ✗ Inability to set component react-key


    (fixed in upcoming 0.2.0 version)
32. 32.

    Reagent

33. 33.

    Reagent ✓ Dead simple ✗ Ratoms is real magic. Easy

    to loose control.
34. 34.

    Rum /static

35. 35.

    Rum /reactive

36. 36.

    Rum ✓ Most flexible concept ✓ Source code easy to

    understand (comparing to Om) ✗ Very young project ✗ Complex cases (like mixin dependencies) need investigation
37. 37.

    alexey@attendify.com We’re hiring!

38. 38.

    Thank You! Questions?