not your mother's javascript

Tuesday, September 28, 2010

Not your mother’s JavaScript

Tobias Schneider, @tobeytailor - uxebuSep 26 2010, jsconf.eu


@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


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...


Constraints boost creativity“If you don't have the right equipment for the job, you just have to make it yourself.” (MacGyver)


Hack driven enhancementThe evolution of JavaScript is a history full of workarounds.


First, there’s a limitation


Then there’s a hack


The interwebs likes it?


Then it gets a buzzy name and becomes a

standard


Do you remember...AJAX in 2001?

Canvas before 2004?Cross Domain Ajax 2010?


AJAX 2001Requirement:

Requesting the server without reloading the whole page again & again & again...




Why?Loading data async





HackiFrame fun





HackiFrame fun

Specification todayXHR


Canvas 2003Requirement:

Drawing pictures in the browser




Why?LASERS!!!


HackTons of IMG’s in your DOM rendered with IM



Why?LASERS!!!




Why?LASERS!!!

HackTons of IMG’s in your DOM rendered with IM

Specification todayCanvas API (ExCanvas!)


Cross Domain AjaxRequirement:

Having a script from domain X loading data from Y




Why?e.g. Pulling public web services





HackJSONP





HackJSONP!





HackJSONP!

Specification someday?XDR, Cross-Origin Resource Sharing


Current state?


Handling binary data


Requirement?Dealing client-side with low level file formats and protocols


Why?


Low level file formatsParsing/Creating ZIP, PDF, SWF...


Networking protocols

http://github.com/kanaka/noVNCTuesday, September 28, 2010

http://github.com/kanaka/noVNC

http://github.com/kanaka/noVNC

Emulators

http://github.com/bfirsh/jsnes

http://www.kingsquare.nl/jsc64






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


The hack?


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


http://github.com/pkrumins/node-png

http://github.com/pkrumins/node-png

Awesome, how to start hacking JavaScript?


1. Know the limits!I mean, know the limits!!

You can't push the limits when the limits aren't there to begin with.


2. Explore your browser’s microcosmos!

Missing API != Missing Feature


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


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


3. Watch out for paperclips and gums

Use the wrong tools for the right job.


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


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




Nonsense, yet

var1 += var2


Nonsense, yet

window.__defineGetter__("var1", function(){ console.log("Function 1");});


Nonsense, yet

window.__defineGetter__("var1", function(){ console.log("Function 1");

return { valueOf: function() { console.log("Function 3"); } }});


Nonsense, yet

window.__defineGetter__("var2", function(){ console.log("Function 2");

return { valueOf: function() { console.log("Function 4"); } }});


Nonsense, yet

window.__defineSetter__("var1", function(){ console.log("Function 5");});


Thanks.@tobeytailor | github.com/tobeytailor | [email protected]


http://github.com/tobeytailor

http://github.com/tobeytailor

mailto:[email protected]

mailto:[email protected]

not your mother's javascript

Technology

cross domain ajax requirement

var data

domain x

hack var xhr

public web services

var img

hack tons of imgs

drawing pictures