Om
?
5 likes?9,003 views
The slides used in 爺和匯クライアントサイドJS MV*フレ`ムワ`ク冷祇氏, which is the event about JavaScript MV* frameworks. http://connpass.com/event/6910/
![TIME TRAVEL
;; Initial state.
(def app-history (atom [@app-state]))
;; When the state is changed, it's added to the history.
(add-watch app-state :history
(fn [_ _ _ n]
(when-not (= (last @app-history) n)
(swap! app-history conj n))
(set! (.-innerHTML (.getElementById js/document "message"))
(let [c (count @app-history)]
(str c " Saved " (pluralize c "State"))))))
;; If the undo button is pressed, pop the state.
(aset js/window "undo"
(fn [e]
(when (> (count @app-history) 1)
(swap! app-history pop)
(reset! app-state (last @app-history)))))](https://image.slidesharecdn.com/om-140711093934-phpapp01/85/Om-19-320.jpg)
Om
- 3. OM ADDS MORE VALUES TO REACT.JS
- 4. OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH CLOJURESCRIPT AND REACT
- 7. PERFORMANCE
- 10. WHO DOES NEED UNDO ON THE CLIENT-SIDE?
- 12. SHIFT TO THE WEB TECHNOLOGIES
- 16. UNDO MADE EASY
- 18. ClojureScript was a big enabler. ！ David Nolen, Creator of Om
- 19. TIME TRAVEL ;; Initial state. (def app-history (atom [@app-state])) ;; When the state is changed, it's added to the history. (add-watch app-state :history (fn [_ _ _ n] (when-not (= (last @app-history) n) (swap! app-history conj n)) (set! (.-innerHTML (.getElementById js/document "message")) (let [c (count @app-history)] (str c " Saved " (pluralize c "State")))))) ;; If the undo button is pressed, pop the state. (aset js/window "undo" (fn [e] (when (> (count @app-history) 1) (swap! app-history pop) (reset! app-state (last @app-history)))))
- 20. CLOJURESCRIPT ROCKS 1. ClojureScript ecosystem 2. Macros 3. Persistent data structures
- 22. GOOD PARTS OF CLOJURESCRIPT ? Clojure ? 3rd party libraries ? Source Map ? Interop with JavaScript
- 23. 2. MACROS
- 24. MACRO SAVES YOUR TIME COMPILATION TIME META PROGRAMMING, WHICH IS HARD IN JAVASCRIPT. ? prismatic/om-tools
- 29. PERSISTENT DATA STRURCTURES ARE MEMORY EFFICIENT
- 30. GET UNDO NOW
- 32. THE END OF SLIDES; ANY QUESTION?
- 33. REFERENCES ? 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/ ? PrismaticEngineering Tweet - https://twitter.com/ PrismaticEng/status/478988034407276546 ? Vue.js Performance Comparisons - http://vuejs.org/ perf/
- 34. REFERENCES ? IMMUTABILITY, INTERACTIVITY & JAVASCRIPT, Balcerona Future JS: http://futurejs.org/agenda/ immutability-interactivity-javascript ? GoyaPixel - http://jackschaedler.github.io/goya/ ? Time Travel, dosync - http://swannodette.github.io/ 2013/12/31/time-travel/ ? Adobe Photoshop.com - http://www.photoshop.com/
- 35. REFERENCES ? Google Docs - https://docs.google.com/ ? Atom - https://atom.io/ ? Git - http://git-scm.com/ Other pictures are distributed under ? Taku Fukushima