Intro to Amplifyjs by Visnupriya

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

AmplifyJS

Visnupriya. J. R


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.

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

Request Usage

amplify.request.define( resourceId, requestType , settings )

amplify.request.define( resourceId, function resource ) // Define a custom resquest

Define a resource:

amplify.request( resourceId, data, callback)

Request a resource:


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

amplify.store( key, value , options )

Store a value:

amplify.store( key)

amplify.store( ) // all values

Get a value:


Store API Usage

amplify.store.StorageType( key,value)Eg:amplify.store.sessionStorage( "explicitExample" ,{ foo: “bar”});

Store data explicitly with session storage:

amplify.store( key, value, {expires : 3000})

Expiration:


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

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 to a message

Subscribe API Usage


amplify.unsubscribe( topic, function callback )

Remove a subscription


Publish API Usage

amplify.publish( topic )

amplify.publish( topic , arg1, arg2)

Publish a message

returns a Boolean indicating whether any subscriptions returned false


Code Walk-through with Samples


Questions?

Thank you

Technology

Intro to Amplifyjs by Visnupriya