Tuesday, September 28, 2010
Not your mother’s
                                 JavaScript
                              Tobias Schneider, @tobeytailor...
@tobeytailor
                                  Munich based web worker
                          Born as a natural coder i...
So you’re a hacker,
                        but why JavaScript?
                              Small, fast and widely misun...
Constraints boost creativity
          “If you don't have the right equipment for the job, you just have to make it yourse...
Hack driven enhancement
                  The evolution of JavaScript is a history full of workarounds.




Tuesday, Septe...
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?
  ...
AJAX 2001
                                  Requirement:
                 Requesting the server without reloading the whol...
AJAX 2001
                                  Requirement:
                 Requesting the server without reloading the whol...
AJAX 2001
                                  Requirement:
                 Requesting the server without reloading the whol...
AJAX 2001
                                  Requirement:
                 Requesting the server without reloading the whol...
Canvas 2003
                                      Requirement:
                              Drawing pictures in the brows...
Canvas 2003
                                      Requirement:
                              Drawing pictures in the brows...
Canvas 2003
                                           Requirement:
                                   Drawing pictures in...
Canvas 2003
                                           Requirement:
                                   Drawing pictures in...
Cross Domain Ajax
                                      Requirement:
                    Having a script from domain X loa...
Cross Domain Ajax
                                      Requirement:
                    Having a script from domain X loa...
Cross Domain Ajax
                                      Requirement:
                    Having a script from domain X loa...
Cross Domain Ajax
                                      Requirement:
                    Having a script from domain X loa...
Cross Domain Ajax
                                      Requirement:
                    Having a script from domain X loa...
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 formats
                              Parsing/Creating ZIP, PDF, SWF...




Tuesday, September 28, 2010
Networking protocols




                              http://github.com/kanaka/noVNC
Tuesday, September 28, 2010
Emulators




   http://github.com/bfirsh/jsnes
                                 http://www.kingsquare.nl/jsc64

Tuesday, S...
The hack
            var xhr = new XMLHttpRequest();

            xhr.open("GET", "test.png", false);
            xhr.over...
The hack?




Tuesday, September 28, 2010
The hack?
                              http://github.com/pkrumins/node-png
            var sys = require("sys"),
        ...
Awesome, how to
                               start hacking
                                JavaScript?


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

                              Yo...
2. Explore your browser’s
           microcosmos!
                              Missing API != Missing Feature




Tuesday...
Inflating Zlib data
         var scanln = "x00" + zlibData,
             adler = readInt() + 65536,

                uri =...
Fake ctx.fillText
                     function fillText(ctx, font, textToDraw, x, y){
                       var img = ne...
3. Watch out for
                     paperclips and gums
                              Use the wrong tools for the right ...
Class autoloading
                         ["Person", "Ninja"].forEach(function(className){
                           win...
def.js
                                   def ("Person") ({
                                       init: function(name){
 ...
Nonsense, yet


                                  var1 += var2




Tuesday, September 28, 2010
Nonsense, yet


                              window.__defineGetter__("var1", function(){
                                ...
Nonsense, yet

                              window.__defineGetter__("var1", function(){
                                c...
Nonsense, yet

                              window.__defineGetter__("var2", function(){
                                c...
Nonsense, yet


                              window.__defineSetter__("var1", function(){
                                ...
Thanks.
                @tobeytailor | github.com/tobeytailor | schneider@uxebu.com




Tuesday, September 28, 2010
Upcoming SlideShare
Loading in …5
×

Not your mother's JavaScript

8,602 views

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,602
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
52
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Not your mother's JavaScript

  1. Tuesday, September 28, 2010
  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
  7. First, there’s a limitation Tuesday, September 28, 2010
  8. Then there’s a hack Tuesday, September 28, 2010
  9. The interwebs likes it? 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
  25. Current state? Tuesday, September 28, 2010
  26. Handling binary data Tuesday, September 28, 2010
  27. Requirement? Dealing client-side with low level file formats and protocols Tuesday, September 28, 2010
  28. Why? Tuesday, September 28, 2010
  29. Low level file formats Parsing/Creating ZIP, PDF, SWF... Tuesday, September 28, 2010
  30. Networking protocols http://github.com/kanaka/noVNC Tuesday, September 28, 2010
  31. Emulators http://github.com/bfirsh/jsnes http://www.kingsquare.nl/jsc64 Tuesday, September 28, 2010
  32. 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; ... } } Tuesday, September 28, 2010
  33. The hack? Tuesday, September 28, 2010
  34. 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
  35. Awesome, how to start hacking JavaScript? Tuesday, September 28, 2010
  36. 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
  37. 2. Explore your browser’s microcosmos! Missing API != Missing Feature Tuesday, September 28, 2010
  38. 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; ... ctx.drawImage(img, 0, 0); var inflatedData = ctx.getImageData(0, 0, img.width, img.height).data); 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
  44. Nonsense, yet window.__defineGetter__("var1", function(){ console.log("Function 1"); }); Tuesday, September 28, 2010
  45. Nonsense, yet window.__defineGetter__("var1", function(){ console.log("Function 1"); return { valueOf: function() { console.log("Function 3"); } } }); Tuesday, September 28, 2010
  46. Nonsense, yet window.__defineGetter__("var2", function(){ console.log("Function 2"); return { valueOf: function() { console.log("Function 4"); } } }); Tuesday, September 28, 2010
  47. Nonsense, yet window.__defineSetter__("var1", function(){ console.log("Function 5"); }); Tuesday, September 28, 2010
  48. Thanks. @tobeytailor | github.com/tobeytailor | schneider@uxebu.com Tuesday, September 28, 2010

×