Streamline your AJAX requests with AmplifyJS and jQuery

Transcript

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

   REQUESTS WITH AMPLIFYJS & JQUERY

2. AJAX, AMPLIFY JS & JQUERY DOUG NEINER dougneiner [email protected] 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 [email protected] dcneiner

    Doug Neiner Doug Neiner