Understanding AngularJS HTML5 DataServices
3 likes2,963 views
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.
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 speciïŹc 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 deïŹne 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 ïŹle. 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 notiïŹed. 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 deïŹnitions 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) DeïŹne all your data services in a separate JS ïŹle. 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