SlideShare a Scribd company logo
Understanding
HTML5
Data Services
Thomas Burleson
Mindspace, LLC
www.linkedin.com/in/ThomasBurleson
www.gridlinked.info
with
sample code
July, 2013
Sunday, July 7, 13
Server
Tier
Java
ColdFusion
PHP
ASP
Middle
Tier
HTML5
Client
Tier
Understanding
HTML5 DataServices
HTML5 Single-Page-Applications (SPA) are thin-client applications that exchange data with remote data services (RDS).
RDS endpoints may connect directly to a Server-Tier having `enterprise-wide` APIs
Often RDS endpoints connect to Middle-Tier, cloud-based services called Web Services
HTTP WebServices most often marshall data as JSON or XML
Sunday, July 7, 13
Using
Middle-Tier Web Services
InventoryHTML5
Client
Tier
Authentication
Sessions
Users
Billing
Authentication
Users
Accounts
Orders
Middle
Tier
Web Services work as facades to server-tier `complexity`
Web Services are best used when implemented for specific client UX needs
Web Services hide server-tier complexities/dependencies from client-tier needs
Middle-tier (Web Services) are not required… but often optimize persistence, data access, data caching, and
even aggregate functionality for thin-client applications.
Sunday, July 7, 13
Using
Client-Tier Delegates
Inventory
Authentication
Sessions
Users
Billing
Authentication
Users
Accounts
Orders
Web
Services
Client
Tier
HTML5
SPA
Auth
Users
Delegates
Delegates APIs often match the Web Services APIs
Delegates are used to proxy `controller` requests to remote WebServices
Delegates are responsible for serializing, deserializing, and transforming data
Delegates manage request/response pairs to/from WebServices respectively.
Sunday, July 7, 13
Client-Tier
Architecture Layers
Authentication
Users
Middle
Tier
Client-Tier
HTML5 or Flash SPA
Auth
Users
Delegates
Views
Controllers
Models
Models, Views, Controllers, Delegates
Best Practices:
Only Controllers interact with Delegates
Delegates are `proxies` to remote APIs
Delegates are ASYNCHRONOUS
Delegates should use Promises (or equivalents)
Sunday, July 7, 13
Authenticati
on
Users
Middle
Tier
Client-Tier
HTML5 or Flash SPA
Auth
Users
Delegates
Views
Web Services
Layer
Data Services
Layer
Client-Tier
Architecture Layers
Sunday, July 7, 13
Implementation
What are Delegates?
Could be as simple as a generic Javascript object.
For example, consider an Authentication delegate with only three (3)
public functions.
Promises are the recommend solution in order to support the
asynchronous nature of remote WebService calls.
It is important to note that all Delegate public functions return Promises; since all public
functions are async and will respond with real data response(s) at a future point in time
Delegates are objects with public functions.
Delegates are `proxies` to remote Web Services.
Delegates are client-side Data Services.
Sunday, July 7, 13
(1) What are the public functions available
(2) What are the arguments for each function
(3) What are the data structures in the WebService responses
(4) What are the errors possible from each function call
Application Programming Interfaces (API) simply clarify:
Implementation
What are Delegate API(s)?
Sunday, July 7, 13
Implementation
What are Delegate API(s)?
Consumers of the AuthDelegate API can use:
login( )
logout( )
loadPrivileges( )
(1) functions =
login( userName, password )(2) arguments =
login( ) -> { sessionID : <String> }
logout( ) -> true | false
loadPrivileges( ) -> { level : <int> }
(3) responses =
The API is now more easily understood.
Sunday, July 7, 13
Implementation
How are Delegates used?
Call Delegate API
Call Delegate API
Controllers use delegates and
attach .then() handlers for responses.
Note that the controller has no
knowledge of how the login() or
logout() methods actually work… so
this delegate reference could be either
a real service or a mock service!
Sunday, July 7, 13
Implementation
How are Delegates used? (cont.)
Call Delegate API
Using Delegate API ResponsesInjected `session` model
Controllers use delegates and attach
handlers for responses.
Notice that the LoginController has no
knowledge of `how` the login() or
logout() methods actually work…
This means that authDelegate could be
an instance of real service or a mock
service; since both have the same API!
Sunday, July 7, 13
Implementation
How to build a Delegate ?
Use generic Javascript object to outline the API
Sunday, July 7, 13
Implementation
How to build a Delegate ?
Use Module Pattern and AngularJS to define authDelegate instance.
NOTE: the authDelegate can then be injected into Controllers.
Sunday, July 7, 13
Implementation
How to build a Mock Delegate?
Step 3: Implement API methods with asynchronous, mock responses
inline data construction
Delay response
Publish API
Here we used $timeout with a 2-sec
delay; to simulate an asynchronous
response.
Notice that we did not load any
external mock data… instead we
generated inline the data structures
expected in the responses.
Sunday, July 7, 13
Implementation
Mock Delegate using External Data?
Implement API method internally using AngularJS $http to load external mock data;
captured in the /data/login.json file.
Load external mock data
extract data structures
Here $http.get() also returns a
Promise.
Our AuthDelegate .then()
handler intercepts that response
and extracts the desired data
structures…
This occurs before the
LoginController .then() handler
is notified.
Sunday, July 7, 13
Implementation
Building a DataServices Library
How does your architecture scale if you have 2..n Delegates?
How do you separate Delegate factory/service definitions from your main application (AuthenticationDemo is shown below )?
Note: Each delegate constructor function has been collapsed. Expanded
you can imagine that the above approach gets `messy` VERY
quickly...
Question:
Sunday, July 7, 13
Implementation
Building a DataServices Library
1) Define all your data services in a separate JS file.
2) Register your data services within a custom, data-service module.
3) Register your module/library as a dependent module for your main App
4) Inject Delegate instances into your Controllers
Answer:
MyAppDataServices.js
DemoApp.js
Sunday, July 7, 13
Implementation
How to package a DataServices Library
AllDelegates.js
Build packages
Publish...
- Outside of AngularJS -
Sunday, July 7, 13
Implementation
How to package a DataServices Library
MyAppDataServices.js- Using AngularJS -
Register Constructors...
Sunday, July 7, 13

