Om

of 35 /35
OM @TAKUFUKUSHIMA

description

This slides for 天下一クライアントサイドJS MV*フレームワーク武道会, which is the event about JavaScript MV* frameworks. http://connpass.com/event/6910/

Transcript of Om

Page 1: Om

OM@TAKUFUKUSHIMA

Page 2: Om
Page 3: Om

OM ADDS MORE VALUES TO REACT.JS

Page 4: Om

OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH

CLOJURESCRIPT AND REACT

Page 5: Om

CONCLUSION: SIMPLICITY WINS

Page 6: Om
Page 7: Om

PERFORMANCE

Page 8: Om
Page 9: Om

UNDOTHE BIGGEST

DIFFERENTIATOR OF OM

Page 10: Om

WHO DOES NEED UNDO ON THE CLIENT-SIDE?

Page 11: Om
Page 12: Om

SHIFT TO THE WEB TECHNOLOGIES

Page 13: Om
Page 14: Om
Page 15: Om
Page 16: Om

UNDO MADE EASY

Page 17: Om
Page 18: Om

ClojureScript was a big enabler.— David Nolen, Creator of Om

Page 19: 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)))))

Page 20: Om

CLOJURESCRIPT ROCKS1. ClojureScript ecosystem

2. Macros3. Persistent data structures

Page 21: Om

1. CLOJURESCRIPT ECOSYSTEM

Page 22: Om

GOOD PARTS OF CLOJURESCRIPT▸ Clojure

▸ 3rd party libraries▸ Source Map

▸ Interop with JavaScript

Page 23: Om

2. MACROS

Page 24: Om

MACRO SAVES YOUR TIMECOMPILATION TIME META PROGRAMMING,

WHICH IS HARD IN JAVASCRIPT.▸ prismatic/om-tools

Page 25: Om

3. PERSISTENT DATA STRUCTURES

Page 26: Om
Page 27: Om
Page 28: Om
Page 29: Om

PERSISTENT DATA STRURCTURES ARE MEMORY EFFICIENT

Page 30: Om

GET UNDO NOW

Page 31: Om

WRAP-UPSIMPLICITY AND UNDO

Page 32: Om

THE END OF SLIDES; ANY QUESTION?

Page 33: Om

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: Om

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: Om

REFERENCES▸ Google Docs - https://docs.google.com/

▸ Atom - https://atom.io/▸ Git - http://git-scm.com/

Other pictures are distributed under © Taku Fukushima