Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Om nom nom nom

2,770 views

Published on

Om nom nom nom

Talk given at Clojure/conj 2014 in Washington DC
Video available here: https://www.youtube.com/watch?v=4-oyZpLRQ20

Have you ever needed an easily customisable dashboard? Or needed to visualise data in a browser but was overwhelmed by d3.js? This talk will cover basics of React and Om, some data visualisation libraries and techniques, ways to handle live data and combining all that into an easily customisable dashboard. Expect demos, code and maybe, just maybe, om nom nom nom cookies.

Published in: Technology
  • Be the first to comment

Om nom nom nom

  1. 1. Om Nom Nom Nom Anna Pawlicka Data Engineer @AnnaPawlicka
  2. 2. Dashboard • Communication tool • See progress and compare values • Show danger and success • Share results • Scan quickly
  3. 3. Why build your own? • We can never make a good dashboard that everyone will like • Backend and front-end written in Clojure • Clojurians like to build out of small components • Mix and match & reuse • It’s a good UI programming exercise
  4. 4. A few principles
  5. 5. Tables & Charts • Tables for values: Month Additons Deletions 1 29 14 2 68 34 Month Additions Deletions • Charts for trends and overall comparison: 1 29 14 2 68 34 vs. 100 75 50 25 0 April May June July 200 150 100 50 0 April May June July 20 15 10 5 0 0 3 6 9 12
  6. 6. Don’t visualise! 14 10.5 7 3.5 Last week This week Variance 14 8 - 57% 14 10.5 7 3.5 0 8 14 2014-10-27 2014-11-03 0 2014-10-27 2014-11-03 vs.
  7. 7. Avoid pie charts Sci-Fi Drama Romance Action Comedy Horror Favourite Films 18 21 26 28 76 91 Sci-Fi Drama Romance Action Comedy Horror 21 18 28 26 76 91 0 25 50 75 100 vs.
  8. 8. 3D - why?? Region 1 Region 2 Region 3
  9. 9. Data-Ink Ratio 100 75 50 25 0 April May June July 100 75 50 25 0 April May June July
  10. 10. Step 1: Components
  11. 11. Facebook’s React • Solves complex UI rendering • Declarative framework • One way data binding • Maintains virtual DOM • Diffs between previous and next renders of a UI • Less code • Shorter time to update
  12. 12. Om • Entire state of the UI in a single piece of data • Immutable data structures = Reference equality check • No need to worry about optimisation • Snapshot table & free undo
  13. 13. Global state • Application state • Global state stored in an atom • Accessed and modified through cursors: (def app-state (atom {:films {:data [{:v 1} {:v 2}]}})) (-> cursor :films :data first) :value {:v 1} :path [:films :data 0] :state #<Atom: {:films ..}> Cursor • Updated using: (o m/update! cursor [:films :data] data) (om/transact! cursor [:films :data] #(conj % data))
  14. 14. Local & shared state • Local state • Local to single component • Best for transient state, flags • Updated by using: • Shared state • Accessible by the entire tree • Does not trigger renders (om/set-state! owner :value value)
  15. 15. Components <-> Widgets • D3.js • Data bound to DOM • Interactive - transformations driven by data • Huge community • Higher level libraries available • Dimple.js • Higher level library powered by d3 • Interactive • Simple API • Access to underlying D3 functions
  16. 16. Step 2: Data
  17. 17. How fresh is fresh data? • You could refresh for new data • You could schedule to pull data at some intervals • Or you could use: • Long polling / HTTP streaming • WebSockets
  18. 18. WebSockets / Long polling • Http-kit: • Clojure HTTP server • Great out-of-the box support for WebSockets • HTTP streaming / Long polling • Sente: • Clojure + ClojureScript + core.async + ajax + WebSockets • Simple API • Client & server • There are also: Timbre, Jetty 7 websockets async
  19. 19. Step 3: Combine them into dashboard a.k.a. demo
  20. 20. Dev setup • Chestnut: • Figwheel - instant reloading ClojureScript, and CSS • Weasel - browser-connected REPL is also included • Heroku support
  21. 21. Communication between server and client • Server: (let [{:keys [ch-recv send-fn ajax-get-or-ws-handshake-fn]} (s/make-channel-socket {})] (def ring-ajax-get-ws ajax-get-or-ws-handshake-fn) (def ch-chsk ch-recv) ; ChannelSocket's receive channel (def chsk-send! send-fn)) ; ChannelSocket's send API fn • Client: (let [{:keys [chsk ch-recv send-fn]} (s/make-channel-socket! "/ws" {} {:type :auto})] (def chsk chsk) (def ch-chsk ch-recv) ; ChannelSocket's receive channel (def chsk-send! send-fn)) ; ChannelSocket's send API fn
  22. 22. • Server: (defmethod handle-event :dashboard/github-issues [{:keys [?data ring-req]}] (let [{:keys [url refresh-rate]} ?data] (while true (http/get url {} (fn [{:keys [status headers body error]}] (chsk-send! uid [:dashboard/github-issues body]))) (Thread/sleep refresh-rate)))) (defn event-loop [] (go (loop [ev-msg (<! ch-chsk)] (thread (handle-event ev-msg)) (recur (<! ch-chsk))))) • Client: (defmethod handle-event :dashboard/github-issues [[_ msg] app] (om/update! app [:repository :issues :updated-at] (new js/Date)) (om/update! app [:repository :issues :value] (count msg))) (defn event-loop [app] (go (loop [{:keys [event]} (<! ch-chsk)] … (handle-event payload app)))) (recur (<! ch-chsk)))))
  23. 23. (defonce app-state (atom {:repository {:header {:selected-week nil} :code-frequency {:div {} App model :event-toggle {:current :hover} :data [] :updated-at nil} :contributors {:view {:current :charts} :data [] :updated-at nil}}})) (defn main [] (let [event-chan (chan (sliding-buffer 100))] (om/root application app-state {:target (. js/document (getElementById "app")) Shared channels :shared {:event-chan event-chan :mult-chan (mult event-chan)}})))
  24. 24. (defn dashboard [app owner] (reify om/IRender (render [_] (html [:div (r/jumbotron {} (html [:h1 "Dashboard" [:small (om/build clock (:clock app))]])) (om/build repository-view (-> app :repository) {:opts {:url “https://api.github.com/repos/mastodonc/kixi.hecuba"}})])))) (defn application [app owner] (reify om/IWillMount (will-mount [_] (event-loop app owner)) om/IRender (render [_] (html [:div (case (:state app) Event loop :open (om/build dashboard app) :unknown [:div "Loading dashboard…"])]))))
  25. 25. (defn repository-view [cursor owner {:keys [url]}] (reify om/IDidMount (did-mount [_] (send-messages [{:k :dashboard/github-issues :url url}])) om/IRender (render [_] (let [{:keys [code-frequency contributors issues pulls]} cursor] (html [:div (p/panel {:header (om/build toggles (-> code-frequency :event-toggle))} (om/build charts/stacked-bar-chart code-frequency)) (p/panel {:header (om/build toggles (-> contributors :view)} (om/build code-frequency-stats contributors)) (om/build numbers/simple-stats-card issues) (om/build numbers/simple-stats-card pulls)])))))
  26. 26. (defmulti code-frequency-stats (fn [cursor owner] (-> cursor :view :current))) (defmethod code-frequency-stats :charts [cursor owner] (om/component (html [:div (when (seq (:data cursor)) (om/build chart-stats-view {:data (:data cursor) :div (:div cursor)} {:fn (parse-contributors :charts)}))]))) (defmethod code-frequency-stats :table [cursor owner] (om/component (html [:div (om/build table-stats-view (:data cursor) {:fn (parse-contributors :table)})]))) (defmethod code-frequency-stats :cards [cursor owner] (om/component (html [:div (om/build team-members-stats-view (:data cursor) {:fn (parse-contributors :table)})]))) Transform data before rendering it, without losing benefits of a cursor
  27. 27. (defn chart-stats [cursor owner {:keys [y-axis color]}] (reify om/IInitState (init-state [_] {:c (chan (sliding-buffer 10)) :value (-> cursor :data first :week)}) om/IWillMount (will-mount [_] (let [c (om/get-state owner :c) mult-chan (om/get-shared owner :mult-chan) week (header)] (tap mult-chan c) (go-loop [] (let [event-chan (om/get-state owner :c) {:keys [event v]} (<! event-chan)] (om/set-state! owner :value v) (om/update! week :selected-week (common/unparse-date v "yyyy-MM-dd"))) (recur)))) om/IRenderState … om/IWillUnmount (will-unmount [_] (untap (om/get-shared owner :mult-chan) (om/get-state owner :c))) …)) New channel that we tap to to our shared channel
  28. 28. (defn chart-stats [cursor owner {:keys [y-axis color]}] (reify om/IInitState … om/IWillMount … om/IRenderState (render-state [_ state] (html [:div (let [value (common/timestamp->value (:value state) "week" (:data cursor)) selected-event (om/observe owner (event-type))] (om/build charts/bar-chart {:data value :div (:div cursor)} {:opts {:y-axis y-axis :event-type (:current selected-event)}}))])) om/IWillUnmount …)) Reference cursor (defn event-type [] (om/ref-cursor (-> (om/root-cursor app-state) :repository :code-frequency :event-toggle)))
  29. 29. dimple chart (defn bar-chart [{:keys [data div]} owner {:keys [id] :as opts}] (reify om/IWillMount (will-mount [_] (.addEventListener js/window "resize" (fn [] (let [e (.getElementById js/document id) x (.-clientWidth e) y (.-clientHeight e)] (om/update! div :size {:width x :height y}))))) om/IRender (render [_] (html [:div {:id id}])) om/IDidMount (did-mount [_] (let [n (.getElementById js/document id)] (while (.hasChildNodes n) (.removeChild n (.-lastChild n)))) (draw-chart data div opts)) om/IDidUpdate (did-update [_ _ _] (let [n (.getElementById js/document id)] (while (.hasChildNodes n) (.removeChild n (.-lastChild n)))) (draw-chart data div opts))))
  30. 30. dimple chart (defn- draw-chart [data div {:keys [id bounds x-axis y-axis plot series event-type]}] (let [width (:width div) height (:height div) Chart (.-chart js/dimple) svg (.newSvg js/dimple (str "#" id) width height) dimple-chart (.setBounds (Chart. svg) (:x bounds) (:y bounds) (:width bounds) (:height bounds)) x (.addCategoryAxis dimple-chart "x" x-axis) y (.addMeasureAxis dimple-chart "y" y-axis) s (.addSeries dimple-chart series plot (clj->js [x y]))] (aset s "data" (clj->js data)) (.draw dimple-chart (when (= event-type :click) 1000))))
  31. 31. stacked bar chart (defn- draw [data hover-chan size id event-type] ... (doto (.selectAll svg ".frequency") (-> (.data stacked) (.enter) … ;; Event listeners (cond-> (= event-type :click) (.on "click" (fn [d] (put! hover-chan {:event :click :v (.-x d) :d d})))) (cond-> (= event-type :hover) (.on "mouseover" (fn [_] (put! hover-chan {:event :mouseover :v (.-x d) :d d})))))))
  32. 32. That’s all folks! • Try out all the amazing libraries out there • Don’t be afraid of JavaScript interop • Use Om with data visualisation libraries - it’s easy • Share your components • Share your tips and tricks • Don’t create 3D pie charts
  33. 33. Thank you!
  34. 34. Useful links • Om: https://github.com/swannodette/om • Sente: https://github.com/ptaoussanis/sente • Chestnut: https://github.com/plexus/chestnut • Demo: https://github.com/annapawlicka/pumpkin

×