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.

9cde37f47e4a800ea081ea42de8d749a?s=128

Doug Neiner

October 28, 2011
Tweet

Transcript

  1. AJAX, AMPLIFY JS & JQUERY DOUG NEINER STREAMLINE YOUR AJAX

    REQUESTS WITH AMPLIFYJS & JQUERY
  2. AJAX, AMPLIFY JS & JQUERY DOUG NEINER dougneiner doug@dougneiner.com dcneiner

    Doug Neiner Doug Neiner
  3. AJAX, AMPLIFY JS & JQUERY DOUG NEINER I

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

    Cody Not pictured: Ditto the cat Jasper the dog My Family
  5. AJAX, AMPLIFY JS & JQUERY DOUG NEINER STREAMLINE YOUR AJAX

    REQUESTS WITH AMPLIFYJS & JQUERY
  6. AJAX, AMPLIFY JS & JQUERY DOUG NEINER http://amplifyjs.com @amplifyjs

  7. AJAX, AMPLIFY JS & JQUERY DOUG NEINER Store Request Pub/Sub

  8. AJAX, AMPLIFY JS & JQUERY DOUG NEINER WHY AMPLIFY FOR

    AJAX? Why don’t I just show you!
  9. DOUG NEINER AJAX, AMPLIFY JS & JQUERY DIFFERENCE IN WORKFLOW

    AJAX
  10. DOUG NEINER AJAX, AMPLIFY JS & JQUERY DIFFERENCE IN WORKFLOW

    AJAX
  11. 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" });
  12. 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" });
  13. 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 } });
  14. 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" }
  15. DOUG NEINER AJAX, AMPLIFY JS & JQUERY LIVE CODING Finding

    Inspiration via an API Code available at: http://bit.ly/amplify-streamline
  16. 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 ! } });
  17. 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
  18. 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
  19. 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
  20. AJAX, AMPLIFY JS & JQUERY DOUG NEINER BONUS TOPIC Using

    jQuery.MockJSON
  21. 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
  22. 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 )); });
  23. 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
  24. 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" ! ! } ! ] };
  25. AJAX, AMPLIFY JS & JQUERY DOUG NEINER dougneiner doug@dougneiner.com dcneiner

    Doug Neiner Doug Neiner