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.
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
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