Streamline your AJAX requests with AmplifyJS and jQuery

Transcript

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

   View Slide

2. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
   dougneiner
   [email protected]
   dcneiner
   Doug Neiner
   Doug Neiner
   

   View Slide

3. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
   I

   View Slide

4. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
   Crystal
   Ruby, Olivia,
   Cody
   Not pictured:
   Ditto the cat
   Jasper the dog
   My Family
   

   View Slide

5. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
   STREAMLINE YOUR AJAX REQUESTS WITH
   AMPLIFYJS & JQUERY
   

   View Slide

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

   View Slide

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

   View Slide

8. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
   WHY AMPLIFY FOR AJAX?
   Why don’t I just show you!
   

   View Slide

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

   View Slide

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

    View Slide

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"
    });
    

    View Slide

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"
    });
    

    View Slide

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
    }
    });
    

    View Slide

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" }
    

    View Slide

15. DOUG NEINER
    AJAX, AMPLIFY JS & JQUERY
    LIVE CODING
    Finding Inspiration via an API
    Code available at:
    http://bit.ly/amplify-streamline
    

    View Slide

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
    ! }
    });
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
    BONUS TOPIC
    Using jQuery.MockJSON
    

    View Slide

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
    

    View Slide

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 ));
    });
    

    View Slide

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
    

    View Slide

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"
    ! ! }
    ! ]
    };
    

    View Slide

25. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
    dougneiner
    [email protected]
    dcneiner
    Doug Neiner
    Doug Neiner
    

    View Slide