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

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

AJAX, AMPLIFY JS & JQUERY DOUG NEINER I

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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