Intro to Amplifyjs by Visnupriya

719 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
719
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to Amplifyjs by Visnupriya

  1. 1. AmplifyJS Visnupriya. J. R © Spritle Software Private Limited | http://www.spritle.com
  2. 2. Overview • AmplifyJS is a set of components designed to solve common web application problems using simple API. • A JavaScript Component Library. • Produced by appendTo(). © Spritle Software Private Limited | http://www.spritle.com
  3. 3. Features • Ajax Request Management • Client Side Component Communication • Client Side Browser & Mobile Device Storage © Spritle Software Private Limited | http://www.spritle.com
  4. 4. Request API • It is an abstraction layer. • It sets out to separate the data retrieval and caching mechanisms from data requestors. © Spritle Software Private Limited | http://www.spritle.com
  5. 5. Request Usage Define a resource: amplify.request.define( resourceId, requestType , settings ) amplify.request.define( resourceId, function resource ) // Define a custom resquest Request a resource: amplify.request( resourceId, data, callback) Spritle Software Private Limited | http://www.spritle.com
  6. 6. Request Types • Built-in Types • Ajax type • Custom Types • By adding “amplify.request.types” hashes • an option to define custom one-off types for single requests © Spritle Software Private Limited | http://www.spritle.com
  7. 7. Request Example amplify.request.define( “ResourceID", "ajax", { url: “path/to/url/{type}", dataType: "json“, type: “GET” }); amplify.request( "ResourceID ", { type : “test” },function(data){ // do some thing here }); Spritle Software Private Limited | http://www.spritle.com
  8. 8. Request Data Handling • Pre-defined Data. • Provide data in the definition • Data provided with the request will override data provided in the definition • URL substitution/routing. • define variables in the URL of an ajax request by wrapping the variable in curly braces, e.g., "/user/{id}" • Decoders. • Built-in Decoders • Custom Decoders - amplify.request.decoders © Spritle Software Private Limited | http://www.spritle.com
  9. 9. Request Example amplify.request.decoders.sample = function ( data, status, xhr, success, error ) { if ( data.status === "success" ) { success( data.data ); } else if ( data.status === "fail" || data.status === "error" ) { error( data.message, data.status ); } else { error( data.message , "fatal" ); } }; amplify.request.define( “ResourceID", "ajax", { url: “path/to/url/{id}", dataType: "json“, decoder: “sample”, }); Spritle Software Private Limited | http://www.spritle.com
  10. 10. Request Caching • In-memory Cache. • cache: boolean • cache: number • Named Caches. • cache: string • Persistent Client-side Cache • cache: "persist“ // default storage • cache: "localStorage“ // specified storage • Custom Caches • amplify.request.cache © Spritle Software Private Limited | http://www.spritle.com
  11. 11. Store API • Persistent client-side storage systems. • Supports IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ . • Provide a consistent API to handle storage cross-browser. • Handle serializing to and from a JavaScript object using JSON serialization © Spritle Software Private Limited | http://www.spritle.com
  12. 12. Store API Usage Store a value: amplify.store( key, value , options ) Get a value: amplify.store( key) amplify.store( ) // all values Spritle Software Private Limited | http://www.spritle.com
  13. 13. Store API Usage Store data explicitly with session storage: amplify.store.StorageType( key,value) Eg: amplify.store.sessionStorage( "explicitExample" ,{ foo: “bar”}); Expiration: amplify.store( key, value, {expires : 3000}) Spritle Software Private Limited | http://www.spritle.com
  14. 14. Pub/Sub API • Facilitate the Publish and Subscribe messaging pattern in your front-end application. • The idea is that someone is broadcasting one or more messages (publishing) and someone else is listening to one or more messages (subscribing). • a slightly cleaner interface. • prevents collisions between custom events and method names. • allows a priority. © Spritle Software Private Limited | http://www.spritle.com
  15. 15. Subscribe API Usage Subscribe to a message amplify.subscribe( topic, function callback ) amplify.subscribe( topic, context, function callback ) amplify.subscribe( topic, function callback, priority ) amplify.subscribe( topic, context, function callback, priority ) Spritle Software Private Limited | http://www.spritle.com
  16. 16. Subscribe API Usage Remove a subscription amplify.unsubscribe( topic, function callback ) Spritle Software Private Limited | http://www.spritle.com
  17. 17. Publish API Usage Publish a message amplify.publish( topic ) amplify.publish( topic , arg1, arg2) returns a Boolean indicating whether any subscriptions returned false Spritle Software Private Limited | http://www.spritle.com
  18. 18. Code Walk-through with Samples © Spritle Software Private Limited | http://www.spritle.com
  19. 19. Questions? Thank you © Spritle Software Private Limited | http://www.spritle.com

×