Your JavaScript Library

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?

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; }; })();

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

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

http://www.slideshare.net	109
http://onwebdev.blogspot.com	35
http://ignar.name	18
http://blog.ignar.name	11
http://hi.chibaole.com	5
http://engl302n14fall2009.pbworks.com	4
http://www.proyectosenior.net	4
http://translate.googleusercontent.com	3
http://w2.hidemyass.com	1
http://proyectosenior.net	1

Your JavaScript Library

by Dmitry Baranovskiy on Nov 04, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

Embed Views

Statistics

Your JavaScript Library — Presentation Transcript

Get analytics right now with SlideShare PRO

An effective way to find out who is viewing your content

Remove ads from all your pages with SlideShare PRO

Your viewers will engage with your content, not ads