Building Smart Async Functions For Mobile
1 like1,186 views
The document discusses techniques for building smart asynchronous functions for mobile applications. It describes typical asynchronous functions like getJSON and problems with requiring HTTP requests and network connections. It then outlines objectives like minimizing requests and working offline. The document proposes techniques like caching, queuing, merging and filtering requests. It demonstrates using decorators to enhance asynchronous functions without changing their signatures and delegating functionality to utility objects like caches and queues.
![TYPICAL ASYNC FUNCTIONS
getJSON(url, [data,] [success(data, textStatus, jqXHR),] [dataType])
get(url, [data,] [success(data, textStatus, jqXHR),] [dataType])
post(url, [data,] [success(data, textStatus, jqXHR),] [dataType])](https://image.slidesharecdn.com/javascriptcachepatterns-110810192454-phpapp02/85/Building-Smart-Async-Functions-For-Mobile-2-320.jpg)
![OBJECTIVES
• Minimize HTTP requests
• Make things work even if you are offline
• Avoid cluttering up the app’s controllers with online/offline
conditionals
• Preserve original API signatures
getJSON( url, [data,] [success,] [cache,] [filter,] [keyboardcat] )](https://image.slidesharecdn.com/javascriptcachepatterns-110810192454-phpapp02/85/Building-Smart-Async-Functions-For-Mobile-4-320.jpg)
![CACHE IMPLEMENTATION
Cache.prototype = {
set : function (key, value) {
var package = {};
package.type = typeof value;
package.value = (package.type === 'object') ? JSON.stringify(value) : value;
localStorage[this._hash(key)] = JSON.stringify(package);
},
get : function (key) {
var package;
if (this._exists(key)) {
try {
package = JSON.parse(localStorage[this._hash(key)]);
} catch (e) {
this.remove(key);
return false;
}
return (package.type === 'object') ? JSON.parse(package.value) : package.value;
}
return false;
},
remove : function (key) {
if (this._exists(key)) {
delete localStorage[this._hash(key)];
}
}
}](https://image.slidesharecdn.com/javascriptcachepatterns-110810192454-phpapp02/85/Building-Smart-Async-Functions-For-Mobile-18-320.jpg)
![QUEUE IMPLEMENTATION
var Queue = function() {};
Queue.prototype = new Array();
Queue.prototype.add = function (item) {
this.push(item);
};
Queue.prototype.remove = function () {
return this.shift();
};
Queue.prototype.goOnline = function () {
var self = this, success;
if(item = this[0]) {
success = item.args[2];
item.args[2] = function () {
success.apply(this, arguments);
self.remove();
self.goOnline();
};
item.func.apply(this, item.args);
}
};
var queue = new Queue();
document.body.addEventListener("online", function () {
queue.goOnline();
}, false);](https://image.slidesharecdn.com/javascriptcachepatterns-110810192454-phpapp02/85/Building-Smart-Async-Functions-For-Mobile-19-320.jpg)
Building Smart Async Functions For Mobile
- 1. BUILDING SMART ASYNC FUNCTIONS FOR MOBILE Glan Thomas Mountain View JavaScript Meetup Group Aug 10, 2011
- 2. TYPICAL ASYNC FUNCTIONS getJSON(url, [data,] [success(data, textStatus, jqXHR),] [dataType]) get(url, [data,] [success(data, textStatus, jqXHR),] [dataType]) post(url, [data,] [success(data, textStatus, jqXHR),] [dataType])
- 3. ASYNC PROBLEMS • Requires an HTTP request • Requires a network connection • Cross domain origin
- 4. OBJECTIVES • Minimize HTTP requests • Make things work even if you are offline • Avoid cluttering up the app’s controllers with online/offline conditionals • Preserve original API signatures getJSON( url, [data,] [success,] [cache,] [filter,] [keyboardcat] )
- 5. WHAT CAN WE DO? • Cache - Keep a local copy of the data • Queue - For sending to the server later • Merge - Combine requests into one • Filter - Transform the incoming data • AB Testing - Provide different data for different users • Versioning - Making sure you hit the right endpoints
- 6. TECHNIQUES • Interfaces - for utility objects • Decorators - for augmenting async functions • Delegation - to utility object
- 7. INTERFACES Cache Interface Queue Interface • get(key) • add(item) • set(key, value) • remove() • delete(key)
- 8. DECORATORS
- 9. WHAT JUST HAPPENED? jQuery.get CacheDecorator getCached
- 10. USAGE var cache = new Cache(), myGet = jQuery.get; myGet = new CacheDecorator(myGet, cache); myGet(url, successFunction);
- 11. CACHE DECORATOR var CacheDecorator = function (func, cache) { 'use strict'; return function (url, success) { var data = cache.get(url); if (data) { success(data, 'hit'); } else { func(url, function (data) { cache.set(url, data); if (typeof success === 'function') { success.apply(this, arguments); } }); } }; };
- 12. STACKING var cache = new Cache(), filter = new Filter(), myGet = jQuery.get; myGet = new FilterDecorator(myGet, filter); myGet = new CacheDecorator(myGet, cache); myGet(url, successFunction);
- 13. FILTER DECORATOR var FilterDecorator = function (func, filter) { 'use strict'; return function (url, success) { func(url, function (data) { data = filter(url, data); if (typeof success === 'function') { success.apply(this, arguments); } }); }; };
- 14. QUEUE DECORATOR var QueueDecorator = function (func, queue) { 'use strict'; return function (url, data, success) { queue.add({'func': func, 'args' : arguments}); success({}, 'queued'); }; };
- 15. TAKEAWAYS • Usedecorators to enhance existing asynchronous functions without altering their signatures. • Delegate functionality to dedicated utility objects (Caching/ Queuing). • Define interfaces for utility objects. • Stack decorators to combine functionality.
- 16. SOME THINGS WE SKIPPED • Cross domain origin • Error and failure states • Specificimplementations of Cache and Queue classes (LocalStorage/SQLite) • Enforcing of interfaces (see ‘Pro JavaScript Design Patterns’, Ross Harmes and Dustin Diaz, Apress, 2008)
- 17. QUESTIONS?
- 18. CACHE IMPLEMENTATION Cache.prototype = { set : function (key, value) { var package = {}; package.type = typeof value; package.value = (package.type === 'object') ? JSON.stringify(value) : value; localStorage[this._hash(key)] = JSON.stringify(package); }, get : function (key) { var package; if (this._exists(key)) { try { package = JSON.parse(localStorage[this._hash(key)]); } catch (e) { this.remove(key); return false; } return (package.type === 'object') ? JSON.parse(package.value) : package.value; } return false; }, remove : function (key) { if (this._exists(key)) { delete localStorage[this._hash(key)]; } } }
- 19. QUEUE IMPLEMENTATION var Queue = function() {}; Queue.prototype = new Array(); Queue.prototype.add = function (item) { this.push(item); }; Queue.prototype.remove = function () { return this.shift(); }; Queue.prototype.goOnline = function () { var self = this, success; if(item = this[0]) { success = item.args[2]; item.args[2] = function () { success.apply(this, arguments); self.remove(); self.goOnline(); }; item.func.apply(this, item.args); } }; var queue = new Queue(); document.body.addEventListener("online", function () { queue.goOnline(); }, false);
- 20. OFFLINE DECORATOR var OfflineDecorator = function (func, offLine) { 'use strict'; return function (url, success) { if (offLine) { success({}, 'offline'); } else { func(url, function (data) { if (typeof success === 'function') { success.apply(this, arguments); } }); } }; };