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
    STREAMLINE YOUR AJAX REQUESTS WITH
    AMPLIFYJS & JQUERY

    View full-size slide

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

    View full-size slide

  3. AJAX, AMPLIFY JS & JQUERY DOUG NEINER
    I

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide