Intro to Amplifyjs by Visnupriya

AmplifyJS
Visnupriya. J. R

© Spritle Software Private Limited | http://www.spritle.com

Overview
• AmplifyJS is a set of components designed to
solve common web application problems
using simple API.

• A JavaScript Component Library.
• Produced by appendTo().


Features
• Ajax Request Management
• Client Side Component Communication
• Client Side Browser & Mobile Device Storage


Request API
• It is an abstraction layer.
• It sets out to separate the data retrieval and
caching mechanisms from data requestors.


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

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


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
});


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

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”,
});

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


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


Store API Usage
Store a value:
amplify.store( key, value , options )

Get a value:
amplify.store( key)
amplify.store( ) // all values


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})


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.

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 )


Subscribe API Usage
Remove a subscription
amplify.unsubscribe( topic, function callback )


Publish API Usage
Publish a message
amplify.publish( topic )
amplify.publish( topic , arg1, arg2)

returns a Boolean indicating whether any
subscriptions returned false

Code Walk-through with Samples


Questions?
Thank you


Intro to Amplifyjs by Visnupriya

More Related Content

What's hot

Similar to Intro to Amplifyjs by Visnupriya

Recently uploaded

Intro to Amplifyjs by Visnupriya