Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Om/React.js/Clojurescript: An introduction

Om/React.js/Clojurescript: An introduction

An introduction to Om/React.js/ClojureScript

F2be889a5fde4e701779fcd3ef2501ba?s=128

Peter Brachwitz

May 21, 2014
Tweet

More Decks by Peter Brachwitz

Other Decks in Programming

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