Internship 

Wrap UP

Brent Baumgartner


Summary



  • Met awesome people
  • Learned a lot about Clojure + Engineering

Clojurescript and you

The mother (and father) of frontend stacks.

What's Clojurescript?


Compiled Clojure into Closure-compatible Javascript

  • Dynamic, general purpose language
  • Functional
  • Efficient immutability
  • Excellent state management

Google Closure?





What's that?

Why Clojurescript?





Harness the libraries and reach of Javascript, 
with the power of Clojure.

Interop Example



Hello world
 (.alert window "Hello, world! It's " (Date.))

D3
(def svg (-> d3 (.select "body") (.append "svg")         (.attr (js->clj {:width width :height height}))))(-> svg (.append "circle")
        (.attr (js->clj {:cx 350 :cy 200 :r 200 :class "left"}))))



React.js


Javascript library for building user interfaces




facebook.github.io/react





Why is React cool?


How can it help me?

Backbone Call stack




source: http://swannodette.github.io/assets/images/bb.jpg

React Call Stack

(with Om)


source: http://swannodette.github.io/assets/images/om.jpg




Simplicity

+

Performance

How?


  • Re-render app on each state update
  • Uses virtual DOM and smart diffing algorithm
  • Only re-render what you have to.


React.js 

+ 

Clojurescript 

=

Om



Om


Clojurescript interface to React




github.com/swannodette/om

Om


Describe UI as EDN

(defn hello-component [name]
 [dom/p "Hello, " name "!"])

(defn say-hello []
  [hello-component "world"])

Create modular, reusable components.

OM


  • App state lives in single place
  • Propagates down to components as necessary
  • Components communicate through channels
  • State management made simple






Next, some code.




Hello, world!

(defn hello-component [name]
 (dom/p "Hello, " name "!"))

(defn say-hello []
  (hello-component "world"))



Lists? No problem.

(defn lister [items]
  (dom/ul
    {:style "color: red"}
    (for [item items]
      (dom/li "Item " item))))

(defn lister-user []
  (dom/div
    (lister (range 3)))



STate Time!

(def click-count (atom 0))
  
(defn counting-component []
  (dom/div
    "You have clicked " @click-count " times."
    (dom/input {:type "button" :value "Click me!"
                :on-click #(swap! click-count inc)})))



Om + React simplify DOM 
interaction, allowing you 
to reason more effectively 
about state and application
 behavior.





THanks


Made with Slides.com