Your SlideShare is downloading. ×
0
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Om (Cont.)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Om (Cont.)

547

Published on

This is the slides for Shibuya.lisp #18. …

This is the slides for Shibuya.lisp #18.

http://shibuya.lisp-users.org/

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
547
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. OM (CONT.) @TAKUFUKUSHIMA
  • 2. PRISMATIC
  • 3. OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH CLOJURESCRIPT AND REACT
  • 4. CONCLUSION: SIMPLICITY WINS
  • 5. PLUMBING
  • 6. OM-TOOLS
  • 7. 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}})))))
  • 8. 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}})))))
  • 9. DATASCRIPT
  • 10. AN IMMUTABLE IN-MEMORY DATABASE AND DATALOG QUERY ENGINE IN CLOJURESCRIPT.
  • 11. DATOMIC
  • 12. DATALOG
  • 13. (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] }
  • 14. (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] }
  • 15. ;; 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] }
  • 16. ;; 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]]]
  • 17. FLIGHTDECK
  • 18. GOAL: CREATE AN IN MEMORY QUERYABLE DB FROM THE REST API
  • 19. 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))
  • 20. 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))) ...))
  • 21. (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)))
  • 22. THE END OF SLIDES; ANY QUESTION?
  • 23. 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
  • 24. REFERENCES ▸ Prismatic/plumbing https://github.com/prismatic/ plumbing ▸ Prismatic/om-tools https://github.com/Prismatic/ om-tools ▸ tonsky/datascript https://github.com/tonsky/ datascript
  • 25. REFERENCES ▸ Unofficial guide to Datomic internals http:// tonsky.me/blog/unofficial-guide-to-datomic- internals/ Other pictures are distributed under © Taku Fukushima

×