INTRODUCING AMPLIFY
      by Scott González
GOALS



• Solve   real problems based on existing projects

• Easy   to drop into existing projects
INITIAL FEATURES


• Persistent   client-side storage

• Mocking   ajax requests

• Manipulating    data from ajax requests
OPEN SOURCE


• Dual   licensed

 • MIT

 • GPLv2
STORE

• Persistent   client-side storage

• Cross-browser

  • IE   5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+

  • iPhone   2+, Android 2+

• localStorage, sessionStorage, globalStorage, userData
STORE


• Falls   back to in-memory storage

  • Never    worry about whether a persistent store exists

• Support    for time-based expiration of data

• Extensible
STORE API

• store   a value

  • amplify.store(   key, value )

• get   a value

  • amplify.store(   key )

  • amplify.store()   // all values
STORE API

• expiration

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

• specific   store

  • amplify.store.sessionStorage(    key, value )

  • amplify.store.sessionStorage(    key )
REQUEST

• abstraction    for requesting data

• separates   requesting data from:

  • retrieving   data

  • parsing   data

  • caching   data
REQUEST API


• define   a request

 • amplify.request.define(    resourceId, resourceType, settings )

• make   a request

 • amplify.request(   resourceId, data, callback )
REQUEST API


amplify.request.define( “my-data”, “ajax”, {
  url: “/path/to/resource”,
  dataType: “json”
});
REQUEST API


amplify.request( “my-data”, { foo: “bar”, baz: “qux” },
 function( data ) {
   // do something awesome with data
 });
REQUEST API

amplify.request({
  resourceId: “my-data”,
  data: { foo: “bar”, baz: “qux” },
  success: function( data ) {},
  error: function( data ) {},
});
REQUEST TYPES


• ajax

• custom   one-off requests

• more    to come

• easy   to define new request types
REQUEST API


amplify.request.define( “echo”, function( settings ) {
  settings.success( settings.data );
  // success, error, data, resourceId
});
MOCKING REQUESTS


• real   request

  • amplify.request.define( “my-data”, “ajax”, ... )

• mock    request

  • amplify.request.define( “my-data”, function(       settings ) { ... } )
MANIPULATING DATA


• change   the data format from third party services

• change   the status (success/error) of a request

 • many    services always respond with a 200 OK HTTP status
REQUEST DECODERS


• allowyou to parse data before calling the success or error
 callback

• change   the data passed to the callback

