Blog

AmplifyJS 1.0 Released

Today, appendTo is proud to announce the 1.0 release of AmpilfyJS, a set of JavaScript components designed to solve common web application problems with a simplistic API. AmplifyJS was built by the developers at appendTo to solve common tasks that we are constantly called upon to solve. With our commitment to giving back to the community we wanted to give back the fruits of our labor.

AmplifyJS - The JavaScript Component Library

AmplifyJS is released with the MIT and GPLv2 dual licenses. This is the same set of licenses that jQuery uses and as such makes it possible to use for personal and commercial use.

The 1.0 release comes with three components: amplify.request, ampify.store, and amplify.publish/subscribe.

Request

amplify.request is an abstraction layer that can be used for any kind of request for data. amplify.request sets out to separate the data retrieval and caching mechanisms from data requestors.

Using the amplify.request.define function you can create and maintain your entire server interface and caching policy in a single place, reducing the impact of any server interface changes. Components that need data can retrieve the data through amplify.request without concern for data caching, server interface, location, data types, wrappers, and all the other specificities of the client/server interaction.

Example: set up and use a request utilizing Ajax
// “myApiUrl” will return the following object back.
//{
//    "foo" : "bar",
//    "baz" : "qux"
//}

amplify.request.define( "ajaxExample1", "ajax", {
    url: "/myApiUrl",
    dataType: "json",
    type: "GET"
});

// later in code
amplify.request( "ajaxExample1", function( data ) {
    data.foo; // bar
});

Take a look at the documentation for amplify.request.

Store

amplify.store is a wrapper for various persistent client-side storage systems. amplify.store supports IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ and provides a consistent API to handle storage cross-browser.

amplify.store is meant to allow you to utilize all the latest storage technologies for those browsers that have them, while gracefully degrading for those without support. amplify.store allows you to be passive or explicit in the storage technologies used. With no storage type explicitly specified, amplify.store will go through a series of technologies and pick an appropriate storage technology through feature detection. amplify.store also handles serializing to and from a JavaScript object using JSON serialization where necessary.

Note: Because of the JSON dependency, you need to add json2.js for support in IE 5. IE 6, IE 7, Firefox 2.0 and Firefox 3.0.

Example: store data with AmplifyJS storage picking the default storage technology:

amplify.store( "storeExample1", { foo: "bar" } );
amplify.store( "storeExample2", "baz" );
// retrieve the data later via the key
var myStoredValue = amplify.store( "storeExample1" ),
    myStoredValue2 = amplify.store( "storeExample2" ),
    myStoredValues = amplify.store();
myStoredValue.foo; // bar
myStoredValue2; // baz
myStoredValues.storeExample1.foo; // bar
myStoredValues.storeExample2; // baz

Take a look at the documentation for amplify.store.

Pub/Sub

The AmplifyJS core library provides two methods (amplify.publish and amplify.subscribe). AmplifyJS provides methods to 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). By separating your logic out like this it allows for loose coupling of your components, which results in less brittle and more reusable code.

It is possible to implement the publish and subscribe model by using jQuery custom events, however, the AmplifyJS pub/sub component provides a slightly cleaner interface, prevents collisions between custom events and method names, and allows a priority to your messages.

Example: Subscribe and publish with no data:

amplify.subscribe( "nodataexample", function() {
    alert( "nodataexample topic published!" );
});

//...

amplify.publish( "nodataexample" );

Take a look at the documentation for pub/sub.

Get Involved

Would you like to help in contributing to AmplifyJS? Take a look at our Community page for options on how you can help.

More Information

Tweet about this on TwitterShare on FacebookShare on RedditShare on Google+Share on LinkedIn