Today’s browsers are some of the most capable platforms around, and yet our tools are still painfully primitive. JavaScript engines are powerful, yet the language leaves a lot to be desired. Being forced to use JavaScript on the browser also fragments our code-base where we have to duplicate business logic on the server-side. Enter ClojureScript & React.js. ClojureScript allows us to harness the power of functional programming on the browser while reusing server-side code as much as possible. Combining that with React.js we get a powerful tool-belt for building interactive webapps. In this talk I shall illustrate the problems around frontend development and will demonstrate how to combine the power of Clojure with the abstractions provided by React.js to develop fast single-page webapps.

1. Post Modern
Web App
Development
Baishampayan “BG” Ghose
Helpshift, Inc.
@ghoseb
with ClojureScript & React.js
1

2. About Me
• Co-founder/CTO Helpshift, Inc.
• Distributed Systems
• Functional Programming
• Performance Engineering
• @ghoseb
• github.com/ghoseb

3. In the beginning…
• we had JavaScript
• Poorly designed, yet ubiquitous
• No clear way of building high-performance
web applications
• Browser woes
• jQuery

4. The MV* coup
• A Cambrian explosion of JS frameworks
• AngularJS
• Backbone
• Ember
• YUI
• Dojo
• Dart
• GWT
• …

6. A detour into
Persistent Data Structures

7. The HAM Trie
• Persistent
• Immutable
• O log(n) characteristics (amortized)
• Phil Bagwell, Rich Hickey
• Pioneered by Clojure

8. The HAMT

9. 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!

10. 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

11. React.js
• Reactive Components
– Abstract React Elements
– shouldComponentUpdate

12. The Virtual DOM
DIV
P FORM
INPUTSPAN<text>
<text>
DIV
P FORM
INPUTSPAN<text>
<text>
Component
Rendering Events
DOM Diffing

13. Clojure & ClojureScript
• Modern, functional language
• Persistent & immutable data-structures
• Powerfully expressive
• CLJS brings Clojure to the browser
– Compiled to JS
– Advanced optimizations via GClosure

14. 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

15. github.com/ghoseb/tackytoe

16. Questions?

17. Thanks!
@ghoseb