Om
Post on 19-Aug-2014
3337 Views
Preview:
DESCRIPTION
Transcript
OM@TAKUFUKUSHIMA
OM ADDS MORE VALUES TO REACT.JS
OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH
CLOJURESCRIPT AND REACT
CONCLUSION: SIMPLICITY WINS
PERFORMANCE
UNDOTHE BIGGEST
DIFFERENTIATOR OF OM
WHO DOES NEED UNDO ON THE CLIENT-SIDE?
SHIFT TO THE WEB TECHNOLOGIES
UNDO MADE EASY
ClojureScript was a big enabler.— David Nolen, Creator of Om
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)))))
CLOJURESCRIPT ROCKS1. ClojureScript ecosystem
2. Macros3. Persistent data structures
1. CLOJURESCRIPT ECOSYSTEM
GOOD PARTS OF CLOJURESCRIPT▸ Clojure
▸ 3rd party libraries▸ Source Map
▸ Interop with JavaScript
2. MACROS
MACRO SAVES YOUR TIMECOMPILATION TIME META PROGRAMMING,
WHICH IS HARD IN JAVASCRIPT.▸ prismatic/om-tools
3. PERSISTENT DATA STRUCTURES
PERSISTENT DATA STRURCTURES ARE MEMORY EFFICIENT
GET UNDO NOW
WRAP-UPSIMPLICITY AND UNDO
THE END OF SLIDES; ANY QUESTION?
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/
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/
REFERENCES▸ Google Docs - https://docs.google.com/
▸ Atom - https://atom.io/▸ Git - http://git-scm.com/
Other pictures are distributed under © Taku Fukushima
top related