[ES] Introducción a om.next - Clojure User Group Buenos Aires

Slides de la charla "introducción a om.next" presentada en el meetup de Clojure User Group Buenos Aires el 25/11/2015

Transcript

1. Introducción a om.next Clojure User Group Buenos Aires 25/11/2015 por Nicolás Berger
2. Por qué om.next Fuente: Om Next - David Nolen - Clojure/Conj 2015
3. Por qué om.next Fuente: Om Next - David Nolen - Clojure/Conj 2015
4. No es suficiente Multiples clientes (browser, mobile, watch, apps) Comunicacion cliente-servidor ad-hoc (out-of- band information) React se complica cuando la UI es un grafo, no un tree (flux, redux)
5. Modelo simple Single atom app state No asincronico (excepto en la frontera) Sin modelo de eventos visible (excepto en la frontera)
6. Objetivos Forma simple de hacer lecturas no triviales Forma simple de comunicar novedades no triviales
7. Como hacemos requests precisos? Como el server responde a requests precisos? Como el cliente comunica novedades precisas? Como el server comunica identidad para novedades no triviales Integrar novedades en el cliente?
8. Optimistic updates? Testing? Recursive UIs? Caching? Custom client storage? Custom server storage?
9. Vamos por partes Query & identity Components Parsing & mutation Normalization Reconciler
10. Query Expressions Fragmentos de query co-located en UI Query completo -> single request (defui Person static om/IQuery (query [this] `[:ui/checked :db/id :person/name {:person/mate ...}]) ...)
11. Components (defui Person static om/Ident (ident [this {:keys [name]}]) static om/IQuery (query [this] `[:name :points]) Object (render [this] ...)) (defui PeopleList static om/IQuery (query [_] `[{:people/list ~(om/get-query Person)}]) Object (render [this]
12. Query Expressions Parameterized Joins Unions (heterogeneous data) Recursive
13. Parsing Evaluacion del query QueryExpr -> EdnValue (for the UI) (defn read :some-key [env key params] {:value cached-value-from-env :server-1 query-fragment})
14. Normalization (def init-data {:list/one [{:name "John" :points 0} {:name "Mary" :points 0} {:name "Bob" :points 1}] :list/two [{:name "Mary" :points 0 :age 27} {:name "Gwen" :points 0} {:name "Jeff" :points 0}]})
15. Normalization {:list/one [[:person/by-name "John"] [:person/by-name "Mary"] [:person/by-name "Bob"]], :list/two [[:person/by-name "Mary"] [:person/by-name "Gwen"] [:person/by-name "Jeff"]], :person/by-name {"John" {:name "John", :points 0}, "Mary" {:name "Mary", :points 0, :age 27}, "Bob" {:name "Bob", :points 0}, "Gwen" {:name "Gwen", :points 0},
16. Reconciler Cambios en app state -> views Transact new data into app state Initial loading for whole app
17. Reconciler
18. Remote integration Multiple remotes read responsable de fragmentar query entre local y remotes send fn para cada remote HTTP caching: read debe separar query en :dynamic y :static
19. Testing https://github.com/omcljs/om/wiki/Applying-Property-Based-Testing-to-User- Interfaces (gen/sample gen-tx-add-remove 10) ;; ([] ;; [(friend/add {:id 1, :friend 1}) (friend/remove {:id 1, :friend 2})] ;; [(friend/add {:id 0, :friend 0}) (friend/remove {:id 0, :friend 1}) ;; (friend/add {:id 0, :friend 1})] (defn prop-no-self-friending [] (prop/for-all [tx gen-tx-add-remove] (let [parser (om/parser {:read read :mutate mutate}) state (atom (om/tree->db People init-data true))] (parser {:state state} tx)
20. Demo time!
21. Referencias https://github.com/omcljs/om/wiki/Quick-Start-(om.next) https://www.youtube.com/watch?v=MDZpSIngwm4 http://www.martinklepsch.org/posts/om-next-reading-list.html https://medium.com/@kovasb/om-next-the-reconciler-af26f02a6fb4 https://www.thoughtworks.com/radar/techniques/bff-backend-for-frontends
22. Gracias! Preguntas? github.com/nberger twitter.com/nicoberger