More Related Content

What's hot (18)

Introduction to jQuery
Introduction to jQuery
Collaboration Technologies
 
Evolving your Data Access with MongoDB Stitch - Drew Di Palma
Evolving your Data Access with MongoDB Stitch - Drew Di Palma
MongoDB
 
Java Hibernate Programming with Architecture Diagram and Example
Java Hibernate Programming with Architecture Diagram and Example
kamal kotecha
 
Web Services Container
Web Services Container
Jorgen Thelin
 
Entity framework and how to use it
Entity framework and how to use it
nspyre_net
 
Interview questions on asp
Interview questions on asp
Mrunal Bhandarkar
 
Ejb6
Ejb6
patinijava
 
Entity Manager
Entity Manager
patinijava
 
Hibernate
Hibernate
Shaharyar khan
 
Advance Java Practical file
Advance Java Practical file
varun arora
 
Agile methodologies based on BDD and CI by Nikolai Shevchenko
Agile methodologies based on BDD and CI by Nikolai Shevchenko
Moldova ICT Summit
 
RESTful Day 5
RESTful Day 5
Akhil Mittal
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
IMC Institute
 
Java Web Programming on Google Cloud Platform [2/3] : Datastore
Java Web Programming on Google Cloud Platform [2/3] : Datastore
IMC Institute
 
Server side programming bt0083
Server side programming bt0083
Divyam Pateriya
 
REST Architecture with use case and example
REST Architecture with use case and example
Shailesh singh
 
Entity Framework Overview
Entity Framework Overview
Eric Nelson
 
Hibernate Interview Questions | Edureka
Hibernate Interview Questions | Edureka
Edureka!
 
Evolving your Data Access with MongoDB Stitch - Drew Di Palma
Evolving your Data Access with MongoDB Stitch - Drew Di Palma
MongoDB
 
Java Hibernate Programming with Architecture Diagram and Example
Java Hibernate Programming with Architecture Diagram and Example
kamal kotecha
 
Web Services Container
Web Services Container
Jorgen Thelin
 
Entity framework and how to use it
Entity framework and how to use it
nspyre_net
 
Entity Manager
Entity Manager
patinijava
 
Advance Java Practical file
Advance Java Practical file
varun arora
 
Agile methodologies based on BDD and CI by Nikolai Shevchenko
Agile methodologies based on BDD and CI by Nikolai Shevchenko
Moldova ICT Summit
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
IMC Institute
 
Java Web Programming on Google Cloud Platform [2/3] : Datastore
Java Web Programming on Google Cloud Platform [2/3] : Datastore
IMC Institute
 
Server side programming bt0083
Server side programming bt0083
Divyam Pateriya
 
REST Architecture with use case and example
REST Architecture with use case and example
Shailesh singh
 
Entity Framework Overview
Entity Framework Overview
Eric Nelson
 
