Edge of the Web presentation on building your JavaScript library.

1. Your JavaScript Library
Edge of the Web ’09
Dmitry Baranovskiy

2. http://www.atlassian.com/

3. http://raphaeljs.com/ http://g.raphaeljs.com/

4. Why should I write
a library of my own?

5. function trim(str) {
return str.replace(/^s+|s+$/g, "");
}
function $(id) {
return document.getElementById(id);
}

10. Low Level

11. High Level

12. Toolbox

13. Widgets

15. Prototype
Scriptaculous jQuery UI
gRaphaël
D
o
j
o
R
a
p
h
a
ë
l
jQuery
Ext

16. API & Functionality

17. Library is the answer.
So, what is the question?

18. Library is the answer.
So, what is the question?

19. Who is the target?
Java, Ruby, PHP, JavaScript…

20. Who is the target?
Java, Ruby, PHP, JavaScript…

21. “Everything should be made
as simple as possible,
but not simpler.”
Albert Einstein

22. JavaScript is your friend

23. Performance

24. 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;
}

25. function parseColour(colour) {
// #XXXXXX
var value = parseInt(colour.substring(1), 16);
return {
r: (value & 0xff0000) >> 16,
g: (value & 0xff00) >> 8,
b: value & 0xff,
};
}

26. var parseColour = (function () {
var cache = {};
return function (colour) {
if (colour in cache) {
return cache[colour];
}
// calculation
cache[colour] = value;
return value;
};
})();

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

28. Performance
Rocks
by Thomas Fuchs & Amy Hoy
JavaScript Rocks! presents...
find more awesome JavaScript stuff at http://www.jsrocks.com
JavaScript

29. Animation

30. Bulletproof

31. Global Scope

32. Global Scope
Treat it as a public toilet

33. var myLib = {
method1: function () {},
method2: function () {},
// ...
};

34. var myLib = {};
(function () {
var libVariable = 2;
myLib.method1 = function () {};
myLib.method2 = function () {};
})();

35. Native Prototypes

36. String.prototype.trim = function () {
return this.replace(/^s+|s+$/g, "");
};
Number.prototype.times = function (func) {
for (var i = 0; i < this; i++) {
func(i);
}
};

37. Object.prototype

38. for (var value in cache) {
this.setAttribute(value, cache[value]);
}
var horizontal = {left: 1, right: 1};
if (direction in horizontal) {
this.horizontal(direction);
}

39. 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);
}

40. 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);
}

41. function isArray(object) {
return object && (object instanceof Array);
}

42. Beware of <iframe>

43. function isArray(object) {
return Object.prototype.toString.call(object)
=== "[object Array]";
}

44. undefined

45. function setSomething(a) {
if (a == undefined) {
a = 5;
}
this.set(a);
}

46. var undefined;
function setSomething(a) {
if (a == undefined) {
a = 5;
}
this.set(a);
}

47. function setSomething(a) {
this.set(a || 5);
}

48. Packaging

49. Minify / Pack / Obfuscate

50. JSMin
Dojo ShrinkSafe
Packer
YUI Compressor

51. jQuery
Prototype
Raphaël
18 Kb
24 Kb
19 Kb
52 Kb
80 Kb
56 Kb
121 Kb
138 Kb
120 Kb
Original Minified GZIP

52. 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

53. 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(",");}
235 b
394 b

54. 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(",");
} 427 b
235 b
394 b

55. 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(",");
} 427 b
235 b
394 b

56. 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(",");}
216 b
427 b
235 b
394 b

57. element.setAttribute("width", 320);

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

59. 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);

60. Error Handling

61. function setWidth(width) {
width = parseFloat(width);
if (isNaN(width)) {
handleErrors("‘width’ is not a number");
}
}
function handleErrors(message) {
throw new Error(message);
}

62. 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.");
}
}

63. JSLint
http://jslint.com/

64. Share the magic

65. Thank You
Icons used with permission of Iconfactory
http://dmitry.baranovskiy.com
dmitry@baranovskiy.com