Learning the difference between Simple and Easy
(CMS + Analytics)
"This application will self-destruct in 10, 9, 8, 7 . . ."
<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
(DOM Events)
$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
(DOM Rendering)
$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
(Data modeling)
(def users (atom []))
(defn get-users []
(deref users))
(defn add-user [user]
(swap! users conj user])
mutability
immutability
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!!!
}
(State management)
(defn add-user [users user]
(conj users user))
objects
functions
return {
users: [],
addUser: function (user, cb) {
this.users.push(user);
cb(this);
}
};
(template + controller + service)
Good Riddance
(live coding)
Angular | Reagent |
---|---|
Templates | Data & Functions |
Controllers | Channels & Functions |
Services | Atoms & Functions |
Directives | Reagent Components |