Hibernate Interview Questions | Edureka
Hibernate Interview Questions | Edureka
Edureka!
 

Similar to Understanding AngularJS HTML5 DataServices (10)

A Two-Tier Sandbox Architecture for Untrusted JavaScript
A Two-Tier Sandbox Architecture for Untrusted JavaScript
Phú Phùng
 
Beyond MVC: from Model to Domain
Beyond MVC: from Model to Domain
Jeremy Cook
 
Surrogate dependencies (in node js) v1.0
Surrogate dependencies (in node js) v1.0
Dinis Cruz
 
ES6 metaprogramming unleashed
ES6 metaprogramming unleashed
Javier Arias Losada
 
Beyond MVC: from Model to Domain
Beyond MVC: from Model to Domain
Jeremy Cook
 
Phu appsec13
Phu appsec13
drewz lin
 
Expert JavaScript tricks of the masters
Expert JavaScript tricks of the masters
Ara Pehlivanian
 
Web security: Securing Untrusted Web Content in Browsers
Web security: Securing Untrusted Web Content in Browsers
Phú Phùng
 
Sane Async Patterns
Sane Async Patterns
TrevorBurnham
 
Proxy Design Pattern
Proxy Design Pattern
Anjan Kumar Bollam
 
A Two-Tier Sandbox Architecture for Untrusted JavaScript
A Two-Tier Sandbox Architecture for Untrusted JavaScript
Phú Phùng
 
Beyond MVC: from Model to Domain
Beyond MVC: from Model to Domain
Jeremy Cook
 
Surrogate dependencies (in node js) v1.0
Surrogate dependencies (in node js) v1.0
Dinis Cruz
 
Beyond MVC: from Model to Domain
Beyond MVC: from Model to Domain
Jeremy Cook
 
Phu appsec13
Phu appsec13
drewz lin
 
Expert JavaScript tricks of the masters
Expert JavaScript tricks of the masters
Ara Pehlivanian
 
Web security: Securing Untrusted Web Content in Browsers
Web security: Securing Untrusted Web Content in Browsers
Phú Phùng
 
Ad

More from Thomas Burleson (6)

The Flash to HTML5 Opportunity
The Flash to HTML5 Opportunity
Thomas Burleson
 
Function currying
Function currying
Thomas Burleson
 
Visualize Deep Links with Flash and Swiz
Visualize Deep Links with Flash and Swiz
Thomas Burleson
 
Building Multilanguage (i18n) Flex Applications
Building Multilanguage (i18n) Flex Applications
Thomas Burleson
 
Understanding Flex Data Services
Understanding Flex Data Services
Thomas Burleson
 
Flex Behavior Injection
Flex Behavior Injection
Thomas Burleson
 
The Flash to HTML5 Opportunity
The Flash to HTML5 Opportunity
Thomas Burleson
 
Visualize Deep Links with Flash and Swiz
Visualize Deep Links with Flash and Swiz
Thomas Burleson
 
Building Multilanguage (i18n) Flex Applications
Building Multilanguage (i18n) Flex Applications
Thomas Burleson
 
Understanding Flex Data Services
Understanding Flex Data Services
Thomas Burleson
 
Ad

Recently uploaded (20)

Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 

