Demand driven applications with om.next and react native

D
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?
1 of 22

Recommended

Introduction to React Native by
Introduction to React NativeIntroduction to React Native
Introduction to React Nativedvcrn
514 views12 slides
Tech Talk on ReactJS by
Tech Talk on ReactJSTech Talk on ReactJS
Tech Talk on ReactJSAtlogys Technical Consulting
917 views18 slides
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone by
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneDeepu S Nath
45.7K views54 slides
Super tools to boost productivity in React dev env! by
Super tools to boost productivity in React dev env!Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!Souvik Basu
296 views38 slides
Building great spa’s with angular js, asp.net mvc and webapi by
Building great spa’s with angular js, asp.net mvc and webapiBuilding great spa’s with angular js, asp.net mvc and webapi
Building great spa’s with angular js, asp.net mvc and webapiMaurice De Beijer [MVP]
7.3K views18 slides
Node.js by
Node.jsNode.js
Node.jsDhananjay Kumar
2.4K views20 slides

More Related Content

What's hot

Single Page Application (SPA) using AngularJS by
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
29.8K views19 slides
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University by
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversityASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversitySyed Shanu
678 views28 slides
Angular vs React: Building modern SharePoint interfaces with SPFx by
Angular vs React: Building modern SharePoint interfaces with SPFxAngular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFxDimcho Tsanov
1.4K views26 slides
Top java script frameworks ppt by
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks pptOmkarsoft Bangalore
2.3K views22 slides
From zero to hero with Docker by
From zero to hero with DockerFrom zero to hero with Docker
From zero to hero with DockerMaurice De Beijer [MVP]
401 views40 slides
Interoperability of components built with different frameworks by
Interoperability of components built with different frameworksInteroperability of components built with different frameworks
Interoperability of components built with different frameworksSouvik Basu
86 views12 slides

What's hot(20)

Single Page Application (SPA) using AngularJS by M R Rony
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony29.8K views
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University by Syed Shanu
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversityASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
Syed Shanu678 views
Angular vs React: Building modern SharePoint interfaces with SPFx by Dimcho Tsanov
Angular vs React: Building modern SharePoint interfaces with SPFxAngular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
Dimcho Tsanov1.4K views
Interoperability of components built with different frameworks by Souvik Basu
Interoperability of components built with different frameworksInteroperability of components built with different frameworks
Interoperability of components built with different frameworks
Souvik Basu86 views
From MEAN to the MERN Stack by Troy Miles
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
Troy Miles2.2K views
Intro to react native by ModusJesus
Intro to react nativeIntro to react native
Intro to react native
ModusJesus11.4K views
JS Framework Comparison - An infographic by InApp
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographic
InApp1.6K views
Typescript 102 angular and type script by Bob German
Typescript 102   angular and type scriptTypescript 102   angular and type script
Typescript 102 angular and type script
Bob German3.2K views
Lazy angular w/ webpack by Rich Snapp
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
Rich Snapp5.2K views
End to-End SPA Development Using ASP.NET and AngularJS by Gil Fink
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJS
Gil Fink2.9K views
Get your mobile app in production in 3 months: DevOps and Infrastructure by Ackee
Get your mobile app in production in 3 months: DevOps and InfrastructureGet your mobile app in production in 3 months: DevOps and Infrastructure
Get your mobile app in production in 3 months: DevOps and Infrastructure
Ackee1.6K views
AngularJS + React by justvamp
AngularJS + ReactAngularJS + React
AngularJS + React
justvamp1.5K views
Angular from a Different Angle by Jeremy Likness
Angular from a Different AngleAngular from a Different Angle
Angular from a Different Angle
Jeremy Likness14.5K views

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

Microservice Websites – Micro CPH by
Microservice Websites – Micro CPHMicroservice Websites – Micro CPH
Microservice Websites – Micro CPHGustaf Nilsson Kotte
575 views40 slides
Beginning MEAN Stack by
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN StackRob Davarnia
1.5K views141 slides
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway by
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayAll Things Open
4K views38 slides
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway by
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayPOSSCON
320 views38 slides
TPSE Thailand 2015 - Rethinking Web with React and Flux by
TPSE Thailand 2015 - Rethinking Web with React and FluxTPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and FluxJirat Kijlerdpornpailoj
769 views96 slides
Http and REST APIs. by
Http and REST APIs.Http and REST APIs.
Http and REST APIs.Rahul Tanwani
690 views17 slides

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

Beginning MEAN Stack by Rob Davarnia
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia1.5K views
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway by All Things Open
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
All Things Open4K views
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway by POSSCON
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
POSSCON320 views
Advanced #6 clean architecture by Vitali Pekelis
Advanced #6  clean architectureAdvanced #6  clean architecture
Advanced #6 clean architecture
Vitali Pekelis242 views
Having Fun Building Web Applications (Day 2 slides) by Clarence Ngoh
Having Fun Building Web Applications (Day 2 slides)Having Fun Building Web Applications (Day 2 slides)
Having Fun Building Web Applications (Day 2 slides)
Clarence Ngoh59 views
"Service Worker: Let Your Web App Feel Like a Native " by FDConf
"Service Worker: Let Your Web App Feel Like a Native ""Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native "
FDConf8.7K views
API-first development by Vasco Veloso
API-first developmentAPI-first development
API-first development
Vasco Veloso164 views
Building a Sustainable Data Platform on AWS by SmartNews, Inc.
Building a Sustainable Data Platform on AWSBuilding a Sustainable Data Platform on AWS
Building a Sustainable Data Platform on AWS
SmartNews, Inc.19.3K views
Building intranet applications with ASP.NET AJAX and jQuery by Alek Davis
Building intranet applications with ASP.NET AJAX and jQueryBuilding intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
Alek Davis1K views
Get Ahead with HTML5 on Moible by markuskobler
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
markuskobler442 views
React Native +Redux + ES6 (Updated) by Chiew Carol
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
Chiew Carol694 views
Reactive application using meteor by Sapna Upreti
Reactive application using meteorReactive application using meteor
Reactive application using meteor
Sapna Upreti278 views
The future of web development write once, run everywhere with angular js an... by Mark Leusink
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink8.1K views
The future of web development write once, run everywhere with angular.js and ... by Mark Roden
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
Mark Roden8.6K views
Native REST Web Services with Oracle 11g by Marcelo Ochoa
Native REST Web Services with Oracle 11gNative REST Web Services with Oracle 11g
Native REST Web Services with Oracle 11g
Marcelo Ochoa3.4K views
Marrying angular rails by Volker Tietz
Marrying angular railsMarrying angular rails
Marrying angular rails
Volker Tietz380 views

