This document discusses using HTML5 data services to connect single-page applications to backend data. It describes how HTML5 clients can connect directly to server APIs or through middle-tier web services. Delegates are used on the client-tier to proxy requests to these remote services and handle asynchronous responses. The document provides examples of implementing delegates, including building mock delegates for testing, and packaging delegates into reusable data services libraries.

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