0
Your JavaScript Library
       Edge of the Web ’09
        Dmitry Baranovskiy
http://www.atlassian.com/
http://raphaeljs.com/   http://g.raphaeljs.com/
Why should I write
a library of my own?
function trim(str) {
    return str.replace(/^s+|s+$/g, "");
}

function $(id) {
    return document.getElementById(id);
}
Low Level
High Level
Toolbox
Widgets
Scr i p t ac u l o us    gR a ph aël            jQuery UI



Pr o to t ype

                    ue r y
    R a ph aël




...
API & Functionality
Library is the answer.
So, what is the question?
Library is the answer.
So, what is the question?
Who is the target?
Java, Ruby, PHP, JavaScript…
Who is the target?
Java, Ruby, PHP, JavaScript…
“Everything should be made
   as simple as possible,
     but not simpler.”


                 Albert Einstein
JavaScript is your friend
Performance
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (var i = 0; i < a.length; i++) {
    a[i] *= 2;
}

var j = a.length;
while (j--)...
function parseColour(colour) {
    // #XXXXXX
    var value = parseInt(colour.substring(1), 16);
    return {
        r: (...
var parseColour = (function () {
    var cache = {};
    return function (colour) {
        if (colour in cache) {
       ...
var parseColour = (function () {
    var cache = {},
        count = [];
    return function (colour) {
        if (colour...
JavaScript Rocks! presents...




                         JavaScript
                       Performance
                 ...
Animation
Bulletproof
Global Scope
Global Scope

Treat it as a public toilet
var myLib = {
    method1: function () {},
    method2: function () {},
    // ...
};
var myLib = {};
(function () {
    var libVariable = 2;
    myLib.method1 = function () {};
    myLib.method2 = function (...
Native Prototypes
String.prototype.trim = function () {
    return this.replace(/^s+|s+$/g, "");
};
Number.prototype.times = function (func)...
Object.prototype
for (var value in cache) {
    this.setAttribute(value, cache[value]);
}

var horizontal = {left: 1, right: 1};
if (direct...
Object.prototype.top = 3;

// ...

for (var value in cache) {
    this.setAttribute(value, cache[value]);
}

var horizonta...
Object.prototype.top = 3;

// ...

for (var value in cache) {
    if (cache.hasOwnProperty(value)) {
        this.setAttri...
function isArray(object) {
    return object && (object instanceof Array);
}
Beware of <iframe>
function isArray(object) {
    return Object.prototype.toString.call(object)
=== "[object Array]";
}
undefined
function setSomething(a) {
    if (a == undefined) {
        a = 5;
    }
    this.set(a);
}
var undefined;
function setSomething(a) {
    if (a == undefined) {
        a = 5;
    }
    this.set(a);
}
function setSomething(a) {
    this.set(a || 5);
}
Packaging
Minify / Pack / Obfuscate
JSMin
Dojo ShrinkSafe
     Packer
YUI Compressor
120 Kb
   jQuery               56 Kb
            19 Kb

                                                          138 Kb
P...
function calculate(value) {
    if (typeof value == "number") {
        return parseFloat(value);
    }
    if (isArray(va...
function calculate(c){if(typeof c=="number"){return
parseFloat(c);}if(isArray(c)){var
b=c.length;while(b--){c[b]=parseFloa...
function calculate(value) {
    var parseFloat = parseFloat;
    if (typeof value == "number") {
        return parseFloat...
function calculate(value) {
    var parseFloat = parseFloat;
    if (typeof value == "number") {
        return parseFloat...
function calculate(d){var b=b;if(typeof d=="number")
{return b(d);}if(isArray(d)){var
c=d.length;while(c--){d[c]=b(d[c]);}...
element.setAttribute("width", 320);
element.setAttribute("width", 320);

var setAttribute = function (element, key, value) {
    element.setAttribute(key, val...
element.setAttribute("width", 320);

var setAttribute = function (element, key, value) {
    element.setAttribute(key, val...
Error Handling
function setWidth(width) {
    width = parseFloat(width);
    if (isNaN(width)) {
        handleErrors("‘width’ is not a n...
function update(x, y, width, height) {
    try {
        this.setX(x);
        this.setY(y);
        this.setWidth(width);...
JSLint

http://jslint.com/
Share the magic
Thank You
     http://dmitry.baranovskiy.com
        dmitry@baranovskiy.com



Icons used with permission of Iconfactory
Your JavaScript Library
Your JavaScript Library
Your JavaScript Library
Your JavaScript Library
Your JavaScript Library
Upcoming SlideShare
Loading in...5
×

Your JavaScript Library

23,746

Published on

Edge of the Web presentation on building your JavaScript library.

Published in: Technology
8 Comments
60 Likes
Statistics
Notes
  • I'd really like to find this audio... anyone know where it might be?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi,
    I am looking for the audio for this talk.
    Couldn't find it on the Edge of the Web website.
    Does anyone know if there is an audio of this talk floating around the internet?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @mangrar That was a whole point of the slide. Of course it works better when I talking next to slide.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • About the for loop in the slide 24, don't you think this is better?:

    var arrLength = a.length;
    for(var i=0; i<arrLength ; i++)....

    In your sample, in any iteration you call a.length, with acces to arrLength var you get better performance, I think, because you only call a.length one time.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
23,746
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
668
Comments
8
Likes
60
Embeds 0
No embeds

No notes for slide

Transcript of "Your JavaScript Library"

  1. 1. Your JavaScript Library Edge of the Web ’09 Dmitry Baranovskiy
  2. 2. http://www.atlassian.com/
  3. 3. http://raphaeljs.com/ http://g.raphaeljs.com/
  4. 4. Why should I write a library of my own?
  5. 5. function trim(str) { return str.replace(/^s+|s+$/g, ""); } function $(id) { return document.getElementById(id); }
  6. 6. Low Level
  7. 7. High Level
  8. 8. Toolbox
  9. 9. Widgets
  10. 10. Scr i p t ac u l o us gR a ph aël jQuery UI Pr o to t ype ue r y R a ph aël Do j o jQ Ex t
  11. 11. API & Functionality
  12. 12. Library is the answer. So, what is the question?
  13. 13. Library is the answer. So, what is the question?
  14. 14. Who is the target? Java, Ruby, PHP, JavaScript…
  15. 15. Who is the target? Java, Ruby, PHP, JavaScript…
  16. 16. “Everything should be made as simple as possible, but not simpler.” Albert Einstein
  17. 17. JavaScript is your friend
  18. 18. Performance
  19. 19. var a = [1, 2, 3, 4, 5, 6, 7, 8, 9]; for (var i = 0; i < a.length; i++) { a[i] *= 2; } var j = a.length; while (j--) { a[j] *= 2; }
  20. 20. function parseColour(colour) { // #XXXXXX var value = parseInt(colour.substring(1), 16); return { r: (value & 0xff0000) >> 16, g: (value & 0xff00) >> 8, b: value & 0xff, }; }
  21. 21. var parseColour = (function () { var cache = {}; return function (colour) { if (colour in cache) { return cache[colour]; } // calculation cache[colour] = value; return value; }; })();
  22. 22. var parseColour = (function () { var cache = {}, count = []; return function (colour) { if (colour in cache) { return cache[colour]; } // calculation cache[colour] = value; count.push(colour); if (count.length > 1000) { delete cache[count.shift()]; } return value; }; })();
  23. 23. JavaScript Rocks! presents... JavaScript Performance Rocks by Thomas Fuchs & Amy Hoy find more awesome JavaScript stuff at http://www.jsrocks.com
  24. 24. Animation
  25. 25. Bulletproof
  26. 26. Global Scope
  27. 27. Global Scope Treat it as a public toilet
  28. 28. var myLib = { method1: function () {}, method2: function () {}, // ... };
  29. 29. var myLib = {}; (function () { var libVariable = 2; myLib.method1 = function () {}; myLib.method2 = function () {}; })();
  30. 30. Native Prototypes
  31. 31. String.prototype.trim = function () { return this.replace(/^s+|s+$/g, ""); }; Number.prototype.times = function (func) { for (var i = 0; i < this; i++) { func(i); } };
  32. 32. Object.prototype
  33. 33. for (var value in cache) { this.setAttribute(value, cache[value]); } var horizontal = {left: 1, right: 1}; if (direction in horizontal) { this.horizontal(direction); }
  34. 34. Object.prototype.top = 3; // ... for (var value in cache) { this.setAttribute(value, cache[value]); } var horizontal = {left: 1, right: 1}; if (direction in horizontal) { this.horizontal(direction); }
  35. 35. Object.prototype.top = 3; // ... for (var value in cache) { if (cache.hasOwnProperty(value)) { this.setAttribute(value, cache[value]); } } var horizontal = {left: 1, right: 1}; if (horizontal.hasOwnProperty(direction)) { this.horizontal(direction); }
  36. 36. function isArray(object) { return object && (object instanceof Array); }
  37. 37. Beware of <iframe>
  38. 38. function isArray(object) { return Object.prototype.toString.call(object) === "[object Array]"; }
  39. 39. undefined
  40. 40. function setSomething(a) { if (a == undefined) { a = 5; } this.set(a); }
  41. 41. var undefined; function setSomething(a) { if (a == undefined) { a = 5; } this.set(a); }
  42. 42. function setSomething(a) { this.set(a || 5); }
  43. 43. Packaging
  44. 44. Minify / Pack / Obfuscate
  45. 45. JSMin Dojo ShrinkSafe Packer YUI Compressor
  46. 46. 120 Kb jQuery 56 Kb 19 Kb 138 Kb Prototype 80 Kb 24 Kb 121 Kb Raphaël 52 Kb 18 Kb Original Minified GZIP
  47. 47. function calculate(value) { if (typeof value == "number") { return parseFloat(value); } if (isArray(value)) { var i = value.length; while (i--) value[i] = parseFloat(value[i]); return value.join(","); } var values = value.split(","), i = values.length; while (i--) values[i] = parseFloat(values[i]); return values.join(","); } 394 b
  48. 48. function calculate(c){if(typeof c=="number"){return parseFloat(c);}if(isArray(c)){var b=c.length;while(b--){c[b]=parseFloat(c[b]);}return c.join(",");}var a=c.split(","),b=a.length;while(b--) {a[b]=parseFloat(a[b]);}return a.join(",");} 394 b 235 b
  49. 49. function calculate(value) { var parseFloat = parseFloat; if (typeof value == "number") { return parseFloat(value); } if (isArray(value)) { var i = value.length; while (i--) value[i] = parseFloat(value[i]); return value.join(","); } var values = value.split(","), i = values.length; while (i--) values[i] = parseFloat(values[i]); return values.join(","); } 394 b 235 b 427 b
  50. 50. function calculate(value) { var parseFloat = parseFloat; if (typeof value == "number") { return parseFloat(value); } if (isArray(value)) { var i = value.length; while (i--) value[i] = parseFloat(value[i]); return value.join(","); } var values = value.split(","), i = values.length; while (i--) values[i] = parseFloat(values[i]); return values.join(","); } 394 b 235 b 427 b
  51. 51. function calculate(d){var b=b;if(typeof d=="number") {return b(d);}if(isArray(d)){var c=d.length;while(c--){d[c]=b(d[c]);}return d.join(",");}var a=d.split(","),c=a.length;while(c--) {a[c]=b(a[c]);}return a.join(",");} 394 b 235 b 427 b 216 b
  52. 52. element.setAttribute("width", 320);
  53. 53. element.setAttribute("width", 320); var setAttribute = function (element, key, value) { element.setAttribute(key, value); } // ... setAttribute(element, "width", 320);
  54. 54. element.setAttribute("width", 320); var setAttribute = function (element, key, value) { element.setAttribute(key, value); } // ... setAttribute(element, "width", 320); var setAttribute = "setAttribute"; // ... element[setAttribute]("width", 320);
  55. 55. Error Handling
  56. 56. function setWidth(width) { width = parseFloat(width); if (isNaN(width)) { handleErrors("‘width’ is not a number"); } } function handleErrors(message) { throw new Error(message); }
  57. 57. function update(x, y, width, height) { try { this.setX(x); this.setY(y); this.setWidth(width); this.setHeight(height); } catch (err) { throw new Error("Some error happened… Somewhere."); } }
  58. 58. JSLint http://jslint.com/
  59. 59. Share the magic
  60. 60. Thank You http://dmitry.baranovskiy.com dmitry@baranovskiy.com Icons used with permission of Iconfactory
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×