Not your mother's JavaScript

Not your mother’s
JavaScript
Tobias Schneider, @tobeytailor - uxebu
Sep 26 2010, jsconf.eu

Tuesday, September 28, 2010

@tobeytailor
Munich based web worker
Born as a natural coder in the Black Forrest
JavaScript hacker for ~8 years now
Pushing limits for uxebu since August 2010

5 GitHub projects, 1626 watchers, 1143 followers
3 bad jokes

So you’re a hacker,
but why JavaScript?
Small, fast and widely misunderstood
Most flexible language of the world
It’s open & almost everywhere
Hack 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 enhancement
The 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 2001
Requirement:
Requesting the server without reloading the whole
page again & again & again...


AJAX 2001
Requirement:
Why?
Loading data async


AJAX 2001
Requirement:
Why?
Loading data async

Hack
iFrame fun


AJAX 2001
Requirement:
Why?
Loading data async

Hack
iFrame fun

Specification today
XHR


Canvas 2003
Requirement:
Drawing pictures in the browser


Canvas 2003
Requirement:

Why?
LASERS!!!


Canvas 2003
Requirement:

Why?
LASERS!!!

Hack
Tons of IMG’s in your DOM rendered with IM


Canvas 2003
Requirement:

Why?
LASERS!!!

Hack
Tons of IMG’s in your DOM rendered with IM

Specification today
Canvas API (ExCanvas!)


Cross Domain Ajax
Requirement:
Having a script from domain X loading data from Y


Cross Domain Ajax
Requirement:

Why?
e.g. Pulling public web services


Cross Domain Ajax
Requirement:

Why?

Hack
JSONP


Cross Domain Ajax
Requirement:

Why?

Hack
JSONP!


Cross Domain Ajax
Requirement:

Why?

Hack
JSONP!

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 formats
Parsing/Creating ZIP, PDF, SWF...


Networking protocols

http://github.com/kanaka/noVNC

Emulators

http://github.com/bﬁrsh/jsnes
http://www.kingsquare.nl/jsc64


The hack
var 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";


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 data
var scanln = "x00" + zlibData,
adler = readInt() + 65536,

uri = "data:image/png;base64," + btoa("x89PNGrnx1An" +
buildChunk("IHDR", toInt(zlibData.length / 4) +
toInt(1) + "x08x06x00x00x00") +
buildChunk("IDAT", "x78x9cx00x01x00xfexff" + scanln + toInt(adler)) +
buildChunk("IEND", '')),

img = new Image;
img.src = uri;

...


var inflatedData = ctx.getImageData(0, 0, img.width, img.height).data);


Fake ctx.fillText
function 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>';

}

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
def ("Person") ({
init: function(name){
this.name = name;
}
});

def ("Ninja") < Person ({
init: function(name){
this._super();
}
});

var ninjy = new Ninja("JDD");

http://github.com/tobeytailor/def.js


Nonsense, yet

var1 += var2


Nonsense, yet

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


Nonsense, yet


return {
valueOf: function() {
}
}
});


Nonsense, yet

window.__defineSetter__("var1", function(){
});


Thanks.
@tobeytailor | github.com/tobeytailor | schneider@uxebu.com


Not your mother's JavaScript

More Related Content

Similar to Not your mother's JavaScript (20)

Recently uploaded (20)

Not your mother's JavaScript