Om/React.js/Clojurescript: An introduction

An introduction to Om/React.js/ClojureScript

Transcript

1. OM AN INTRODUCTION / Peter Brachwitz @p_brc
2. WHAT? ... WHY? A new way of building web UIs using Facebook's new React.js library ... but in ClojureScript with added "functional" benefits.
3. PARTIES INVOLVED 1. ClojureScript 2. React.js 3. Om
4. CLOJURESCRIPT A Clojure compiler that emits JavaScript code
5. Its output can be optimized with Google's Closure compiler
6. ALL OF CLOJURE? Almost. Excluded are the bits that don't make sense in a JavaScript environment.
7. THINGS THAT WON'T WORK: Concurrency : Refs, Agents Data types: BigDecimal, BigInteger, Ratio Host (Java, CLR) IO related things: *out* Full list of differences on GitHub
8. REACT.JS? A JavaScript library for building user interfaces
9. MVC? No.
10. MVP? No.
11. MVVM? No.
12. SIMPLE Just the view. No models. No controllers.
13. REACTIVE Data flow into the UI
14. FAST Let v be a virtual DOM dif f ( , ) = Δ v 0 v 1
15. WHY? JavaScript is fast DOM mutation is slow Minimize DOM mutation and gain performance
16. OM A ClojureScript interface to React.js written by David Nolen
17. IMMUTABLE, PERSISTENT DATA STRUCTURES Snapshots, Undo, efficient rendering
18. xs d b g a c f h ys d' g' f' e Source http://en.wikipedia.org/wiki/File:Purely_functional_tree_after.svg
19. TYPICALLY: CENTRALIZED APPLICATION STATE Using Clojure's atom (CAS) and om's transact!
20. NO (VIEW) MODELS Cursors into global application state
21. LET'S LOOK AT SOME CODE!
22. SOURCES Om on Github Basic Om Tutorial React on Github Comparing JavaScript and ClojureScript A ClojureScript tutorial by David Nolen