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

The slides used in 天下一クライアントサイドJS MV*フレームワーク武道会, which is the event about JavaScript MV* frameworks.

http://connpass.com/event/6910/

  • Login to see the comments

Om

  1. 1. OM @TAKUFUKUSHIMA
  2. 2. OM ADDS MORE VALUES TO REACT.JS
  3. 3. OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH CLOJURESCRIPT AND REACT
  4. 4. CONCLUSION: SIMPLICITY WINS
  5. 5. PERFORMANCE
  6. 6. UNDO THE BIGGEST DIFFERENTIATOR OF OM
  7. 7. WHO DOES NEED UNDO ON THE CLIENT-SIDE?
  8. 8. SHIFT TO THE WEB TECHNOLOGIES
  9. 9. UNDO MADE EASY
  10. 10. ClojureScript was a big enabler. — David Nolen, Creator of Om
  11. 11. 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)))))
  12. 12. CLOJURESCRIPT ROCKS 1. ClojureScript ecosystem 2. Macros 3. Persistent data structures
  13. 13. 1. CLOJURESCRIPT ECOSYSTEM
  14. 14. GOOD PARTS OF CLOJURESCRIPT ▸ Clojure ▸ 3rd party libraries ▸ Source Map ▸ Interop with JavaScript
  15. 15. 2. MACROS
  16. 16. MACRO SAVES YOUR TIME COMPILATION TIME META PROGRAMMING, WHICH IS HARD IN JAVASCRIPT. ▸ prismatic/om-tools
  17. 17. 3. PERSISTENT DATA STRUCTURES
  18. 18. PERSISTENT DATA STRURCTURES ARE MEMORY EFFICIENT
  19. 19. GET UNDO NOW
  20. 20. WRAP-UP SIMPLICITY AND UNDO
  21. 21. THE END OF SLIDES; ANY QUESTION?
  22. 22. 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/
  23. 23. 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/
  24. 24. REFERENCES ▸ Google Docs - https://docs.google.com/ ▸ Atom - https://atom.io/ ▸ Git - http://git-scm.com/ Other pictures are distributed under © Taku Fukushima

×