Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om...
Transcript of Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om...
![Page 1: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/1.jpg)
Isomorphic web apps with Rumby Nikita Prokopov
![Page 2: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/2.jpg)
NOVOSIBIRSK
MOSCOW
![Page 3: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/3.jpg)
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
![Page 4: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/4.jpg)
![Page 5: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/5.jpg)
HISTORY
![Page 6: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/6.jpg)
May2013
React
![Page 7: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/7.jpg)
May2013
Dec2013
React Om
![Page 8: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/8.jpg)
Om
Centralized state atom
Asynchronous rendering
Leveraged immutability
![Page 9: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/9.jpg)
May2013
Jan2014
React OmReagent
![Page 10: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/10.jpg)
Reagent
Reactive atoms
Hiccup syntax
![Page 11: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/11.jpg)
May2013
Feb2014
React OmReagentQuiescent
![Page 12: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/12.jpg)
Quiescent
Minimal
No state model
Pure functional, no OOP
![Page 13: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/13.jpg)
May2013
Dec2014
Jan2014
React OmReagentQuiescent
Rum
![Page 14: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/14.jpg)
May2013
Dec2014
July Nov2015
Jan2014
React OmReagentQuiescent
HoplonPump
FreactiveRum
re-frame
Om.Next
foam
![Page 15: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/15.jpg)
IDEA
![Page 16: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/16.jpg)
Rum motivation
Borrow all the good stuff
Mix Om, Reagent, Quiescent models
Be compatible with DataScript
![Page 17: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/17.jpg)
Rum motivation
Borrow all the good stuff
Mix Om, Reagent, Quiescent and other models
Be compatible with DataScript any storage
Be future-proof
![Page 18: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/18.jpg)
Solution
Not opinionated
Don’t commit to anything
Build for extension
![Page 19: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/19.jpg)
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)
![Page 20: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/20.jpg)
IMPLEMENTATION
![Page 21: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/21.jpg)
(rum/defc label [text class] [:div.lbl {:class class} text])
(rum/mount (label "Hello" "header") js/document.body)
![Page 22: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/22.jpg)
Simpler than React
functions, not classes
arguments, not propsno this (duh)
DOM as data
![Page 23: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/23.jpg)
(def mixin { :will-mount (fn [state] (assoc state :key (atom nil))) })
(rum/defc label < mixin [text class] [:div.label {:class class} text])
![Page 24: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/24.jpg)
State
is immutable
lifecycle methods are pure
can’t update component directly
can’t close over a thing that will later change
![Page 25: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/25.jpg)
Mixins
Pure, composable, no methods
Powerful & decomplected:
– Update logic defined per-component
– Emulate Reagent, Quiescent/PureComponent, Om
– Local state is a mixin
![Page 26: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/26.jpg)
SERVER-SIDE
![Page 27: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/27.jpg)
rum/defc Hiccup
React.createElement VDOM
DOM
Ŝablono
React.js
![Page 28: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/28.jpg)
(rum/defc label [text] [:.label text])
React.createClass({ render: function() { return React.createElement("div", { class: "label" }, this.props.text); }});
![Page 29: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/29.jpg)
rum/defc Hiccup
Markup HTML
Rum
rum/defc Hiccup
React.createElement VDOM
DOM
Ŝablono
React.js
![Page 30: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/30.jpg)
(rum/defc label [text] [:.label text])
(defn label [text] (str "<div class='label'>" text "</div>"))
![Page 31: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/31.jpg)
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
![Page 32: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/32.jpg)
CONCLUSION
![Page 33: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/33.jpg)
What’s Rum good for?
Complex single-page apps with fine control
Custom/mixed state models
Server-side rendering and templating
![Page 34: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/34.jpg)
What’s Rum bad for?
Doesn’t teach you how to write apps
![Page 35: Isomorphic web apps with Rum - clojutre.org · Leveraged immutability. May 2013 Jan 2014 React Om Reagent. Reagent Reactive atoms Hiccup syntax. May 2013 Feb 2014 React Om Reagent](https://reader034.fdocuments.net/reader034/viewer/2022050419/5f8f00adb34e7a40f2704085/html5/thumbnails/35.jpg)
Contacts
github.com/tonsky/rum
#tonsky/rum at gitter.im
#rum at clojurians.slack.com
@nikitonsky