SLIDE 1
Isomorphic web apps with Rum by Nikita Prokopov MOSCOW NOVOSIBIRSK - - PowerPoint PPT Presentation
Isomorphic web apps with Rum by Nikita Prokopov MOSCOW NOVOSIBIRSK - - PowerPoint PPT Presentation
Isomorphic web apps with Rum by Nikita Prokopov MOSCOW NOVOSIBIRSK not existing 1985 not programming 2001 studying programming 2005 not programming Clojure :( 2012 programming Clojure 2015 programming ClojureScript 2016 speaking at
SLIDE 2
SLIDE 3
not existing not programming studying programming not programming Clojure :( programming Clojure programming ClojureScript speaking at ClojuTRE (we’re here)
1985 2001 2005 2012 2015 2016
SLIDE 4
SLIDE 5
HISTORY
SLIDE 6
May 2013 React
SLIDE 7
May 2013 Dec 2013 React Om
SLIDE 8
Om Centralized state atom Asynchronous rendering Leveraged immutability
SLIDE 9
May 2013 Jan 2014 React Om Reagent
SLIDE 10
Reagent Reactive atoms Hiccup syntax
SLIDE 11
May 2013 Feb 2014 React Om Reagent Quiescent
SLIDE 12
Quiescent Minimal No state model Pure functional, no OOP
SLIDE 13
May 2013 Dec 2014 Jan 2014 React Om Reagent Quiescent Rum
SLIDE 14
May 2013 Dec 2014 July Nov 2015 Jan 2014 React Om Reagent Quiescent Hoplon Pump Freactive Rum re-frame Om.Next foam
SLIDE 15
IDEA
SLIDE 16
Rum motivation Borrow all the good stuff Mix Om, Reagent, Quiescent models Be compatible with DataScript
SLIDE 17
Rum motivation Borrow all the good stuff Mix Om, Reagent, Quiescent and other models Be compatible with DataScript any storage Be future-proof
SLIDE 18
Solution Not opinionated Don’t commit to anything Build for extension
SLIDE 19
Library, not a framework No mandatory state model Open, decomplected architecture Well-defined internals are treated as API Clear Rum/React mapping, escape hatches Minimal code base (~900 LOC)
SLIDE 20
IMPLEMENTATION
SLIDE 21
(rum/defc label [text class] [:div.lbl {:class class} text]) (rum/mount (label "Hello" "header") js/document.body)
SLIDE 22
Simpler than React functions, not classes arguments, not props no this (duh) DOM as data
SLIDE 23
(def mixin { :will-mount (fn [state] (assoc state :key (atom nil))) }) (rum/defc label < mixin [text class] [:div.label {:class class} text])
SLIDE 24
State is immutable lifecycle methods are pure can’t update component directly can’t close over a thing that will later change
SLIDE 25
Mixins Pure, composable, no methods Powerful & decomplected: – Update logic defined per-component – Emulate Reagent, Quiescent/PureComponent, Om – Local state is a mixin
SLIDE 26
SERVER-SIDE
SLIDE 27
rum/defc Hiccup React.createElement VDOM DOM Ŝablono React.js
SLIDE 28
(rum/defc label [text] [:.label text]) React.createClass({ render: function() { return React.createElement("div", { class: "label" }, this.props.text); } });
SLIDE 29
rum/defc Hiccup Markup HTML Rum rum/defc Hiccup React.createElement VDOM DOM Ŝablono React.js
SLIDE 30
(rum/defc label [text] [:.label text]) (defn label [text] (str "<div class='label'>" text "</div>"))
SLIDE 31
Server-side rendering Renders to a string Use same components via CLJC 3× faster than Hiccup in interpreting mode No state, no lifecycle Compatible with React.js server-side renderer
SLIDE 32
CONCLUSION
SLIDE 33
What’s Rum good for? Complex single-page apps with fine control Custom/mixed state models Server-side rendering and templating
SLIDE 34
What’s Rum bad for? Doesn’t teach you how to write apps
SLIDE 35