Your JavaScript Library
Upcoming SlideShare
Loading in...5
×
 

Your JavaScript Library

on

  • 26,973 views

Edge of the Web presentation on building your JavaScript library.

Edge of the Web presentation on building your JavaScript library.

Statistics

Views

Total Views
26,973
Views on SlideShare
26,699
Embed Views
274

Actions

Likes
56
Downloads
636
Comments
8

20 Embeds 274

http://www.slideshare.net 109
http://onwebdev.blogspot.com 88
http://ignar.name 18
http://blog.ignar.name 11
http://onwebdev.blogspot.de 10
http://www.techgig.com 7
http://hi.chibaole.com 5
http://engl302n14fall2009.pbworks.com 4
http://www.proyectosenior.net 4
http://translate.googleusercontent.com 3
http://blog.gabrieleromanato.com 3
http://www.slideee.com 2
http://onwebdev.blogspot.com.es 2
http://onwebdev.blogspot.com.ar 2
http://onwebdev.blogspot.tw 1
http://onwebdev.blogspot.in 1
http://proyectosenior.net 1
http://onwebdev.blogspot.co.uk 1
http://www.linkedin.com 1
http://w2.hidemyass.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I'd really like to find this audio... anyone know where it might be?
    Are you sure you want to
    Your message goes here
    Processing…
  • 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?
    Are you sure you want to
    Your message goes here
    Processing…
  • thanks
    Are you sure you want to
    Your message goes here
    Processing…
  • @mangrar That was a whole point of the slide. Of course it works better when I talking next to slide.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Your JavaScript Library Your JavaScript Library Presentation Transcript

  • 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 Do j o jQ Ex t
  • 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--) { a[j] *= 2; }
  • function parseColour(colour) { // #XXXXXX var value = parseInt(colour.substring(1), 16); return { r: (value & 0xff0000) >> 16, g: (value & 0xff00) >> 8, b: value & 0xff, }; }
  • var parseColour = (function () { var cache = {}; return function (colour) { if (colour in cache) { return cache[colour]; } // calculation cache[colour] = value; return value; }; })();
  • 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; }; })();
  • JavaScript Rocks! presents... JavaScript Performance Rocks by Thomas Fuchs & Amy Hoy find more awesome JavaScript stuff at http://www.jsrocks.com
  • 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) { for (var i = 0; i < this; i++) { func(i); } };
  • Object.prototype
  • for (var value in cache) { this.setAttribute(value, cache[value]); } var horizontal = {left: 1, right: 1}; if (direction in horizontal) { this.horizontal(direction); }
  • 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); }
  • 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); }
  • 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 Prototype 80 Kb 24 Kb 121 Kb Raphaël 52 Kb 18 Kb Original Minified GZIP
  • 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
  • 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
  • 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
  • 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
  • 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
  • element.setAttribute("width", 320);
  • element.setAttribute("width", 320); var setAttribute = function (element, key, value) { element.setAttribute(key, value); } // ... setAttribute(element, "width", 320);
  • 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);
  • Error Handling
  • function setWidth(width) { width = parseFloat(width); if (isNaN(width)) { handleErrors("‘width’ is not a number"); } } function handleErrors(message) { throw new Error(message); }
  • 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."); } }
  • JSLint http://jslint.com/
  • Share the magic
  • Thank You http://dmitry.baranovskiy.com dmitry@baranovskiy.com Icons used with permission of Iconfactory