Your JavaScript Library

67 %
33 %
Information about Your JavaScript Library
Technology

Published on November 5, 2009

Author: Dmitry.Baranovskiy

Source: slideshare.net

Description

Edge of the Web presentation on building 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?

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

#xxxxxx presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

5 JavaScript Libraries You'll Love - Web Design and ...

Explores 5 excellent JavaScript libraries that can take your JavaScript-powered websites and web apps to the next level.
Read more

Managing Your JavaScript Library in ASP.NET - CodeProject

Learn how to embed JavaScript into a DLL, manage dependencies, and avoid page bloat.; Author: AspDotNetDev; Updated: 10 Nov 2011; Section: ASP.NET; Chapter ...
Read more

Build Your First JavaScript Library - Code Envato Tuts+

Step 1: Creating the Library Boilerplate. We’ll start with some wrapper code, which will contain our whole library. It’s your typical immediately ...
Read more

How to build your own JavaScript library! - YouTube

In this tutorial I go over a super simple way to make your own library that is really similar to jQuery. I hope you like it! Please subscribe if ...
Read more

JavaScripting.com - The Database of JavaScript Libraries

A collection of the world's best client-side JavaScript libraries. ... AngularJS lets you write client-side web applications ... Follow @javascripting.
Read more

Creating your own JavaScript Library : Mike Does Web

Don’t know if you’ll answer this before I figure it out, but is there a way to access one function from the library in ANOTHER function of the library?
Read more

JavaScript.com

Learn JavaScript and stay connected with the latest news created and curated by the JavaScript community.
Read more

jQuery

jQuery: The Write Less, Do More, JavaScript Library. jQuery; ... Foundation to continue our work on our JavaScript libraries and pushing the open web ...
Read more

TaffyDB - The JavaScript Database

The JavaScript Database. An opensouce library that brings database features into your JavaScript applications. Introduction. How you ever noticed how ...
Read more