Recently uploaded

SWM L15-L28_drhasan (Part 2).pdf by
SWM L15-L28_drhasan (Part 2).pdfSWM L15-L28_drhasan (Part 2).pdf
SWM L15-L28_drhasan (Part 2).pdfMahmudHasan747870
28 views93 slides
Solar PV by
Solar PVSolar PV
Solar PVIwiss Tools Co.,Ltd
12 views4 slides
SEMI CONDUCTORS by
SEMI CONDUCTORSSEMI CONDUCTORS
SEMI CONDUCTORSpavaniaalla2005
19 views8 slides
Machine Element II Course outline.pdf by
Machine Element II Course outline.pdfMachine Element II Course outline.pdf
Machine Element II Course outline.pdfodatadese1
6 views2 slides
Electronic Devices - Integrated Circuit.pdf by
Electronic Devices - Integrated Circuit.pdfElectronic Devices - Integrated Circuit.pdf
Electronic Devices - Integrated Circuit.pdfbooksarpita
11 views46 slides
Multi-objective distributed generation integration in radial distribution sy... by
Multi-objective distributed generation integration in radial  distribution sy...Multi-objective distributed generation integration in radial  distribution sy...
Multi-objective distributed generation integration in radial distribution sy...IJECEIAES
15 views14 slides

Recently uploaded(20)

Machine Element II Course outline.pdf by odatadese1
Machine Element II Course outline.pdfMachine Element II Course outline.pdf
Machine Element II Course outline.pdf
odatadese16 views
Electronic Devices - Integrated Circuit.pdf by booksarpita
Electronic Devices - Integrated Circuit.pdfElectronic Devices - Integrated Circuit.pdf
Electronic Devices - Integrated Circuit.pdf
booksarpita11 views
Multi-objective distributed generation integration in radial distribution sy... by IJECEIAES
Multi-objective distributed generation integration in radial  distribution sy...Multi-objective distributed generation integration in radial  distribution sy...
Multi-objective distributed generation integration in radial distribution sy...
IJECEIAES15 views
MSA Website Slideshow (16).pdf by msaucla
MSA Website Slideshow (16).pdfMSA Website Slideshow (16).pdf
MSA Website Slideshow (16).pdf
msaucla39 views
Art of Writing Research article slide share.pptx by sureshc91
Art of Writing Research article slide share.pptxArt of Writing Research article slide share.pptx
Art of Writing Research article slide share.pptx
sureshc9114 views
NEW SUPPLIERS SUPPLIES (copie).pdf by georgesradjou
NEW SUPPLIERS SUPPLIES (copie).pdfNEW SUPPLIERS SUPPLIES (copie).pdf
NEW SUPPLIERS SUPPLIES (copie).pdf
georgesradjou7 views
What is Whirling Hygrometer.pdf by IIT KHARAGPUR
What is Whirling Hygrometer.pdfWhat is Whirling Hygrometer.pdf
What is Whirling Hygrometer.pdf
IIT KHARAGPUR 11 views
Dynamics of Hard-Magnetic Soft Materials by Shivendra Nandan
Dynamics of Hard-Magnetic Soft MaterialsDynamics of Hard-Magnetic Soft Materials
Dynamics of Hard-Magnetic Soft Materials
Shivendra Nandan13 views
9_DVD_Dynamic_logic_circuits.pdf by Usha Mehta
9_DVD_Dynamic_logic_circuits.pdf9_DVD_Dynamic_logic_circuits.pdf
9_DVD_Dynamic_logic_circuits.pdf
Usha Mehta21 views
performance uploading.pptx by SanthiS10
performance uploading.pptxperformance uploading.pptx
performance uploading.pptx
SanthiS107 views
2_DVD_ASIC_Design_FLow.pdf by Usha Mehta
2_DVD_ASIC_Design_FLow.pdf2_DVD_ASIC_Design_FLow.pdf
2_DVD_ASIC_Design_FLow.pdf
Usha Mehta14 views

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

  1. 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
  2. “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
  3. 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
  4. to actually show what I mean, let’s do some REST
  5. “DaveBook” we can post things, comment on things, and somehow make money deconstruct: posts, users, comments design as endpoints
  6. 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
  7. 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
  8. 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…
  9. 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
  10. 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!
  11. 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
  12. 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
  13. brings me to om clojurescript wrapper for react react can go native, so can om hybrid solution between falcor and GraphQL. Unified best practices
  14. for people never used lisp vector = list map = map / dictionary
  15. 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
  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. 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
  19. 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