ClojureScript and React

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?