SlideShare a Scribd company logo
Demand-driven architecture
Problems of the current
architecture
= REST?
Let’s do some REST!
Let’s build an app
- post things
- comment on things
- … profit?
Posts
Users
Comments
Let’s build an app
Let’s build an app
Problems?
- unnecessary complex ajax orchestration
- edge cases
- many points of failure
- a lot of data to download
- one part always waits for the other
Let’s build an app
Let’s build an app
Problems?
- duplication of data
- maintenance
- cascading changes through the entire app
- one part always waits for the other
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!
om
Disclaimer
- Examples are in clojure
“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)))))
“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)))))
“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)))))
“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))))))
DEMO
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
Talks
- “om next” by David Nolen
- “Why Falcor?” by Jafar Husain
- “Relay: An application framework for React” by Josep Savona
Questions?

More Related Content

PDF
Introduction to React Native
PDF
Tech Talk on ReactJS
PPTX
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
PPTX
Super tools to boost productivity in React dev env!
PPTX
Building great spa’s with angular js, asp.net mvc and webapi
PPTX
PPTX
Advanced AngularJS Tips and Tricks
PPTX
Latest Javascript MVC & Front End Frameworks 2017
Introduction to React Native
Tech Talk on ReactJS
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Super tools to boost productivity in React dev env!
Building great spa’s with angular js, asp.net mvc and webapi
Advanced AngularJS Tips and Tricks
Latest Javascript MVC & Front End Frameworks 2017

What's hot (20)

PPTX
Single Page Application (SPA) using AngularJS
PPTX
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
PPTX
Angular vs React: Building modern SharePoint interfaces with SPFx
PPT
Top java script frameworks ppt
PPTX
From zero to hero with Docker
PPTX
Interoperability of components built with different frameworks
PDF
From MEAN to the MERN Stack
PPTX
What is new in ASP.NET Core
PDF
Intro to react native
PDF
JS Framework Comparison - An infographic
PPTX
Typescript 102 angular and type script
PPTX
Lazy angular w/ webpack
PDF
End to-End SPA Development Using ASP.NET and AngularJS
PDF
Get your mobile app in production in 3 months: DevOps and Infrastructure
PDF
AngularJS + React
PDF
Frontend as a first class citizen
PPTX
Angular from a Different Angle
PPTX
Angular js workshop
PDF
Build a lego app with CocoaPods
Single Page Application (SPA) using AngularJS
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
Angular vs React: Building modern SharePoint interfaces with SPFx
Top java script frameworks ppt
From zero to hero with Docker
Interoperability of components built with different frameworks
From MEAN to the MERN Stack
What is new in ASP.NET Core
Intro to react native
JS Framework Comparison - An infographic
Typescript 102 angular and type script
Lazy angular w/ webpack
End to-End SPA Development Using ASP.NET and AngularJS
Get your mobile app in production in 3 months: DevOps and Infrastructure
AngularJS + React
Frontend as a first class citizen
Angular from a Different Angle
Angular js workshop
Build a lego app with CocoaPods
Ad

Similar to Demand driven applications with om.next and react native (20)

PPTX
Demand driven Applications with GraphQL
PDF
Nick Raienko ''Service-oriented GraphQL''
PDF
Apollo server II
PDF
NGRX Apps in Depth
PDF
Node frameworks talk_hackerdojo
PDF
"#Microfrontends #LowConnectivity #AsianMarket", Maxim Demidenko
PDF
Architecture of scalable and resilient apps with GraphQL, Amazon RDS and AWS ...
PDF
GraphQL: The Missing Link Between Frontend and Backend Devs
PPTX
Operational API design anti-patterns (Jason Harmon)
PDF
Are you ready to adopt GraphQL?
PDF
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
PDF
OutSystsems User Group Netherlands September 2024.pdf
PPTX
Building a Reactive RESTful API with Akka Http & Slick
PDF
Turning the web stack upside down rethinking how data flows through systems
PPTX
Scaling GraphQL Subscriptions
PPTX
Designing API: REST | gRPC | GraphQL, which one should you pick? - Cedrick Lu...
PDF
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
PDF
Reactive Java Robotics and IoT 2016
PPTX
Relay: Seamless Syncing for React (VanJS)
PPTX
Over view of software artitecture
Demand driven Applications with GraphQL
Nick Raienko ''Service-oriented GraphQL''
Apollo server II
NGRX Apps in Depth
Node frameworks talk_hackerdojo
"#Microfrontends #LowConnectivity #AsianMarket", Maxim Demidenko
Architecture of scalable and resilient apps with GraphQL, Amazon RDS and AWS ...
GraphQL: The Missing Link Between Frontend and Backend Devs
Operational API design anti-patterns (Jason Harmon)
Are you ready to adopt GraphQL?
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
OutSystsems User Group Netherlands September 2024.pdf
Building a Reactive RESTful API with Akka Http & Slick
Turning the web stack upside down rethinking how data flows through systems
Scaling GraphQL Subscriptions
Designing API: REST | gRPC | GraphQL, which one should you pick? - Cedrick Lu...
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
Reactive Java Robotics and IoT 2016
Relay: Seamless Syncing for React (VanJS)
Over view of software artitecture
Ad

Recently uploaded (20)

