of 29 /29
OM (CONT.) @TAKUFUKUSHIMA

Om (Cont.)

Embed Size (px)

DESCRIPTION

This is the slides for Shibuya.lisp #18. http://shibuya.lisp-users.org/

Citation preview

Page 1: Om (Cont.)

OM (CONT.)@TAKUFUKUSHIMA

Page 2: Om (Cont.)

PRISMATIC

Page 3: Om (Cont.)

OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH

CLOJURESCRIPT AND REACT

Page 4: Om (Cont.)

CONCLUSION: SIMPLICITY WINS

Page 5: Om (Cont.)
Page 6: Om (Cont.)
Page 9: Om (Cont.)

THE REGULAR OM COMPNENTS ARE VERBOSE

(defn topology-viewer [app owner] (reify om/IRender (render [_] (dom/div (dom/svg #js {:width 200 :height 200 :style {:backgoundColor "grey"}} (dom/circle #js {:cx 30 :cy 30 :r 25 :stroke "grey" :strokeWidth 1 :fill "wheat"}) (dom/rect #js {:width 50 :height 50 :x 60 :y 10 :style {:fill "red" :stroke "black" :strokeWidth 5 :opacity 0.5}})))))

Page 10: Om (Cont.)

OM-TOOLS PROVIDES USEFUL MACROS(defcomponent topology-viewer [app owner] (render [_] (dom/div (dom/svg {:width 200 :height 200 :style {:backgound-color "grey"}} (dom/circle {:cx 30 :cy 30 :r 25 :stroke "grey" :stroke-width 1 :fill "wheat"}) (dom/rect {:width 50 :height 50 :x 60 :y 10 :style {:fill "red" :stroke "black" :stroke-width 5 :opacity 0.5}})))))

Page 11: Om (Cont.)

DATASCRIPT

Page 12: Om (Cont.)

AN IMMUTABLE IN-MEMORY DATABASE AND DATALOG QUERY

ENGINE IN CLOJURESCRIPT.

Page 13: Om (Cont.)
Page 14: Om (Cont.)

DATOMIC

Page 15: Om (Cont.)
Page 16: Om (Cont.)

DATALOG

Page 17: Om (Cont.)

(require '[datascript :as d])

;; Implicit join, multi-valued attribute

(let [schema {:aka {:db/cardinality :db.cardinality/many}} conn (d/create-conn schema)] (d/transact! conn [ { :db/id -1 :name "Maksim" :age 45 :aka ["Maks Otto von Stirlitz", "Jack Ryan"] } ]) (d/q '[ :find ?n ?a :where [?e :aka "Maks Otto von Stirlitz"] [?e :name ?n] [?e :age ?a] ] @conn));; => #{ ["Maksim" 45] }

Page 18: Om (Cont.)

(d/q '[ :find ?k ?x :in [[?k [?min ?max]] ...] ?range :where [(?range ?min ?max) [?x ...]] [(even? ?x)] ] { :a [1 7], :b [2 4] } range)

;; => #{ [:a 2] [:a 4] [:a 6] [:b 2] }

Page 19: Om (Cont.)

;; Recursive rule(d/q '[ :find ?u1 ?u2 :in $ % :where (follows ?u1 ?u2) ] [ [1 :follows 2] [2 :follows 3] [3 :follows 4] ] '[ [(follows ?e1 ?e2) [?e1 :follows ?e2]] [(follows ?e1 ?e2) [?e1 :follows ?t] (follows ?t ?e2)] ]);; => #{ [1 2] [1 3] [1 4];; [2 3] [2 4];; [3 4] }

Page 20: Om (Cont.)

;; Aggregates

(d/q '[ :find ?color (max ?amount ?x) (min ?amount ?x) :in [[?color ?x]] ?amount ] [[:red 10] [:red 20] [:red 30] [:red 40] [:red 50] [:blue 7] [:blue 8]] 3)

;; => [[:red [30 40 50] [10 20 30]];; [:blue [7 8] [7 8]]]

Page 21: Om (Cont.)

FLIGHTDECK

Page 22: Om (Cont.)

GOAL: CREATE AN IN MEMORY QUERYABLE

DB FROM THE REST API

Page 23: Om (Cont.)

RETRIEVE JSON DATA RECURSIVELY;; Retrieve endpoints for resources(defn- build-db-helper [conn endpoint] (let [done (go (let [res (<! (http/get endpoint {:with-credentials? false})) rs (json-decode (res :body))] (if (not (nil? rs)) (d/transact! conn rs)) (doseq [r rs [k v] r :when (valid-resource? k v)] (<! (build-db-helper conn v)))))] done))

Page 24: Om (Cont.)

BUILD IN-MEMORY DATABASE POPULATING DATA RETRIEVED FROM

THE API SERVER(defn build-db [root] (let [schema {} conn (d/create-conn schema) c (chan) db (chan)] ;; Prevent cursor-ification. Borrowed from the following page: ;; https://gist.github.com/swannodette/11308901 (extend-type d/DB om/IToCursor (-to-cursor ([this _] this) ([this _ _] this))) ...))

Page 25: Om (Cont.)

(go (let [res (<! (http/get root {:with-credentials? false}))] (reset! api-endpoints (json-decode (res :body))) (>! c @api-endpoints))) (let [db-init (chan)] (go (let [endpoints (<! c) ks (for [[k v] endpoints :when (valid-resource? k v)] k) m (select-keys endpoints ks)] (doseq [[k v] m] (<! (build-db-helper conn v))) (>! db-init :ok))) (go (log :info "waiting for the db initialized...") (<! db-init) (log :info "done.") (prn (d/q '[:find ?id ?rid :where [_ :id ?id]] @conn)) (>! db @conn)))

Page 26: Om (Cont.)

THE END OF SLIDES; ANY QUESTION?

Page 27: Om (Cont.)

REFERENCES▸ Prismatic: http://getprismatic.com/home

▸ Om sweet Om: (high-)functional frontend engineering with ClojureScript and React: http://

blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/

▸ Prismatic/schema https://github.com/Prismatic/schema

Page 28: Om (Cont.)

REFERENCES▸ Prismatic/plumbing https://github.com/prismatic/

plumbing▸ Prismatic/om-tools https://github.com/Prismatic/

om-tools▸ tonsky/datascript https://github.com/tonsky/

datascript

Page 29: Om (Cont.)

REFERENCES▸ Unofficial guide to Datomic internals http://

tonsky.me/blog/unofficial-guide-to-datomic-internals/

Other pictures are distributed under © Taku Fukushima