Om

download Om

of 35

  • date post

    19-Aug-2014
  • Category

    Engineering

  • view

    3.315
  • download

    0

Embed Size (px)

description

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

Transcript of Om

  • OM @TAKUFUKUSHIMA
  • OM ADDS MORE VALUES TO REACT.JS
  • OM SWEET OM: (HIGH-)FUNCTIONAL FRONTEND ENGINEERING WITH CLOJURESCRIPT AND REACT
  • CONCLUSION: SIMPLICITY WINS
  • PERFORMANCE
  • UNDO THE 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 ROCKS 1. ClojureScript ecosystem 2. Macros 3. Persistent data structures
  • 1. CLOJURESCRIPT ECOSYSTEM
  • GOOD PARTS OF CLOJURESCRIPT Clojure 3rd party libraries Source Map Interop with JavaScript
  • 2. MACROS
  • MACRO SAVES YOUR TIME COMPILATION 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-UP SIMPLICITY 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