Modern Web App Development using ClojureScript & React.js / Baishampayan “BG” Ghose (Helpshift)

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