ClojureScript and React

Slide 1

Slide 1 text

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 speciﬁc pitfalls

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 ﬁngertips ๏ core.async ๏ Incredibly fast incremental builds (+ live reloading)

Slide 16

Slide 16 text

ClojureScript beneﬁts

Slide 17

Slide 17 text

ClojureScript beneﬁts

Slide 18

Slide 18 text

ClojureScript beneﬁts

Slide 19

Slide 19 text

React: what is it all about?

Slide 20

Slide 20 text

Virtual DOM

Slide 21

Slide 21 text

Virtual DOM

Slide 22

Slide 22 text

Virtual DOM

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Component

Slide 25

Slide 25 text

Component Mount Rerender Update Unmount cWillMount cWillReceiveProps shouldCUpdate shouldCUpdate cWillUpdate cWillUpdate render render render cDidMount cDidUpdate cDidUpdate cWillUnmount

Slide 26

Slide 26 text

ClojureScript React wrappers

Slide 27

Slide 27 text

Acknowledged ones ๏ Om ๏ Quiescent ๏ Reagent ๏ Rum

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Om ✓ Industry pioneer ✓ Most widespread ✗ Overcomplicated ✗ Cursors for us turned out to be a misconception that leads to unjustiﬁed 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  (ﬁxed 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 ﬂexible concept ✓ Source code easy to understand (comparing to Om) ✗ Very young project ✗ Complex cases (like mixin dependencies) need investigation

Slide 37

Slide 37 text

alexey@attendify.com We’re hiring!

Slide 38

Slide 38 text

Thank You! Questions?