SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
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?

Mais conteúdo relacionado

Mais procurados

Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
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
 
Angular vs React: Building modern SharePoint interfaces with SPFx
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
 
Interoperability of components built with different frameworks
Interoperability of components built with different frameworksInteroperability of components built with different frameworks
Interoperability of components built with different frameworksSouvik Basu
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react nativeModusJesus
 
JS Framework Comparison - An infographic
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographicInApp
 
Typescript 102 angular and type script
Typescript 102   angular and type scriptTypescript 102   angular and type script
Typescript 102 angular and type scriptBob German
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpackRich Snapp
 
End to-End SPA Development Using ASP.NET and AngularJS
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 AngularJSGil Fink
 
Get your mobile app in production in 3 months: DevOps and Infrastructure
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 InfrastructureAckee
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + Reactjustvamp
 
Angular from a Different Angle
Angular from a Different AngleAngular from a Different Angle
Angular from a Different AngleJeremy Likness
 
Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPodsCocoaHeads France
 

Mais procurados (20)

Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
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
 
Angular vs React: Building modern SharePoint interfaces with SPFx
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
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
From zero to hero with Docker
From zero to hero with DockerFrom zero to hero with Docker
From zero to hero with Docker
 
Interoperability of components built with different frameworks
Interoperability of components built with different frameworksInteroperability of components built with different frameworks
Interoperability of components built with different frameworks
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
What is new in ASP.NET Core
What is new in ASP.NET CoreWhat is new in ASP.NET Core
What is new in ASP.NET Core
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
JS Framework Comparison - An infographic
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographic
 
Typescript 102 angular and type script
Typescript 102   angular and type scriptTypescript 102   angular and type script
Typescript 102 angular and type script
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
 
End to-End SPA Development Using ASP.NET and AngularJS
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
 
Get your mobile app in production in 3 months: DevOps and Infrastructure
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
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + React
 
Frontend as a first class citizen
Frontend as a first class citizenFrontend as a first class citizen
Frontend as a first class citizen
 
Angular from a Different Angle
Angular from a Different AngleAngular from a Different Angle
Angular from a Different Angle
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
 
Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPods
 
Mean stack
Mean stackMean stack
Mean stack
 

Semelhante a Demand driven applications with om.next and react native

Microservice Websites – Micro CPH
Microservice Websites – Micro CPHMicroservice Websites – Micro CPH
Microservice Websites – Micro CPHGustaf Nilsson Kotte
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN StackRob Davarnia
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
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
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
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
 
TPSE Thailand 2015 - Rethinking Web with React and Flux
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
 
Advanced #6 clean architecture
Advanced #6  clean architectureAdvanced #6  clean architecture
Advanced #6 clean architectureVitali Pekelis
 
Having Fun Building Web Applications (Day 2 slides)
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 Ngoh
 
"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 "
"Service Worker: Let Your Web App Feel Like a Native "FDConf
 
API-first development
API-first developmentAPI-first development
API-first developmentVasco Veloso
 
Building a Sustainable Data Platform on AWS
Building a Sustainable Data Platform on AWSBuilding a Sustainable Data Platform on AWS
Building a Sustainable Data Platform on AWSSmartNews, Inc.
 
Building intranet applications with ASP.NET AJAX and jQuery
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 jQueryAlek Davis
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moiblemarkuskobler
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)Chiew Carol
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteorSapna Upreti
 
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...
The future of web development write once, run everywhere with angular js an...Mark Leusink
 
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 ...
The future of web development write once, run everywhere with angular.js and ...Mark Roden
 
Native REST Web Services with Oracle 11g
Native REST Web Services with Oracle 11gNative REST Web Services with Oracle 11g
Native REST Web Services with Oracle 11gMarcelo Ochoa
 
Marrying angular rails
Marrying angular railsMarrying angular rails
Marrying angular railsVolker Tietz
 

Semelhante a Demand driven applications with om.next and react native (20)

Microservice Websites – Micro CPH
Microservice Websites – Micro CPHMicroservice Websites – Micro CPH
Microservice Websites – Micro CPH
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
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
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
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
 
