documentom
DESCRIPTION
This slides for 天下一クライアントサイドJS MV*フレームワーク武道会, which is the event about JavaScript MV* frameworks. http://connpass.com/event/6910/TRANSCRIPT
![Page 1: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/1.jpg)
OM@TAKUFUKUSHIMA
![Page 2: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/2.jpg)
![Page 3: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/3.jpg)
OM ADDS MORE VALUES TO REACT.JS
![Page 4: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/4.jpg)
OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH
CLOJURESCRIPT AND REACT
![Page 5: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/5.jpg)
CONCLUSION: SIMPLICITY WINS
![Page 6: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/6.jpg)
![Page 7: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/7.jpg)
PERFORMANCE
![Page 8: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/8.jpg)
![Page 9: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/9.jpg)
UNDOTHE BIGGEST
DIFFERENTIATOR OF OM
![Page 10: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/10.jpg)
WHO DOES NEED UNDO ON THE CLIENT-SIDE?
![Page 11: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/11.jpg)
![Page 12: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/12.jpg)
SHIFT TO THE WEB TECHNOLOGIES
![Page 13: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/13.jpg)
![Page 14: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/14.jpg)
![Page 15: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/15.jpg)
![Page 16: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/16.jpg)
UNDO MADE EASY
![Page 17: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/17.jpg)
![Page 18: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/18.jpg)
ClojureScript was a big enabler.— David Nolen, Creator of Om
![Page 19: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/19.jpg)
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)))))
![Page 20: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/20.jpg)
CLOJURESCRIPT ROCKS1. ClojureScript ecosystem
2. Macros3. Persistent data structures
![Page 21: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/21.jpg)
1. CLOJURESCRIPT ECOSYSTEM
![Page 22: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/22.jpg)
GOOD PARTS OF CLOJURESCRIPT▸ Clojure
▸ 3rd party libraries▸ Source Map
▸ Interop with JavaScript
![Page 23: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/23.jpg)
2. MACROS
![Page 24: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/24.jpg)
MACRO SAVES YOUR TIMECOMPILATION TIME META PROGRAMMING,
WHICH IS HARD IN JAVASCRIPT.▸ prismatic/om-tools
![Page 25: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/25.jpg)
3. PERSISTENT DATA STRUCTURES
![Page 26: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/26.jpg)
![Page 27: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/27.jpg)
![Page 28: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/28.jpg)
![Page 29: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/29.jpg)
PERSISTENT DATA STRURCTURES ARE MEMORY EFFICIENT
![Page 30: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/30.jpg)
GET UNDO NOW
![Page 31: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/31.jpg)
WRAP-UPSIMPLICITY AND UNDO
![Page 32: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/32.jpg)
THE END OF SLIDES; ANY QUESTION?
![Page 33: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/33.jpg)
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/
![Page 34: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/34.jpg)
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/
![Page 35: DocumentOm](https://reader034.vdocuments.mx/reader034/viewer/2022050701/53f47a428d7f72c80e8b4a50/html5/thumbnails/35.jpg)
REFERENCES▸ Google Docs - https://docs.google.com/
▸ Atom - https://atom.io/▸ Git - http://git-scm.com/
Other pictures are distributed under © Taku Fukushima