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

Specification todayXHR

Canvas 2003Requirement:

Drawing pictures in the browser

Why?LASERS!!!

HackTons of IMG’s in your DOM rendered with IM

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!

Specification someday?XDR, Cross-Origin Resource Sharing

Current state?

Handling binary data

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

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

Networking protocols

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

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

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 | schneider@uxebu.com

not your mother's javascript

cross domain ajax requirement

var data

domain x

hack var xhr

public web services

var img

hack tons of imgs

drawing pictures

Technology

javaone 2013: «java and javascript - shaken, not stirred»

mother's self-administered questionnaire: 0 not available

taking javascript seriously is not the worst idea

javascript language fundamentals. about javascript...

not your mother's health tips

javascript: best...

not your mother's ocm

24-jun-15 javascript language fundamentals. 2 about...

not your mother's apple pie

whatisjavascript? - computer...

building web sites: introduction to javascript...

not your mother's retirement or nursing home

javascript enlightenment - buffalo state...

not your mother's organizational change management

advanced javascript · javascript vs. browsers ‣...

mother's care

18-jun-15 javascript language fundamentals. 2 about...

mother's learning library: a mother's influence

mother's day

mother's love.ppt