The document discusses the ECMAScript 5 (ECMA5) approach to writing JavaScript frameworks, focusing on concepts such as types, prototypes, APIs, and the implementation of custom types and inheritance. Key aspects include the use of `__proto__`, defining properties through `Object.defineProperty`, and implementing getters/setters to manage private data while allowing for public access. Additionally, it outlines a case study for creating a simple class system for drawing shapes using HTML5 canvas.

1. ECMA5 approach to writing JavaScript
frameworks
Anzor Bashkhaz
@anzor_b
Isaac Gordezky
@igordezky

2. ECMA5
What is ECMA5?
• ECMAScript = language of JavaScript
• Final draft for v5 presented in April 2009
• Object creation/manipulation
• Supported in all major platforms
http://kangax.github.io/es5-compat-table/

3. API design
What is an API?
• API exposes ways to use a library/framework
• Ex: underscore
• Users of API can’t see implementation
• aka. Public API

4. API: Real world example

5. Dissecting the JavaScript Object:
Type and Prototype
5

6. Type
What is a type?
• Instance factory
• JavaScript ‘Object’ is a type
• Made up of:
• Constructor (returns new instance)
• Static methods (create, call,…)
• Prototype

7. Type
What is a type?
• Instance factory
• JavaScript ‘Object’ is a type
• Made up of:
• Constructor (returns new instance)
• Static methods (create, call,…)
• Prototype

8. Prototype
What is a prototype?
• Prototype = definition for new instances
• = Public API
• Object.prototype

9. Prototype
What is a prototype?
• Prototype = definition for new instances
• = Public API
• Object.prototype

10. Inside an instance
Ex: Dissecting the instance of Object
var foo = {
hello : function(){
return “hello world”;
}
};
console.log(foo);

11. Inside an instance
Ex: Dissecting the instance of Object
var foo = {
hello : function(){
return “hello world”;
}
};
console.log(foo);

12. Inside an instance
Ex: Dissecting the instance of Object
var foo = {
hello : function(){
return “hello world”;
}
};
console.log(foo);
What is __proto__?

13. __proto__
“Special” property on every JavaScript Object.
• foo was created from Object.
var foo = {}
• __proto__ of foo points at prototype of Object.
• Object.create(definition)
• Returns object (instance) with __proto__ pointing at
definition
• Returned object can be Object.create’d again and again

14. __proto__
Ex: Prototype chain and simple inheritance
var foo = {};
var bar = Object.create(foo);

15. __proto__
Ex: Prototype chain and simple inheritance
var foo = {};
var bar = Object.create(foo);
bar inherits methods from foo, while foo inherits methods from Object.

16. 16
Demo

