2. Not your mother’s
JavaScript
Tobias Schneider, @tobeytailor - uxebu
Sep 26 2010, jsconf.eu
Tuesday, September 28, 2010
3. @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
Tuesday, September 28, 2010
4. 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...
Tuesday, September 28, 2010
5. 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
6. Hack driven enhancement
The evolution of JavaScript is a history full of workarounds.
Tuesday, September 28, 2010
10. Then it gets a buzzy
name and becomes a
standard
Tuesday, September 28, 2010
11. Do you remember...
AJAX in 2001?
Canvas before 2004?
Cross Domain Ajax 2010?
Tuesday, September 28, 2010
12. AJAX 2001
Requirement:
Requesting the server without reloading the whole
page again & again & again...
Tuesday, September 28, 2010
13. AJAX 2001
Requirement:
Requesting the server without reloading the whole
page again & again & again...
Why?
Loading data async
Tuesday, September 28, 2010
14. AJAX 2001
Requirement:
Requesting the server without reloading the whole
page again & again & again...
Why?
Loading data async
Hack
iFrame fun
Tuesday, September 28, 2010
15. AJAX 2001
Requirement:
Requesting the server without reloading the whole
page again & again & again...
Why?
Loading data async
Hack
iFrame fun
Specification today
XHR
Tuesday, September 28, 2010
16. Canvas 2003
Requirement:
Drawing pictures in the browser
Tuesday, September 28, 2010
17. Canvas 2003
Requirement:
Drawing pictures in the browser
Why?
LASERS!!!
Tuesday, September 28, 2010
18. Canvas 2003
Requirement:
Drawing pictures in the browser
Why?
LASERS!!!
Hack
Tons of IMG’s in your DOM rendered with IM
Tuesday, September 28, 2010
19. Canvas 2003
Requirement:
Drawing pictures in the browser
Why?
LASERS!!!
Hack
Tons of IMG’s in your DOM rendered with IM
Specification today
Canvas API (ExCanvas!)
Tuesday, September 28, 2010
20. Cross Domain Ajax
Requirement:
Having a script from domain X loading data from Y
Tuesday, September 28, 2010
21. Cross Domain Ajax
Requirement:
Having a script from domain X loading data from Y
Why?
e.g. Pulling public web services
Tuesday, September 28, 2010
22. Cross Domain Ajax
Requirement:
Having a script from domain X loading data from Y
Why?
e.g. Pulling public web services
Hack
JSONP
Tuesday, September 28, 2010
23. Cross Domain Ajax
Requirement:
Having a script from domain X loading data from Y
Why?
e.g. Pulling public web services
Hack
JSONP!
Tuesday, September 28, 2010
24. Cross Domain Ajax
Requirement:
Having a script from domain X loading data from Y
Why?
e.g. Pulling public web services
Hack
JSONP!
Specification someday?
XDR, Cross-Origin Resource Sharing
Tuesday, September 28, 2010
39. 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>';
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
40. 3. Watch out for
paperclips and gums
Use the wrong tools for the right job.
Tuesday, September 28, 2010
41. 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
42. 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
Tuesday, September 28, 2010
43. Nonsense, yet
var1 += var2
Tuesday, September 28, 2010