Post Modern Web App Development
Baishampayan “BG” Ghose Helpshift, Inc. @ghoseb
with ClojureScript & React.js
1
About Me• Co-founder/CTO Helpshift, Inc. • Distributed Systems • Functional Programming • Performance Engineering • @ghoseb • github.com/ghoseb
In the beginning…• we had JavaScript • Poorly designed, yet ubiquitous • No clear way of building high-performance
web applications • Browser woes • jQuery
The MV* coup• A Cambrian explosion of JS frameworks • AngularJS • Backbone • Ember • YUI • Dojo • Dart • GWT • …
A detour into Persistent Data Structures
The HAM Trie• Persistent • Immutable • O log(n) characteristics (amortized) • Phil Bagwell, Rich Hickey • Pioneered by Clojure
The HAMT
Modern JS engines• V8 changed the JS runtime landscape • Fast JIT compiled execution • We’re in the middle of a JS engine arms race
– That’s great for us!
React.js• A JS library for building user interfaces • Utilizes a “Virtual DOM” • Enables “immediate mode” updates to UI in
a browser environment • One code path • Don’t bother about previous state • Extremely fast
React.js• Reactive Components
– Abstract React Elements – shouldComponentUpdate
The Virtual DOM
DIV
P FORM
INPUTSPAN<text>
<text>
DIV
P FORM
INPUTSPAN<text>
<text>
Component
Rendering Events
DOM Diffing
Clojure & ClojureScript• Modern, functional language • Persistent & immutable data-structures • Powerfully expressive • CLJS brings Clojure to the browser
– Compiled to JS – Advanced optimizations via GClosure
Reagent = React + Cljs• Wraps React with ClojureScript • Uses ClojureScript's persistent data
structures • Dom diffing is basically = • Even faster than React! • ClojureScript packs a punch as a language • Plethora of convenience tools/libraries
github.com/ghoseb/tackytoe
Questions?
Thanks!
@ghoseb