• change   the status of the request
REQUEST DECODERS
amplify.request.define( “my-data”, “ajax”, {
 url: “/path/to/resource”,
 dataType: “json”,
 decoder: function( data, status, xhr, success, error ) {
   if ( data.errCode ) {
      error({ code: data.errCode, msg: data.errMsg });
   } else {
      success( data );
   }
 });
REQUEST CACHING

• boolean: in-memory

• number: in-memory       with expiration (in ms)

• “persist”: delegate   to amplify.store()

• “sessionStorage”: delegate    to amplify.store.sessionStorage()

• easy   to create new cache types
PUB/SUB


• not   on initial list of features

  • we   usually use custom events in jQuery

• needed    a simple system to post messages for amplify.request
PUB/SUB API

• subscribe   to a message

  • amplify.subscribe(   topic, callback )

  • amplify.subscribe(   topic, context, callback )

  • amplify.subscribe(   topic, callback, priority )

  • amplify.subscribe(   topic, context, callback, priority )
PUB/SUB API

• publish   a message

  • amplify.publish(   topic )

  • amplify.publish(   topic, arg1, arg2 )

• returns   boolean indicating whether any subscription returned
 false
REQUEST MESSAGES

• request.before, request.before.ajax

  • do   something before a request

  • prevent   a request

• request.success, request.error, request.complete

  • do   something after a request
AMPLIFY LINKS

• http://github.com/appendto/amplify

• http://amplifyjs.com

• http://groups.google.com/group/amplifyjs

• http://swarm.amplifyjs.com/user/amplify

• irc://freenode/amplify.js

Introducing Amplify

  • 1.
    INTRODUCING AMPLIFY by Scott González
  • 2.
    GOALS • Solve real problems based on existing projects • Easy to drop into existing projects
  • 3.
    INITIAL FEATURES • Persistent client-side storage • Mocking ajax requests • Manipulating data from ajax requests
  • 4.
    OPEN SOURCE • Dual licensed • MIT • GPLv2
  • 5.
    STORE • Persistent client-side storage • Cross-browser • IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+ • iPhone 2+, Android 2+ • localStorage, sessionStorage, globalStorage, userData
  • 6.
    STORE • Falls back to in-memory storage • Never worry about whether a persistent store exists • Support for time-based expiration of data • Extensible
  • 7.
    STORE API • store a value • amplify.store( key, value ) • get a value • amplify.store( key ) • amplify.store() // all values
  • 8.
    STORE API • expiration • amplify.store( key, value, { expires: 1000 } ) • specific store • amplify.store.sessionStorage( key, value ) • amplify.store.sessionStorage( key )
  • 9.
    REQUEST • abstraction for requesting data • separates requesting data from: • retrieving data • parsing data • caching data
  • 10.
    REQUEST API • define a request • amplify.request.define( resourceId, resourceType, settings ) • make a request • amplify.request( resourceId, data, callback )
  • 11.
    REQUEST API amplify.request.define( “my-data”,“ajax”, { url: “/path/to/resource”, dataType: “json” });
  • 12.
    REQUEST API amplify.request( “my-data”,{ foo: “bar”, baz: “qux” }, function( data ) { // do something awesome with data });
  • 13.
    REQUEST API amplify.request({ resourceId: “my-data”, data: { foo: “bar”, baz: “qux” }, success: function( data ) {}, error: function( data ) {}, });
  • 14.
    REQUEST TYPES • ajax •custom one-off requests • more to come • easy to define new request types
  • 15.
    REQUEST API amplify.request.define( “echo”,function( settings ) { settings.success( settings.data ); // success, error, data, resourceId });
  • 16.
    MOCKING REQUESTS • real request • amplify.request.define( “my-data”, “ajax”, ... ) • mock request • amplify.request.define( “my-data”, function( settings ) { ... } )
  • 17.
    MANIPULATING DATA • change the data format from third party services • change the status (success/error) of a request • many services always respond with a 200 OK HTTP status
  • 18.
    REQUEST DECODERS • allowyouto parse data before calling the success or error callback • change the data passed to the callback • change the status of the request
  • 19.
    REQUEST DECODERS amplify.request.define( “my-data”,“ajax”, { url: “/path/to/resource”, dataType: “json”, decoder: function( data, status, xhr, success, error ) { if ( data.errCode ) { error({ code: data.errCode, msg: data.errMsg }); } else { success( data ); } });
  • 20.
    REQUEST CACHING • boolean:in-memory • number: in-memory with expiration (in ms) • “persist”: delegate to amplify.store() • “sessionStorage”: delegate to amplify.store.sessionStorage() • easy to create new cache types
  • 21.
    PUB/SUB • not on initial list of features • we usually use custom events in jQuery • needed a simple system to post messages for amplify.request
  • 22.
    PUB/SUB API • subscribe to a message • amplify.subscribe( topic, callback ) • amplify.subscribe( topic, context, callback ) • amplify.subscribe( topic, callback, priority ) • amplify.subscribe( topic, context, callback, priority )
  • 23.
    PUB/SUB API • publish a message • amplify.publish( topic ) • amplify.publish( topic, arg1, arg2 ) • returns boolean indicating whether any subscription returned false
  • 24.
    REQUEST MESSAGES • request.before,request.before.ajax • do something before a request • prevent a request • request.success, request.error, request.complete • do something after a request
  • 25.
    AMPLIFY LINKS • http://github.com/appendto/amplify •http://amplifyjs.com • http://groups.google.com/group/amplifyjs • http://swarm.amplifyjs.com/user/amplify • irc://freenode/amplify.js