Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ClojureScript and React

ClojureScript and React

Talk given at KyivClojure #7 on Apr 16 2015

Fbbf614189ede9ac7d867b93a268f9ae?s=128

Myron Mavko

April 16, 2015
Tweet

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?