Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Streamline your AJAX requests with AmplifyJS and jQuery

Streamline your AJAX requests with AmplifyJS and jQuery

(Code is available here: http://bit.ly/amplify-streamline)

From development to deployment, managing remote data with AJAX or JSONP quickly becomes a difficult and tedious process. Simple server or API changes can invalidate requests or require you to update your code. In this session, you will learn how to use the AmplifyJS library to define, mock and process remote data requests. Using this library, and the techniques taught in this session, you will be able to build extremely flexible integrations with services like Flickr, Netflix, Amazon, Google and solid integrations with your own server code. Take your code organization to the next level with AmplifyJS.

Doug Neiner

October 28, 2011
Tweet

More Decks by Doug Neiner

Other Decks in Programming

Transcript

  1. AJAX, AMPLIFY JS & JQUERY DOUG NEINER Crystal Ruby, Olivia,

    Cody Not pictured: Ditto the cat Jasper the dog My Family
  2. AJAX, AMPLIFY JS & JQUERY DOUG NEINER WHY AMPLIFY FOR

    AJAX? Why don’t I just show you!
  3. DOUG NEINER AJAX, AMPLIFY JS & JQUERY REQUEST DEFINITION //

    Typically used for ajax requests amplify.request.define( resourceId, type, [ settings ] ); // Typically used for mocked requests, or local requests amplify.request.define( resourceId, resource ); amplify.request.define( "customers.list", "ajax", { url: "/customers/", dataType: "json" }); amplify.request.define( "customers.update", "ajax", { url: "/customers/{id}", dataType: "json", method: "POST" });
  4. DOUG NEINER AJAX, AMPLIFY JS & JQUERY REQUEST DEFINITION //

    Typically used for ajax requests amplify.request.define( resourceId, type, [ settings ] ); // Typically used for mocked requests, or local requests amplify.request.define( resourceId, resource ); amplify.request.define( "customers.list", "ajax", { url: "/customers/", dataType: "json" }); amplify.request.define( "customers.update", "ajax", { url: "/customers/{id}", dataType: "json", method: "POST" });
  5. DOUG NEINER AJAX, AMPLIFY JS & JQUERY REQUEST EXECUTION amplify.request(

    "customers.list", function ( data ){ // Do something with data }); amplify.request({ resourceId: "customers.list", success: function ( data ) { // Do something with data }, error: function ( message ) { // Do something with an error } });
  6. DOUG NEINER AJAX, AMPLIFY JS & JQUERY REQUEST EXECUTION amplify.request(

    "customers.update", { id: 764, first_name: "Doug" }, function ( data ){ ... }); amplify.request({ resourceId: "customers.update", data: { id: 764, first_name: "Doug" }, success: function ( data ) { ... }, error: function ( message ) { ... } }); /customers/764 { first_name: "Doug" }
  7. DOUG NEINER AJAX, AMPLIFY JS & JQUERY LIVE CODING Finding

    Inspiration via an API Code available at: http://bit.ly/amplify-streamline
  8. DOUG NEINER AJAX, AMPLIFY JS & JQUERY REQUEST DATA DEFAULTS

    amplify.request.define( "inspiration.shots", "ajax", { ! url: "http://api.dribbble.com/shots/popular", ! dataType: "jsonp", ! data: { ! ! per_page: 6 ! } }); amplify.request.define( "inspiration.shots", "ajax", { ! url: "http://api.dribbble.com/shots/{type}", ! dataType: "jsonp", ! data: { type: "popular" ! ! per_page: 6 ! } });
  9. DOUG NEINER AJAX, AMPLIFY JS & JQUERY IN MEMORY CACHING

    amplify.request.define( "customers.types", "ajax", { url: "/customer_types/", dataType: "json", cache: true }); amplify.request.define( "customers.types", "ajax", { url: "/customer_types/", dataType: "json", cache: 30000 }); THIS ONLY WORKS FOR THE DURATION OF THE PAGE
  10. DOUG NEINER AJAX, AMPLIFY JS & JQUERY PERSISTENT CACHING amplify.request.define(

    "customers.types", "ajax", { url: "/customer_types/", dataType: "json", cache: "persist" }); amplify.request.define( "customers.types", "ajax", { url: "/customer_types/", dataType: "json", cache: { type: "persist", expires: 5 * 60 * 1000 } }); BE SURE TO INCLUDE AMPLIFY STORE FIRST THIS TO WORK
  11. DOUG NEINER AJAX, AMPLIFY JS & JQUERY MORE FLEXIBILITY •

    Custom Request Types • OAuth, Local Database, Online/Offline • Custom Decoders • Custom Cache Types • Custom Request Definitions • Using our mocking syntax, you can create very smart request definitions that do more than a normal AJAX request
  12. DOUG NEINER AJAX, AMPLIFY JS & JQUERY MOCKJSON • http://bit.ly/mockjson

    • Creates fake data objects based on MockJSON templates. • Using variable data from a MockJSON template keeps your data unpredictable enough to catch edge cases. • Simple API for generating data
  13. DOUG NEINER AJAX, AMPLIFY JS & JQUERY ADDING MOCKJSON TO

    A MOCK var shots_template = { ! // Generate between 6 and 9 shots ! "shots|6-9": [ ! ! { ! ! ! title: "@LOREM", ! ! ! url: "#", ! ! ! image_teaser_url: "mocks/placeholder.jpg" ! ! } ! ] }; amplify.request.define( "shots", function ( settings ) { ! // Run the template, and pass it to the success ! settings.success( $.mockJSON.generateFromTemplate( shots_template )); });
  14. DOUG NEINER AJAX, AMPLIFY JS & JQUERY VARIABLE REPLACEMENT •

    All variables in strings – specified as @VARIABLENAME – are auto replaced with random data from preset data stores. • Available out of the box: @NUMBER @LETTER_UPPER @LETTER_LOWER @MALE_FIRST_NAME @FEMALE_FIRST_NAME @LAST_NAME @EMAIL @DATE_YYYY @DATE_DD @DATE_MM @TIME_HH @TIME_MM @TIME_SS @LOREM @LOREM_IPSUM
  15. DOUG NEINER AJAX, AMPLIFY JS & JQUERY CUSTOM VARIABLE DATA

    $.mockJSON.data.PLACEHOLDER = [ ! "placeholder", ! "placeholder-2" ]; var shots_template = { ! // Generate between 6 and 9 shots ! "shots|6-9": [ ! ! { ! ! ! title: "@LOREM", ! ! ! url: "#", ! ! ! image_teaser_url: "mocks/@PLACEHOLDER.jpg" ! ! } ! ] };