Om

8,286 views

Published on

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

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

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

No Downloads
Views
Total views
8,286
On SlideShare
0
From Embeds
0
Number of Embeds
6,337
Actions
Shares
0
Downloads
9
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

×