Tuesday, September 28, 2010
Not your mother’s JavaScript
Tobias Schneider, @tobeytailor - uxebuSep 26 2010, jsconf.eu
Tuesday, September 28, 2010
@tobeytailorMunich based web worker
Born as a natural coder in the Black ForrestJavaScript hacker for ~8 years now
Pushing limits for uxebu since August 2010
5 GitHub projects, 1626 watchers, 1143 followers3 bad jokes
Tuesday, September 28, 2010
So you’re a hacker, but why JavaScript?
Small, fast and widely misunderstoodMost flexible language of the world
It’s open & almost everywhereHack driven enhanced
You can haz jsconf
It isn’t perfect, still has lots of limits and constrains...
Tuesday, September 28, 2010
Constraints boost creativity“If you don't have the right equipment for the job, you just have to make it yourself.” (MacGyver)
Tuesday, September 28, 2010
Hack driven enhancementThe evolution of JavaScript is a history full of workarounds.
Tuesday, September 28, 2010
First, there’s a limitation
Tuesday, September 28, 2010
Then there’s a hack
Tuesday, September 28, 2010
The interwebs likes it?
Tuesday, September 28, 2010
Then it gets a buzzy name and becomes a
standard
Tuesday, September 28, 2010
Do you remember...AJAX in 2001?
Canvas before 2004?Cross Domain Ajax 2010?
Tuesday, September 28, 2010
AJAX 2001Requirement:
Requesting the server without reloading the whole page again & again & again...
Tuesday, September 28, 2010
AJAX 2001Requirement:
Requesting the server without reloading the whole page again & again & again...
Why?Loading data async
Tuesday, September 28, 2010
AJAX 2001Requirement:
Requesting the server without reloading the whole page again & again & again...
Why?Loading data async
HackiFrame fun
Tuesday, September 28, 2010
AJAX 2001Requirement:
Requesting the server without reloading the whole page again & again & again...
Why?Loading data async
HackiFrame fun
Specification todayXHR
Tuesday, September 28, 2010
Canvas 2003Requirement:
Drawing pictures in the browser
Tuesday, September 28, 2010
Canvas 2003Requirement:
Drawing pictures in the browser
Why?LASERS!!!
Tuesday, September 28, 2010
HackTons of IMG’s in your DOM rendered with IM
Canvas 2003Requirement:
Drawing pictures in the browser
Why?LASERS!!!
Tuesday, September 28, 2010
Canvas 2003Requirement:
Drawing pictures in the browser
Why?LASERS!!!
HackTons of IMG’s in your DOM rendered with IM
Specification todayCanvas API (ExCanvas!)
Tuesday, September 28, 2010
Cross Domain AjaxRequirement:
Having a script from domain X loading data from Y
Tuesday, September 28, 2010
Cross Domain AjaxRequirement:
Having a script from domain X loading data from Y
Why?e.g. Pulling public web services
Tuesday, September 28, 2010
Cross Domain AjaxRequirement:
Having a script from domain X loading data from Y
Why?e.g. Pulling public web services
HackJSONP
Tuesday, September 28, 2010
Cross Domain AjaxRequirement:
Having a script from domain X loading data from Y
Why?e.g. Pulling public web services
HackJSONP!
Tuesday, September 28, 2010
Cross Domain AjaxRequirement:
Having a script from domain X loading data from Y
Why?e.g. Pulling public web services
HackJSONP!
Specification someday?XDR, Cross-Origin Resource Sharing
Tuesday, September 28, 2010
Current state?
Tuesday, September 28, 2010
Handling binary data
Tuesday, September 28, 2010
Requirement?Dealing client-side with low level file formats and protocols
Tuesday, September 28, 2010
Why?
Tuesday, September 28, 2010
Low level file formatsParsing/Creating ZIP, PDF, SWF...
Tuesday, September 28, 2010
Networking protocols
http://github.com/kanaka/noVNCTuesday, September 28, 2010
Emulators
http://github.com/bfirsh/jsnes
http://www.kingsquare.nl/jsc64
Tuesday, September 28, 2010
The hackvar xhr = new XMLHttpRequest();
xhr.open("GET", "test.png", false);xhr.overrideMimeType("text/plain; charset=x-user-defined");xhr.send();
if(200 != xhr.status){ var data = xhr.responseText;
for(var i = 0; undefined != data[i++];) var byteValue = data.charCodeAt(i) & 0xff; ... }}
Tuesday, September 28, 2010
The hack?
Tuesday, September 28, 2010
The hack?http://github.com/pkrumins/node-png
var sys = require("sys"), fs = require("fs");
var Png = require("png").Png, data = fs.readFileSync("data.bin"), png = new Png(data, Buffer.length / 4, 1, "RGBA");
png.encode(function(png_image){ sys.print(png_image);});
var img = Image;
img.onload = function(){ ctx.drawImage(img, 0, 0); var data = ctx.getImageData(0, 0, this.width, this.height); ...};
img.src = "data.png";
Tuesday, September 28, 2010
Awesome, how to start hacking JavaScript?
Tuesday, September 28, 2010
1. Know the limits!I mean, know the limits!!
You can't push the limits when the limits aren't there to begin with.
Tuesday, September 28, 2010
2. Explore your browser’s microcosmos!
Missing API != Missing Feature
Tuesday, September 28, 2010
Inflating Zlib datavar scanln = "\x00" + zlibData, adler = readInt() + 65536,
uri = "data:image/png;base64," + btoa("\x89PNG\r\n\x1A\n" + buildChunk("IHDR", toInt(zlibData.length / 4) +
toInt(1) + "\x08\x06\x00\x00\x00") + buildChunk("IDAT", "\x78\x9c\x00\x01\x00\xfe\xff" + scanln + toInt(adler)) + buildChunk("IEND", '')),
img = new Image; img.src = uri;
...
ctx.drawImage(img, 0, 0);
var inflatedData = ctx.getImageData(0, 0, img.width, img.height).data);
Tuesday, September 28, 2010
Fake ctx.fillTextfunction fillText(ctx, font, textToDraw, x, y){ var img = new Image;
img.src = 'data:image/svg+xml,' + '<svg xmlns="http://www.w3.org/2000/svg">' + '<text x="' + x + '" y="' + y + '" ' + 'style="font:' + font + '">' + textToDraw + '</text>' + '</svg>';
ctx.drawImage(img, 0, 0);}
var ctx = document.body.appendChild( document.createElement("canvas")).getContext("2d");
fillText(ctx, "30px Arial", "Hello World!", 50, 50);
Tuesday, September 28, 2010
3. Watch out for paperclips and gums
Use the wrong tools for the right job.
Tuesday, September 28, 2010
Class autoloading["Person", "Ninja"].forEach(function(className){ window.__defineGetter__(className, function(){ return require(className + ".js"); });});
var person = new Person();
person.is_ninja = true;
if(person.is_ninja){ var ninji = new Ninja(person);}
Tuesday, September 28, 2010
def.js
http://github.com/tobeytailor/def.js
def ("Person") ({ init: function(name){ this.name = name; }});
def ("Ninja") < Person ({ init: function(name){ this._super(); }});
var ninjy = new Ninja("JDD");
Tuesday, September 28, 2010
Nonsense, yet
var1 += var2
Tuesday, September 28, 2010
Nonsense, yet
window.__defineGetter__("var1", function(){ console.log("Function 1");});
Tuesday, September 28, 2010
Nonsense, yet
window.__defineGetter__("var1", function(){ console.log("Function 1");
return { valueOf: function() { console.log("Function 3"); } }});
Tuesday, September 28, 2010
Nonsense, yet
window.__defineGetter__("var2", function(){ console.log("Function 2");
return { valueOf: function() { console.log("Function 4"); } }});
Tuesday, September 28, 2010
Nonsense, yet
window.__defineSetter__("var1", function(){ console.log("Function 5");});
Tuesday, September 28, 2010
Thanks.@tobeytailor | github.com/tobeytailor | [email protected]
Tuesday, September 28, 2010
Top Related