PPTX
OOP with Java - Java Introduction (Basics)
PDF
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
PPTX
web development for engineering and engineering
PDF
Structs to JSON How Go Powers REST APIs.pdf
PPTX
Geodesy 1.pptx...............................................
PPTX
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
PPTX
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
PPTX
CH1 Production IntroductoryConcepts.pptx
PDF
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PDF
Embodied AI: Ushering in the Next Era of Intelligent Systems
PDF
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
PDF
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
PDF
Well-logging-methods_new................
PPTX
Welding lecture in detail for understanding
PPTX
Lesson 3_Tessellation.pptx finite Mathematics
PPTX
additive manufacturing of ss316l using mig welding
PPTX
KTU 2019 -S7-MCN 401 MODULE 2-VINAY.pptx
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
OOP with Java - Java Introduction (Basics)
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
web development for engineering and engineering
Structs to JSON How Go Powers REST APIs.pdf
Geodesy 1.pptx...............................................
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
CH1 Production IntroductoryConcepts.pptx
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
Embodied AI: Ushering in the Next Era of Intelligent Systems
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Well-logging-methods_new................
Welding lecture in detail for understanding
Lesson 3_Tessellation.pptx finite Mathematics
additive manufacturing of ss316l using mig welding
KTU 2019 -S7-MCN 401 MODULE 2-VINAY.pptx
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT

Demand driven applications with om.next and react native

  • 2. Problems of the current architecture
  • 5. Let’s build an app - post things - comment on things - … profit? Posts Users Comments
  • 8. Problems? - unnecessary complex ajax orchestration - edge cases - many points of failure - a lot of data to download - one part always waits for the other
  • 11. Problems? - duplication of data - maintenance - cascading changes through the entire app - one part always waits for the other
  • 12. 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!
  • 13. om
  • 15. “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)))))
  • 16. “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)))))
  • 17. “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)))))
  • 18. “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))))))
  • 19. DEMO
  • 20. 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
  • 21. Talks - “om next” by David Nolen - “Why Falcor?” by Jafar Husain - “Relay: An application framework for React” by Josep Savona

Editor's Notes

  • #2: Todays topic: Demand driven applications Anyone experience with it? Tries to solve specific problem Before going into details, let’s talk about the problems of the current architecture
  • #3: “current” usually means “server client architecture” endpoint for user, endpoint for timeline, endpoint for list entries client consumes that data how to summarize? most people use REST
  • #4: Why? REST Worked great so far! Works when the app is small scale Works when you distribute big chunks of data to external Problem is, we want small chunks of data and a lot Structure data in small blocks Think of it as a relational database to actually show what I mean, let’s do some REST
  • #5: to actually show what I mean, let’s do some REST
  • #6: “DaveBook” we can post things, comment on things, and somehow make money deconstruct: posts, users, comments design as endpoints
  • #7: start with a timeline. Contains posts or reference to post post belongs to users. Could put username inside /posts/ post can have comments since comments are made by users, needs users too everything well designed because speed, let’s do ajax
  • #8: start with a loading indicator timeline data comes back, show loading indicator for each post or data suddenly request 4 is faster than request 2 at some point all data is present edge cases: what if user looses connection in between what if post 3 gets an error what if some of our comments didn’t load
  • #9: big amount of ajax coordination care about all these edge cases. One error = don’t load anything? many points of failure data is verbose and needs to get downloaded new feature requires server guys, or feature already there and not used we need new solution…
  • #10: design endpoints around app merge all data into 1 big endpoint. Contains everything we need same thing for /search/ let’s look how this will do
  • #11: start with loading indicator since we don’t break data into pieces, we have to wait and wait at some point: hey, there’s an app!
  • #12: a lot of endpoints, a lot of duplicated data high maintenance one change requires all endpoints that contain the data to change new feature requires server guys, or feature already there and not used
  • #13: reduce endpoints to a minimum with little maintenance let the client decide what data it wants downgrade server: instead of pre-providing, If client wants only username, it gets it netflix and facebook came independently to same solution relay: react components query graph same way server did falcor does same thing another solution: om
  • #14: brings me to om clojurescript wrapper for react react can go native, so can om hybrid solution between falcor and GraphQL. Unified best practices
  • #15: for people never used lisp vector = list map = map / dictionary
  • #16: generates react class uses username and content doesn’t care where the data comes from describe data as query fragments. want content and user, but only username static method! Meaning we can call without instance because many posts, need identification another static method that is used to identify doesn’t make sense without timline
  • #17: generates react class uses username and content doesn’t care where the data comes from describe data as query fragments. want content and user, but only username static method! Meaning we can call without instance because many posts, need identification another static method that is used to identify doesn’t make sense without timline
  • #18: generates react class uses username and content doesn’t care where the data comes from describe data as query fragments. want content and user, but only username static method! Meaning we can call without instance because many posts, need identification another static method that is used to identify doesn’t make sense without timline
  • #19: queries static method in Post filter this list :app/posts with this query. Give me all posts but only these fields map post list into post object and put it into view
  • #21: no updates, no new endpoints, one parser should be sufficient only get what we want and nothing else. Focus on working on a component no ajax coordination. Either data is here or not. Reactive approach updates components when data is there. focus on client re-use components anywhere, just plug in and data will get fetched still alpha but usable today clojurescript is awesome