TPSE Thailand 2015 - Rethinking Web with React and Flux
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 Flux
 
Http and REST APIs.
Http and REST APIs.Http and REST APIs.
Http and REST APIs.
 
Advanced #6 clean architecture
Advanced #6  clean architectureAdvanced #6  clean architecture
Advanced #6 clean architecture
 
Having Fun Building Web Applications (Day 2 slides)
Having Fun Building Web Applications (Day 2 slides)Having Fun Building Web Applications (Day 2 slides)
Having Fun Building Web Applications (Day 2 slides)
 
"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 "
"Service Worker: Let Your Web App Feel Like a Native "
 
API-first development
API-first developmentAPI-first development
API-first development
 
Building a Sustainable Data Platform on AWS
Building a Sustainable Data Platform on AWSBuilding a Sustainable Data Platform on AWS
Building a Sustainable Data Platform on AWS
 
Building intranet applications with ASP.NET AJAX and jQuery
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
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
NodeJS @ ACS
NodeJS @ ACSNodeJS @ ACS
NodeJS @ ACS
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
 
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...
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 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 ...
The future of web development write once, run everywhere with angular.js and ...
 
Native REST Web Services with Oracle 11g
Native REST Web Services with Oracle 11gNative REST Web Services with Oracle 11g
Native REST Web Services with Oracle 11g
 
Marrying angular rails
Marrying angular railsMarrying angular rails
Marrying angular rails
 

Último

IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxSAJITHABANUS
 
solar wireless electric vechicle charging system
solar wireless electric vechicle charging systemsolar wireless electric vechicle charging system
solar wireless electric vechicle charging systemgokuldongala
 
Basic Principle of Electrochemical Sensor
Basic Principle of  Electrochemical SensorBasic Principle of  Electrochemical Sensor
Basic Principle of Electrochemical SensorTanvir Moin
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Bahzad5
 
Technical Management of cement industry.pdf
Technical Management of cement industry.pdfTechnical Management of cement industry.pdf
Technical Management of cement industry.pdfMadan Karki
 
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratoryدليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide LaboratoryBahzad5
 
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...amrabdallah9
 
Tachyon 100G PCB Performance Attributes and Applications
Tachyon 100G PCB Performance Attributes and ApplicationsTachyon 100G PCB Performance Attributes and Applications
Tachyon 100G PCB Performance Attributes and ApplicationsEpec Engineered Technologies
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptxMUKULKUMAR210
 
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxVertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxLMW Machine Tool Division
 
CSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptxCSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptxssusera0771e
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchrohitcse52
 
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxUNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxrealme6igamerr
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid BodyAhmadHajasad2
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxKISHAN KUMAR
 
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Amil baba
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....santhyamuthu1
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfNaveenVerma126
 

Último (20)

IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
 
solar wireless electric vechicle charging system
solar wireless electric vechicle charging systemsolar wireless electric vechicle charging system
solar wireless electric vechicle charging system
 
Basic Principle of Electrochemical Sensor
Basic Principle of  Electrochemical SensorBasic Principle of  Electrochemical Sensor
Basic Principle of Electrochemical Sensor
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)
 
Technical Management of cement industry.pdf
Technical Management of cement industry.pdfTechnical Management of cement industry.pdf
Technical Management of cement industry.pdf
 
Présentation IIRB 2024 Chloe Dufrane.pdf
Présentation IIRB 2024 Chloe Dufrane.pdfPrésentation IIRB 2024 Chloe Dufrane.pdf
Présentation IIRB 2024 Chloe Dufrane.pdf
 
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratoryدليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
 
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
 
Tachyon 100G PCB Performance Attributes and Applications
Tachyon 100G PCB Performance Attributes and ApplicationsTachyon 100G PCB Performance Attributes and Applications
Tachyon 100G PCB Performance Attributes and Applications
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptx
 
計劃趕得上變化
計劃趕得上變化計劃趕得上變化
計劃趕得上變化
 
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxVertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
 
CSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptxCSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptx
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
 
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxUNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptx
 
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
 

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

Notas do Editor

  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