<div class="page">
  <h2>This is markup</h2>
  <p class="content">I do two things</p>
</div>

(def page :div.page)
(def header :h2)
(def content :p.content)

[page
  [header "This is data"]
  [content "I do one thing"]]

HTML

Data

Harder?

$scope.say = function(name) {
  console.log("Hi, " + name);
}

<div ng-click="say('Nate')">Say hi.</div>

callbacks

(def click-ch (chan)

(defn div-click [name]
  (put! click-ch name))

[:div {:on-click #(div-click "Nate")} 
      "Say hi!"]'

;; Handle clicks somewhere else

channels

Harder?

$scope.myFavorite = "soylent";
$scope.foods = ["tacos", 
                "shrimp", 
                "soylent"];

<select ng-model="myFavorite">
  <option ng-repeat="food in foods" 
          value="{{food}}">
    {{food}}
  </option>
</select>

(def my-favorite :soylent)
(def foods [:tacos :shrimp :soylent])

(defn select-options [options]
  (for [option options]
     [:option {:value option} option]

(defn select-favorite [favorite foods]
  (let [options (select-options foods)
        attrs {:value favorite}]
    [:select attrs options]))

two-way binding

pure functions

Harder?

(def users (atom []))

(defn get-users []
  (deref users))

(defn add-user [user]
  (swap! users conj user])

mutability

immutability

Harder?

Users.get(function(users) {
  $scope.users = users; // Copy
}

$scope.addUser = function(user) {
  Users.add(user, function(users) {
    $scope.users = users; // Updated Copy
  });
}

Users.get(function(users) {
  $scope.users = users; // Reference
}

$scope.addUser = function(user) {
  $scope.users.push(user); // Triple-binding!!!
}

(defn add-user [users user]
  (conj users user))

objects

functions

Harder?

return {
  users: [],
  addUser: function (user, cb) {
    this.users.push(user);
    cb(this);
  }
};