Understanding AngularJS HTML5 DataServices

  • 1. Understanding HTML5 Data Services Thomas Burleson Mindspace, LLC www.linkedin.com/in/ThomasBurleson www.gridlinked.info with sample code July, 2013 Sunday, July 7, 13
  • 2. Server Tier Java ColdFusion PHP ASP Middle Tier HTML5 Client Tier Understanding HTML5 DataServices HTML5 Single-Page-Applications (SPA) are thin-client applications that exchange data with remote data services (RDS). RDS endpoints may connect directly to a Server-Tier having `enterprise-wide` APIs Often RDS endpoints connect to Middle-Tier, cloud-based services called Web Services HTTP WebServices most often marshall data as JSON or XML Sunday, July 7, 13
  • 3. Using Middle-Tier Web Services InventoryHTML5 Client Tier Authentication Sessions Users Billing Authentication Users Accounts Orders Middle Tier Web Services work as facades to server-tier `complexity` Web Services are best used when implemented for specific client UX needs Web Services hide server-tier complexities/dependencies from client-tier needs Middle-tier (Web Services) are not required… but often optimize persistence, data access, data caching, and even aggregate functionality for thin-client applications. Sunday, July 7, 13
  • 4. Using Client-Tier Delegates Inventory Authentication Sessions Users Billing Authentication Users Accounts Orders Web Services Client Tier HTML5 SPA Auth Users Delegates Delegates APIs often match the Web Services APIs Delegates are used to proxy `controller` requests to remote WebServices Delegates are responsible for serializing, deserializing, and transforming data Delegates manage request/response pairs to/from WebServices respectively. Sunday, July 7, 13
  • 5. Client-Tier Architecture Layers Authentication Users Middle Tier Client-Tier HTML5 or Flash SPA Auth Users Delegates Views Controllers Models Models, Views, Controllers, Delegates Best Practices: Only Controllers interact with Delegates Delegates are `proxies` to remote APIs Delegates are ASYNCHRONOUS Delegates should use Promises (or equivalents) Sunday, July 7, 13
  • 6. Authenticati on Users Middle Tier Client-Tier HTML5 or Flash SPA Auth Users Delegates Views Web Services Layer Data Services Layer Client-Tier Architecture Layers Sunday, July 7, 13
  • 7. Implementation What are Delegates? Could be as simple as a generic Javascript object. For example, consider an Authentication delegate with only three (3) public functions. Promises are the recommend solution in order to support the asynchronous nature of remote WebService calls. It is important to note that all Delegate public functions return Promises; since all public functions are async and will respond with real data response(s) at a future point in time Delegates are objects with public functions. Delegates are `proxies` to remote Web Services. Delegates are client-side Data Services. Sunday, July 7, 13
  • 8. (1) What are the public functions available (2) What are the arguments for each function (3) What are the data structures in the WebService responses (4) What are the errors possible from each function call Application Programming Interfaces (API) simply clarify: Implementation What are Delegate API(s)? Sunday, July 7, 13
  • 9. Implementation What are Delegate API(s)? Consumers of the AuthDelegate API can use: login( ) logout( ) loadPrivileges( ) (1) functions = login( userName, password )(2) arguments = login( ) -> { sessionID : <String> } logout( ) -> true | false loadPrivileges( ) -> { level : <int> } (3) responses = The API is now more easily understood. Sunday, July 7, 13
  • 10. Implementation How are Delegates used? Call Delegate API Call Delegate API Controllers use delegates and attach .then() handlers for responses. Note that the controller has no knowledge of how the login() or logout() methods actually work… so this delegate reference could be either a real service or a mock service! Sunday, July 7, 13
  • 11. Implementation How are Delegates used? (cont.) Call Delegate API Using Delegate API ResponsesInjected `session` model Controllers use delegates and attach handlers for responses. Notice that the LoginController has no knowledge of `how` the login() or logout() methods actually work… This means that authDelegate could be an instance of real service or a mock service; since both have the same API! Sunday, July 7, 13
  • 12. Implementation How to build a Delegate ? Use generic Javascript object to outline the API Sunday, July 7, 13
  • 13. Implementation How to build a Delegate ? Use Module Pattern and AngularJS to define authDelegate instance. NOTE: the authDelegate can then be injected into Controllers. Sunday, July 7, 13
  • 14. Implementation How to build a Mock Delegate? Step 3: Implement API methods with asynchronous, mock responses inline data construction Delay response Publish API Here we used $timeout with a 2-sec delay; to simulate an asynchronous response. Notice that we did not load any external mock data… instead we generated inline the data structures expected in the responses. Sunday, July 7, 13
  • 15. Implementation Mock Delegate using External Data? Implement API method internally using AngularJS $http to load external mock data; captured in the /data/login.json file. Load external mock data extract data structures Here $http.get() also returns a Promise. Our AuthDelegate .then() handler intercepts that response and extracts the desired data structures… This occurs before the LoginController .then() handler is notified. Sunday, July 7, 13
  • 16. Implementation Building a DataServices Library How does your architecture scale if you have 2..n Delegates? How do you separate Delegate factory/service definitions from your main application (AuthenticationDemo is shown below )? Note: Each delegate constructor function has been collapsed. Expanded you can imagine that the above approach gets `messy` VERY quickly... Question: Sunday, July 7, 13
  • 17. Implementation Building a DataServices Library 1) Define all your data services in a separate JS file. 2) Register your data services within a custom, data-service module. 3) Register your module/library as a dependent module for your main App 4) Inject Delegate instances into your Controllers Answer: MyAppDataServices.js DemoApp.js Sunday, July 7, 13
  • 18. Implementation How to package a DataServices Library AllDelegates.js Build packages Publish... - Outside of AngularJS - Sunday, July 7, 13
  • 19. Implementation How to package a DataServices Library MyAppDataServices.js- Using AngularJS - Register Constructors... Sunday, July 7, 13