Javascript Everywhere   Online, Offline and on the Server              Pascal Rettig        http://www.cykod.com           ...
Topics• Debugging Javascript• Optimizing Javascript• Local Storage• Offline Storage• Server side Javascript + Web Sockets  ...
Debugging Javascript  Or, alert(“Can only take you so far”);
Firebughttp://getfirebug.com/
Other browsers• Chrome and IE8 have similar tools to  Firebug built in.• Tools -> Developer Tools in both
Firebug 101• Inspecting• Modifying• Tracking resources
Firebug 102Getting rid of alert(...)• Firebug console• console.log(...), console.warn(...),  console.error(...)• execute j...
Javascript Debugging• Firebug step debugger• Setting watches• Setting breakpoints• Setting conditional breakpoints
The best type of bug...
The best type of bug...... is one that’s caught         for you.
Javascript is a             lax languageYour javascript code will only be as rigorous as you are.
Consider lint’ing               http://javascriptlint.com/  Command line tool by Matthias Miller built on thework done by ...
Automated Testing      Frameworks              QUnit - used in JQueryJasmine - Created by Pivotal Labs, Inspired by RSpec
QUnit          By John Resig, Founder of JQuery             http://docs.jquery.com/Qunittest("a basic test example", funct...
Jasmine     From Pivotal Labs, Successor to JsUnit,           inspired (partly) by RSpec       http://pivotal.github.com/j...
Optimizing        ProfilingJavascript OptimizationNetwork Optimization
We should forget about smallefficiencies, say about 97% of the time:premature optimization is the root ofall evil.         ...
Javascript Profiling   with Firebug
Javascript Profiling       with Firebug• Click “profile”
Javascript Profiling       with Firebug• Click “profile”• Wait
Javascript Profiling       with Firebug• Click “profile”• Wait• Click “profile” again
Some questions...• Best way to add elements to arrays?• Best way to create lots of objects?• How bad is concatenating onto...
Arrays      http://jsperf.com/array-selection-methods/2var arr = []                      var arr = []for (var i = 0; i < l...
Object Creation  http://jsperf.com/object-initialization-patterns-testvar Obj1 = function() {}                 var Obj3 = ...
Double check your      intuition...• http://jsperf.com• http://jsfiddle.net/
Web PagePerformance Tuning
Speed up game launch• Games are often asset loading bound• Consider a CDN (S3/Cloudfront)• 24bit vs 8bit files• Sprite maps...
Taking Javascript Home• Local Storage• Offline storage
Local StorageStore data on the client for later use.
Isn’t that just like     a cookie?
Isn’t that just like     a cookie?   Yes and no
Local Storage vs. Cookies                              Sent     Available           Size    Number                        ...
Local Storage works for:• Firefox 3.5, Safari 4, IE8, Chrome 4+• Saving game state between visits without a  server• Stori...
Testing for Local             StorageTesting directly (From Dive Into HTML5)function supports_local_storage() {   try {   ...
Using Local Storage// Add an item to local storagetry {  localStorage.setItem(identifierString, valueString);  localStorag...
Strings only...     Probably want to create an API on top                of localStorageStorage.prototype.setObject = func...
Better yet, use a        library...        http://www.jstorage.info/$.jStorage.set(key, value)value = $.jStorage.get(key)v...
Other HTML5 Storage      Options• sessionStorage  - same as localStorage but per tab• Web SQL  - Provides SQLite compatibl...
Offline Storage
Why?• Make apps available offline (Duh!)• Make mobile apps that sync when  networked• Force browsers to keep assets available
The set-up1. Add a manifest file to your HTML:   <html manifest="/cache.manifest">2. Make sure your manifest is served with...
The Events on  window.applicationCache   Event      When  checking    First event, checking for a manifest noupdate     Ma...
But...If you have a simple app that you just want tobe cacheable online, you don’t need to doanything special
Gotcha’s• Disable server caching while testing or  your will go insane• Make sure to update your manifest file each  time y...
Javascript on the Server
Why?• Leverage existing javascript codebase• Async good support for realtime and  Websockets
Introducing Node.js            http://nodejs.org/• Built on Embedded Google V8 Engine• Check out nodejs.com for installati...
Node Packages• NPM - node package manager, sort of like  Rubygems for node• As easy as “npm install socket.io”• export NOD...
Simplest Examplevar http = require(http);http.createServer(function (req, res) {    res.writeHead(200, {Content-Type: text...
WebSockets: the       problem• Want realtime messaging• Not supported in older browsers• Removed from FF4 for the time being
WebSockets:  a solution      http://socket.io/•Supports native WebSockets•Has a fallback for flash•Handles it all for you
The Servervar http = require(http),     io = require(socket.io),     fs = require (fs),server = http.createServer(function...
The Client<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>...<body><div id=status></div><script> var s...
Thanks!   Pascal Rettigpascal@cykod.com
Upcoming SlideShare
Loading in...5
×

Javascript Everywhere

4,590

Published on

Presentation to the MIT IAP HTML5 Game Development Class on Debugging and Optimizing Javascript, Local storage, Offline Storage and Server side Javascript with Node.js

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,590
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Javascript Everywhere

    1. 1. Javascript Everywhere Online, Offline and on the Server Pascal Rettig http://www.cykod.com @cykod
    2. 2. Topics• Debugging Javascript• Optimizing Javascript• Local Storage• Offline Storage• Server side Javascript + Web Sockets (Time permitting)
    3. 3. Debugging Javascript Or, alert(“Can only take you so far”);
    4. 4. Firebughttp://getfirebug.com/
    5. 5. Other browsers• Chrome and IE8 have similar tools to Firebug built in.• Tools -> Developer Tools in both
    6. 6. Firebug 101• Inspecting• Modifying• Tracking resources
    7. 7. Firebug 102Getting rid of alert(...)• Firebug console• console.log(...), console.warn(...), console.error(...)• execute javascript directly from the console• Firebug needs to be open
    8. 8. Javascript Debugging• Firebug step debugger• Setting watches• Setting breakpoints• Setting conditional breakpoints
    9. 9. The best type of bug...
    10. 10. The best type of bug...... is one that’s caught for you.
    11. 11. Javascript is a lax languageYour javascript code will only be as rigorous as you are.
    12. 12. Consider lint’ing http://javascriptlint.com/ Command line tool by Matthias Miller built on thework done by Douglas Crockford (“JS, the good parts”)
    13. 13. Automated Testing Frameworks QUnit - used in JQueryJasmine - Created by Pivotal Labs, Inspired by RSpec
    14. 14. QUnit By John Resig, Founder of JQuery http://docs.jquery.com/Qunittest("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equals( "hello", value, "We expect value to be hello" );});module("Module A");test("first test within module", function() { ok( true, "all pass" );});
    15. 15. Jasmine From Pivotal Labs, Successor to JsUnit, inspired (partly) by RSpec http://pivotal.github.com/jasmine/describe(Calculator, function () { var counter = 0 it(can add a number, function () { counter = counter + 2; // counter was 0 before expect(bar).toEqual(2); }); it(can multiply a number, function () { counter = counter * 5; // counter was 2 before expect(bar).toEqual(10); });});
    16. 16. Optimizing ProfilingJavascript OptimizationNetwork Optimization
    17. 17. We should forget about smallefficiencies, say about 97% of the time:premature optimization is the root ofall evil. - Donald Knuth
    18. 18. Javascript Profiling with Firebug
    19. 19. Javascript Profiling with Firebug• Click “profile”
    20. 20. Javascript Profiling with Firebug• Click “profile”• Wait
    21. 21. Javascript Profiling with Firebug• Click “profile”• Wait• Click “profile” again
    22. 22. Some questions...• Best way to add elements to arrays?• Best way to create lots of objects?• How bad is concatenating onto a HTML string?• How much to globals hurt?
    23. 23. Arrays http://jsperf.com/array-selection-methods/2var arr = [] var arr = []for (var i = 0; i < len; i++) { for (var i = 0; i < len; i++) { arr.push(i)  arr[arr.length] = i} }var arr = new Array(len) var arr = []for (var i = 0; i < len; i++) { for (var i = 0; i < len; i++) { arr[i] = i  arr[i] = i} } var arr = []var arr = [] for (i = 0; i < len; ifor (i = 0; i < len; i++) { ++) { arr.push(i)  arr[i] = i} }
    24. 24. Object Creation http://jsperf.com/object-initialization-patterns-testvar Obj1 = function() {} var Obj3 = function() { Obj1.prototype.yay = function(x) {};   function yay(x) {}; Obj1.prototype.boo = function(y) {};   function boo(y) {};   return {for (var i = 0; i < numObjects; i++) {    yay: yay, new Obj1();    boo: boo}   } } var Obj2 = function() {  this.yay = function(x) {}; for (var i = 0; i < numObjects; i++) {  this.boo = function(y) {};  new Obj3(); } }for (var i = 0; i < numObjects; i++) { new Obj2();}
    25. 25. Double check your intuition...• http://jsperf.com• http://jsfiddle.net/
    26. 26. Web PagePerformance Tuning
    27. 27. Speed up game launch• Games are often asset loading bound• Consider a CDN (S3/Cloudfront)• 24bit vs 8bit files• Sprite maps• Async or Load on demand Javascript: • http://requirejs.org/ • http://headjs.com
    28. 28. Taking Javascript Home• Local Storage• Offline storage
    29. 29. Local StorageStore data on the client for later use.
    30. 30. Isn’t that just like a cookie?
    31. 31. Isn’t that just like a cookie? Yes and no
    32. 32. Local Storage vs. Cookies Sent Available Size Number Each on Limit Limit Request? Server? Local 5-10MB N/A No NoStorageCookies 4K 20 Yes Yes
    33. 33. Local Storage works for:• Firefox 3.5, Safari 4, IE8, Chrome 4+• Saving game state between visits without a server• Storing larger pieces of data
    34. 34. Testing for Local StorageTesting directly (From Dive Into HTML5)function supports_local_storage() { try { return localStorage in window && window[localStorage] !== null; } catch(e){ return false; }}Using Modernizrif (Modernizr.localstorage) { // Local Storage available}
    35. 35. Using Local Storage// Add an item to local storagetry { localStorage.setItem(identifierString, valueString); localStorage.identifierString = valueString;} catch(e) { if (e == QUOTA_EXCEEDED_ERR) { /* Do something */ }}// Retrieve an itemlocalStorage.getItem(identifierString);localStorage.identifierString;// Remove an itemlocalStorage.removeItem(identifierString);delete localStorage[identifierString];// Clear the entire per-domain DBlocalStorage.clear();
    36. 36. Strings only... Probably want to create an API on top of localStorageStorage.prototype.setObject = function(key, value) { this.setItem(key, JSON.stringify(value));} Storage.prototype.getObject = function(key) { return JSON.parse(this.getItem(key));}http://hacks.mozilla.org/2009/06/localstorage/
    37. 37. Better yet, use a library... http://www.jstorage.info/$.jStorage.set(key, value)value = $.jStorage.get(key)value = $.jStorage.get(key, "default value")Requires a library like jQuery, Prototype Backwards compatible with IE7
    38. 38. Other HTML5 Storage Options• sessionStorage - same as localStorage but per tab• Web SQL - Provides SQLite compatible DB storage - WebKit only - good for mobile sync
    39. 39. Offline Storage
    40. 40. Why?• Make apps available offline (Duh!)• Make mobile apps that sync when networked• Force browsers to keep assets available
    41. 41. The set-up1. Add a manifest file to your HTML: <html manifest="/cache.manifest">2. Make sure your manifest is served with: AddType text/cache-manifest .manifest3. Create the manifest listing cached files: CACHE MANIFEST /style.css /application.js /images/image1.jpg ... /images/imageN.jpg4. Listen for events on window.applicationCache
    42. 42. The Events on window.applicationCache Event When checking First event, checking for a manifest noupdate Manifest hasn’t changeddownloading Downloading the update progress Periodically while downloading Everything downloading, application cached cached A new cached is available, useupdateready swapCache() to swap out Something returned a 404, so cache obsolete is being deleted error Something, somewhere went wrong
    43. 43. But...If you have a simple app that you just want tobe cacheable online, you don’t need to doanything special
    44. 44. Gotcha’s• Disable server caching while testing or your will go insane• Make sure to update your manifest file each time you update a resource. e.g. “revisionXX”• Probably want to auto-generate your manifest file from a script so you aren’t missing files.
    45. 45. Javascript on the Server
    46. 46. Why?• Leverage existing javascript codebase• Async good support for realtime and Websockets
    47. 47. Introducing Node.js http://nodejs.org/• Built on Embedded Google V8 Engine• Check out nodejs.com for installation• Single threaded async• Lots of callbacks
    48. 48. Node Packages• NPM - node package manager, sort of like Rubygems for node• As easy as “npm install socket.io”• export NODE_PATH=/path/to/node/lib to use in node
    49. 49. Simplest Examplevar http = require(http);http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/plain}); res.end(Hello Worldn); }).listen(8124, "127.0.0.1");console.log(Server running at http://127.0.0.1:8124/);
    50. 50. WebSockets: the problem• Want realtime messaging• Not supported in older browsers• Removed from FF4 for the time being
    51. 51. WebSockets: a solution http://socket.io/•Supports native WebSockets•Has a fallback for flash•Handles it all for you
    52. 52. The Servervar http = require(http), io = require(socket.io), fs = require (fs),server = http.createServer(function(req, res){ fs.readFile("client/index.html", "binary", function(err, file) { res.writeHead(200, {Content-Type: text/html}); res.end(file); });});server.listen(8080);var socket = io.listen(server);socket.on(connection, function(client){ var messages = 0; console.log(New Client); client.on(message, function(message){ console.log(message); setTimeout(function() { client.send("Pong" + messages++); },500); }); client.on(disconnect, function(){ console.log(Client disconnected); });});
    53. 53. The Client<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>...<body><div id=status></div><script> var socket = new io.Socket("127.0.0.1"); socket.on(connect, function(){ $(#status).html(Connected!); socket.send("Ping"); }); socket.on(message, function(req){ $(#status).html("Received: " + req); setTimeout(function() { socket.send("Ping"); },500); }); socket.on(disconnect, function(){ $("#status").html("Disconnected"); }); socket.connect();</script>
    54. 54. Thanks! Pascal Rettigpascal@cykod.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×