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

1. OM
@TAKUFUKUSHIMA

3. OM ADDS MORE VALUES
TO REACT.JS

4. OM SWEET OM: (HIGH-)FUNCTIONAL
FRONTEND ENGINEERING WITH
CLOJURESCRIPT AND REACT

5. CONCLUSION:
SIMPLICITY WINS

7. PERFORMANCE

9. UNDO
THE BIGGEST
DIFFERENTIATOR OF OM

10. WHO DOES NEED UNDO
ON THE CLIENT-SIDE?

12. SHIFT TO THE WEB
TECHNOLOGIES

16. UNDO MADE
EASY

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

19. 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)))))

20. CLOJURESCRIPT ROCKS
1. ClojureScript ecosystem
2. Macros
3. Persistent data structures

21. 1. CLOJURESCRIPT
ECOSYSTEM

22. GOOD PARTS OF CLOJURESCRIPT
▸ Clojure
▸ 3rd party libraries
▸ Source Map
▸ Interop with JavaScript

23. 2. MACROS

24. MACRO SAVES YOUR TIME
COMPILATION TIME META PROGRAMMING,
WHICH IS HARD IN JAVASCRIPT.
▸ prismatic/om-tools

25. 3. PERSISTENT DATA
STRUCTURES

29. PERSISTENT DATA
STRURCTURES ARE
MEMORY EFFICIENT

30. GET UNDO
NOW

31. WRAP-UP
SIMPLICITY AND UNDO

32. THE END OF
SLIDES; ANY
QUESTION?

33. 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/

34. 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/

35. REFERENCES
▸ Google Docs - https://docs.google.com/
▸ Atom - https://atom.io/
▸ Git - http://git-scm.com/
Other pictures are distributed under © Taku Fukushima