Kik API

+

=

HELL

var nextShoeSize = function(shoes) {
  shoes.size++;
}

var shoes = {size: 5, brand: "nike"};

var nextSize = nextShoeSize(shoes);

log(nextSize);

// => 6

log(shoes.size);

// => 6

(defn next-shoe-size [shoes]
  (inc (:size shoes)))


(def shoes {:size 5 :brand "nike"})

(def next-size (next-shoe-size shoes)

(log next-size)

; => 6

(log (:size shoes))

; => 5

Complex

Simple

complexity

var payBill = function(billId, money) {

  var bill, price;

  var saveBill = function(result) { 
    bill = result; 
  };
  var savePrice = function(result) { 
    price = result; 
  };

  getBillDelayed(saveBill);  // Takes 1s
  getPrice(bill, savePrice); // Fails
  
  money = money - bill;

}

(defn pay-bill [bill-id money]  
  (go 
    (let [bill (<! (get-bill-blocks bill-id))
          price (<! (get-price bill))]
      (- money price))))
          

stupid

Two things

One thing

<div class="page">
  <h2>Welcome to this page</h2>
  <p class="content">This is where I introduce sexp</p>
</div>

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

[page
  [header "Welcome to this page"]
  [content "This is where I introduce sexp"]]

XML

HTML

Clojure

var LikeDiv = React.createClass({
  render: function() {
    var text = this.props.liked ? 'like' : 'don\'t like';
    return (
      <div>You {text} this.</div>
    );
  }
});

function

JS

(defn like-div [like?]
  (let [text (if like? 
               "like" 
               "don't like")]
    [:div (str "You " s " this.")]))

CLJS

$my-font: Arial;
$my-color: #333;

@mixin my-font-family($size) {
  font-family: $my-font;
  color: $my-color;
  font-size: $size;
}

(def my-font "Arial")
(def my-color "black")

(defn my-font-family [size]
  {:font-family my-font
   :color my-color
   :font-size size})

un-American?

SASS

CLJS

(defn font* [args]
  (when-not (every? #(or (string? %)
                         (number? %)) args)
    (js/throw "font* requires a vector of strings or numbers"))
  (let [[family size* color] args
        color (or color "white")
        size (px-or-per size*)]
    (zipmap [:font-family :font-size :color] [family size color])))

(defn flex* [args] ...)
(defn padding* [args] ...)

(div paragraph
     :flex* [:center :flex-start :row]
     :padding* [15 0 15 0]
     :font* [:arial 12 :white]

(defn p [text]
  [paragraph text])

LISP

<button class="delete" on-click="$scope.delete(id)">Delete</button>

[delete-button 
  {:on-click #(action :delete-button.click {:id id})} 
  "Delete"]

delegate

Callbacks

Actions

(def query
  '[:find ?e
    :in $ ?id
    :where
    [?e :project/id _]])

(defn page-content [projects]
  [container
    [rows
      [render projects]]]))

declare

Listen

Render

(def projects (charon.db/listen query db))