17. Custom Types
Ex: create type with name “type<Shape>”
var Shape = {};
Shape.constructor = { name: “type<Shape>" };
• Makes it easier to read in console versus “Object”

18. Custom Types
Ex: Add a prototype so instance are called “Shape”
• Add a prototype property
Shape.prototype = {};
• Set prototype.constructor.name to “Shape”
Shape.prototype.constructor = { name: “Shape” };

19. Custom Types – constructor
Ex: Add a constructor that returns instance of Shape
• Object.create() creates a new unique instance of Shape
Shape.create = function(){
return Object.create(Shape.prototype);
};
var shape1 = Shape.create();
var shape2 = Shape.create();
shape1.color = “blue”;

20. Custom Types – constructor
Ex: Add a constructor that returns instance of Shape
• Object.create() creates a new unique instance of Shape
Shape.create = function(){
return Object.create(Shape.prototype);
};
var shape1 = Shape.create();
var shape2 = Shape.create();
shape1.color = “blue”;

21. Properties
21

22. Defining Properties
• Good API design = preventing unintended use
• Read-only properties
Object.defineProperty(object, propertyName, descriptor)
• Descriptor
• Enumerable
• Configurable
• Writable
• Value
Read more at MDN (http://mzl.la/1cCtwPN)

23. Defining Properties
• Enumerable
true if the property is present while iterating through the object. (for prop in obj).
Defaults to false.
• Configurable
true if the property descriptor can be modified or property deleted on object.
Defaults to false.
• Writable
true if the property’s value can be changed? ( radius= 20)
Defaults to false.
• Value
Value of the property

24. Defining Properties
var Shape = {};
Object.defineProperty(Shape, “constructor”,
{
value: { name: “type<Shape>” }
});
Object.defineProperty(Shape, “prototype”,
{
value: {}
});
Object.defineProperty(Shape.prototype, “constructor”,
{
value: { name: “Shape” }
});

25. Defining Properties
Original (assignment)
ECMA5
(Object.defineProperty)
Read-only properties guard the API from unintended use.

26. Public vs. Private
26

27. Private
Ex: Add a private area to instances of Shape
Shape.create = function() {
var privateArea = {
public : Object.create(Shape.prototype),
secret : 5,
}
return privateArea.public;
};
var shape1 = Shape.create();
shape1.color = “blue”;

28. Private
Ex: Add methods to inspect the private area
Shape.create = function() {
var privateArea = {
public : Object.create(Shape.prototype),
secret : Math.floor((Math.random() * 10) + 1), //random secret per instance
privateInspect : function() {
console.log(this); //this points at instance
}
};
//public inspect function
privateArea.public.inspect = function() {
return privateArea.privateInspect();
};
return privateArea.public;
};

29. Private
Result:

30. Getters and Setters
30

31. Getters and Setters
• Important concept in framework design (especially UI)
• Backbone.js uses “set()” method
Ex: model.set(propertyName, value);
> “change” event triggered
> Views update their UI
• Ideally we want:
shape1.color = “blue”;
> This should trigger a color change (using DOM/canvas)
• Possible with Object.defineProperty
ECMA5 way to define setters/getters

32. Getters and Setters
Ex: Define setter for color to notify of change
var circle = {},
var currentValue;
Object.defineProperty(circle, “color”,
{
get: function(){
return currentValue;
},
set : function(value){
currentValue = value;
console.log(“color changed to “ + value);
}
});

33. Getters and Setters
Ex: Define setter for color to notify of change
var circle = {},
var currentValue;
Object.defineProperty(circle, “color”,
{
get: function(){
return currentValue;
},
set : function(value){
currentValue = value;
console.log(“color changed to “ + value);
}
});

34. Getters and Setters
Ex: Helper function for defining properties
var defineProperty = function(object, propertyName) {
Object.defineProperty(object, propertyName, {
get : function() {
return object[propertyName];
},
set : function(value) {
object[propertyName] = value;
console.log(propertyName + "changed to " + value);
}
});
};
var circle2 = {};
defineProperty(circle2, "color");

35. Beyond Private
Covered so far:
Public
• Leverages inheritance pattern
• Final instance has access to all methods in __proto__ chain
Private
• Instance specific data unexposed to the outside
What about inheriting non-public methods?
Protected to the rescue!
Protected
• Leverages inheritance pattern
• Allows child types to re-implement methods from their parents.
• Provides non-public APIs to child types.

36. The extend! Requirejs plugin
36

37. extend!
• Declarative syntax for public, private and protected
functions
• hooks for init and destroy
• Public values are defined as:
• Property getters/setters on public
• Property stored in privateArea
• Non-functions in public create notifiable properties
Ex: size triggers sizeChanged()
• All methods have ‘this’ pointing to the privateArea
• Uses require.js’ plugin system to hide parser

38. Case Study: A Simple Class System
38

39. Shapes
Objective: Build an API to draw shapes using HTML5 canvas.
type<Shape>
• Manage canvas and DOM
• Properties: color
• Protected interface: resize
• Abstract interface: draw
type<Circle> extends type<Shape>
• Implements draw interface
• Properties: radius
• Leverages resize interface

40. Shape.color: a property
Shape.color (Public)
• Property available on any shape object
Shape.colorChanged (Private)
• Automatically triggered when the color
property is changed
• Triggers a re-draw
Shape.color (Private)
• Stores the value of color in Shape’s privateArea
• Allows Shape’s methods to access color
without the setter/getter

41. Shape.resize: a protected interface
Size
• Public read-only property of Shape
• Stored in the privateArea of Shape
Resize
• Exposed to child types through protected
• Sets size in the privateArea of Shape
• Resizes DOM elements
Radius
• Public property of Circle
• Triggers protected Shape.resize

42. Shape.draw: a virtual method
Shape.draw (Public)
• Public draw API for all Shapes
• Calls virtual draw with canvas context
from Shape’s privateArea
Shape.draw (Protected)
• Abstract protected draw function
must be overridden by child classes
Circle.draw (Protected)
• Overrides Shape.draw (Protected)
• Doesn’t know or care where context
came from

43. Demo
43

44. Thank you
Anzor Bashkhaz
@anzor_b
Isaac Gordezky
@igordezky