demand driven applications with om.next and react native

22
Demand-driven architecture

Upload: dvcrn

Post on 12-Apr-2017

1.104 views

Category:

Engineering


2 download

TRANSCRIPT

Page 1: Demand driven applications with om.next and react native

Demand-driven architecture

Page 2: Demand driven applications with om.next and react native

Problems of the current architecture

Page 3: Demand driven applications with om.next and react native

= REST?

Page 4: Demand driven applications with om.next and react native

Let’s do some REST!

Page 5: Demand driven applications with om.next and react native

Let’s build an app

- post things

- comment on things

- … profit?

Posts

Users

Comments

Page 6: Demand driven applications with om.next and react native

Let’s build an app

Page 7: Demand driven applications with om.next and react native

Let’s build an app

Page 8: Demand driven applications with om.next and react native

Problems?

- unnecessary complex ajax orchestration

- edge cases

- many points of failure

- a lot of data to download

- one part always waits for the other

Page 9: Demand driven applications with om.next and react native

Let’s build an app

Page 10: Demand driven applications with om.next and react native

Let’s build an app

Page 11: Demand driven applications with om.next and react native

Problems?

- duplication of data

- maintenance

- cascading changes through the entire app

- one part always waits for the other

Page 12: Demand driven applications with om.next and react native

The solution

- Stop endpoint overload

- Shift ownership over data to client

- Server returns exactly what the client needs

- Exactly what netflix and facebook independently did!

Page 13: Demand driven applications with om.next and react native

om

Page 14: Demand driven applications with om.next and react native

Disclaimer

- Examples are in clojure

Page 15: Demand driven applications with om.next and react native

“Client describes data it needs”

(defui Post Object (render [this] (view nil (text nil (get (om/props this) :username)) (text nil (get (om/props this) :content)))))

Page 16: Demand driven applications with om.next and react native

“Client describes data it needs”

(defui Post static om/IQuery (query [this] '[{:user [:username]} :content]) Object (render [this] (view nil (text nil (get (get (om/props this) :user) :username)) (text nil (get (om/props this) :content)))))

Page 17: Demand driven applications with om.next and react native

“Client describes data it needs”

(defui Post static om/Ident (ident [this {:keys [id]}] [:post/by-id id]) static om/IQuery (query [this] '[{:user [:username]} :content :id]) Object (render [this] (view nil (text nil (get (get (om/props this) :user) :username)) (text nil (get (om/props this) :content)))))

Page 18: Demand driven applications with om.next and react native

“Client describes data it needs”

(defui TimelineComponent static om/IQuery (query [this] (let [subquery (om/get-query Post)] `[{:app/posts ~subquery}])) Object (render [this] (let [{:keys [app/posts]} (om/props this)] (view nil (apply view nil (map post posts))))))

Page 19: Demand driven applications with om.next and react native

DEMO

Page 20: Demand driven applications with om.next and react native

Advantages?

- server API doesn’t need updates

- downloaded data is as small as possible

- no ajax coordination

- focus is on client and components

- component re-usability

- usable today

- (clojurescript)

Page 21: Demand driven applications with om.next and react native

Talks

- “om next” by David Nolen

- “Why Falcor?” by Jafar Husain

- “Relay: An application framework for React” by Josep Savona

Page 22: Demand driven applications with om.next and react native

Questions?