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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Intro to Amplifyjs by Visnupriya

Ähnlich wie Intro to Amplifyjs by Visnupriya (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Intro to Amplifyjs by Visnupriya