Moving from bad to good
ClojureScript and React
by Myron Mavko for KyivClojure #7, 2015
Slide 2
Slide 2 text
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!
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Attendify Product Overview
Slide 5
Slide 5 text
Attendify
‣ Mobile applications builder
‣ Thousands of mobile apps
‣ Private social networks in each application
‣ Real-time analytic
‣ Sponsored Posts (ads)
‣ EventWall for screen projection
Slide 6
Slide 6 text
Attendify Hub
Slide 7
Slide 7 text
Social
Slide 8
Slide 8 text
Multi-Event App
Slide 9
Slide 9 text
What it was like:
Knockout, jQuery, Backbone
Slide 10
Slide 10 text
JS dev diary
๏ Exceptions you can’t understand
๏ Debugging
๏ Lack of basic means
๏ Remembering about all known JS pitfalls
๏ Remembering about framework specific pitfalls
Backbone.js+
๏ Manual memory management
๏ Manual DOM-events management
๏ Turning project into a mess
๏ Performance!
Slide 13
Slide 13 text
What it became like:
ClojureScript, React
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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)
Acknowledged ones
๏ Om
๏ Quiescent
๏ Reagent
๏ Rum
Slide 28
Slide 28 text
Om
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
Quiescent
Slide 31
Slide 31 text
Quiescent
✓ Dead simple
✗ Inability to set component react-key
(fixed in upcoming 0.2.0 version)
Slide 32
Slide 32 text
Reagent
Slide 33
Slide 33 text
Reagent
✓ Dead simple
✗ Ratoms is real magic. Easy to loose control.
Slide 34
Slide 34 text
Rum /static
Slide 35
Slide 35 text
Rum /reactive
Slide 36
Slide 36 text
Rum
✓ Most flexible concept
✓ Source code easy to understand
(comparing to Om)
✗ Very young project
✗ Complex cases (like mixin dependencies)
need investigation