• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Understanding AngularJS HTML5 DataServices
 

Understanding AngularJS HTML5 DataServices

on

  • 1,838 views

Here is an illustrated introduction to HTML5 and WebServices. ...

Here is an illustrated introduction to HTML5 and WebServices.

I discuss the use of client-tier Delegates (for a clearly defined Dataservice layer).
I also illustrate (a) how to build delegates API using mock external data and (b) how to build a custom DataServices library with AngularJS and packages.

Source examples using AngularJS and Javascript.

Statistics

Views

Total Views
1,838
Views on SlideShare
1,824
Embed Views
14

Actions

Likes
2
Downloads
0
Comments
0

2 Embeds 14

http://www.linkedin.com 12
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Understanding AngularJS HTML5 DataServices Understanding AngularJS HTML5 DataServices Presentation Transcript

    • 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