Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

Examples include using React.js directly and the Om Clojurescript library that closely follows the React.js API. Also cover a simpler approach to React with the Clojurescript libraries called Reagent and Rum.

8.
ClojureScript
A general purpose language made from decades of design

9.
From Javascript to Clojurescript
f(x) -> (f x)
;; First element of a list is a function call
var foo = “bar” -> (def foo “bar”)
;; bind a name to a value or function
@jr0cket

10.
Clojurescript - basic syntax
(ns clojure.awesome ) ;; define a namespace (scoping)
(defn function-name [args] (behaviour)) ;; define a function, with arguments
(function-name data) ;; call a function with the data as its argument
(def name “data-or-value”) ;; bind a name to data within the namespace scope
(let [name “data-or-value”]) ;; bind a name to a data within the let scope (local)
:keyword-name ;; a keyword is a name (symbol) that points to itself
;; Chaining functions: Thread the result of the first fn into the argument of the next fn
(-> (function-a “data”)
(function-b ,,,) ;; In Clojure commas , are whitespace
(function-c ,,, “data”))

16.
Pure Functions
The results of the function are purely determined by its initial output and its own code
- no external influence, a function only uses local values
- referential transparency (the function can be replaced by its value)

18.
Eliminating Side Effects
Functional programming is about eliminating side effects where you can,
controlling them where you can't - @krisajenkins
The features in Functional Programming come from a
desire to reduce side effects

19.
Design idiom:
Composing
functions
together
You can think of functional
design as evaluating one or
more functions in series of
functions

60.
Om core functions
om.core/IRender
- Render a Om component into the DOM
- uses reify to provide a specific implementation of the om/IRender interface
om.core/IInitState
- maintains a local state (eg. for managing user input data)
om.core/IRenderState
- Render a Om component into the DOM
- renders component on change in local & global state

61.
Om core functions
om.dom/div attributes content
- creates a <div> tag in react
- all react tags need to be wrapped in a div in order to be rendered
- om.dom/… has all the other tags too - h1, h2, p, a … (sablono can be used instead)
#js
- converts clojure maps into Javascript objects
- nest #js functions to to create JS objects - eg. for inline styles

62.
Om Cursors
A cursor is an atom & a path to a location in the atom
app-state :schedule 0
Components use the cursor to refer to pieces of the app state
- without knowing where they are in the state tree
- updating app state is simple as the cursor is in the correct part of the app
state

69.
Re-frame
a pattern for writing SPAs in ClojureScript, using Reagent.
a framework with pure functions which transform data
Architecturally implements "a perpetual loop".
Build apps by writing pure functions for certain parts of
the loop that transform the data
- Re-frame looks after the conveyance of data around the
loop, into and out of the transforming functions you write
- tag line of "Derived Values, Flowing".

71.
Rum
Rum is a client/server library for HTML UI. In ClojureScript, it works as React wrapper, in Clojure, it is a static HTML
generator.
- Simple semantics: Rum is arguably smaller, simpler and more straightforward than React itself.
- Decomplected: Rum is a library, not a framework. Use only the parts you need, throw away or replace what you don’t
need, combine different approaches in a single app, or even combine Rum with other frameworks.
- No enforced state model: Unlike Om, Reagent or Quiescent, Rum does not dictate where to keep your state. Instead, it
works well with any storage: persistent data structures, atoms, DataScript, JavaScript objects, localStorage or any custom
solution you can think of.
- Extensible: the API is stable and explicitly defined, including the API between Rum internals. It lets you build custom
behaviours that change components in significant ways.
- Minimal codebase: You can become a Rum expert just by reading its source code (~900 lines).

78.
Learning by teaching others
I really started thinking in Clojure when I started talking to & teaching others
- Coding dojos
- talks on Clojure (starting with the basics, showing the art of the possible)
- moving on to running conferences
- workshops at hack days