Bringing classical OOP into
JavaScript
By Dmitry Sheiko
Who's the dude?
I'm Dmitry Sheiko, a web developer, blogger,
open source contributor.
http://dsheiko.com
@sheiko
https://g...
Eager to be a better coder?
Reading helps…
Reflecting learned patterns on JavaScript
What the hell?! Where are all the
classes, interfaces, members visibility,
names...
JavaScript is a class-free language
“JavaScript: The
World's Most
Misunderstood
Programming
Language”
Yet JavaScript is incredibly expressive
“The expressiveness of JavaScript provides
an enormous amount of power. Even
thoug...
Make of JavaScript the language you need
As a class-based OOP programmer I would bring
to JavaScript following :
• classes...
What look like objects in JavaScript
Somehow clumsy, isn’t it?
var o, SuperTypeConstruct = function() {}, ConstructorFunc ...
What I want it to look like
var ConcreteClass = function() {
// Constructor's job
var _privateMember = "private member";
r...
Can it inherit?
With a factory it can:
Function.prototype.createInstance = function () {
var key, module = this, members =...
What about interfaces, mixins and so on?
We add with a hook any object creation
control flow that we wish. Let’s just chan...
JSA Way
JSA is a light-weight library comprising
factory plugins to “make of JavaScript the
language I want”. Let’s see wh...
Widget foundation class
As good programmers we learn from the
great ones, don’t we? So, let’s borrow from
YUI guys some id...
Widget abstract layer in JSA
Widget plugin declares BaseAbstract class,
which makes the factory (via a hook) to auto-
call...
Usage example
(function( $, jsa ) {
Widget = function( settings ) {
// event handlers
_handler = {
onclick : function(e) {...
Mixins
Mixins provide aggregation
(has-a) relation between
objects, which is easy to
implement especially is
JavaScript. M...
Usage example
var MixinA = {
propertyA: "propertyA"
},
MixinB = {
propertyB: "propertyB"
},
Silo = function() {
return {
_...
Interfaces
Interface plugin assigns a hook,
which checks if the newly born
object meets the requirements of
the interfaces...
Usage example
var ConcreteInterface = {
requeriedMethod : ["string”]
},
StrictModule = function() {
return {
__implements_...
Design by Contract
Design by Contract approach
provides another and more
sophisticated solution of defining
requirements f...
Usage example
var ConcreteContract = {
methodA : {
onEntry: [ "number" ],
validators: [ function(arg){
return arg > 10;
} ...
Fork me!
JSA project page:
Articles relevant to JSA
http://dsheiko.com/weblog/js-application-design
http://dsheiko.com/web...
Upcoming SlideShare
Loading in …5
×

Bringing classical OOP into JavaScript

1,982 views

Published on

Any diligent developer is constantly working on improving his or her code. There are plenty of books telling how to make your code better. However most of them use the language of class-based OOP. Reader must have enough of experience to reflect those classical design patterns on JavaScript. Thus, many and many developers give up on the language before mastering its true power. On the other hand, JavaScript is an incredible impressive language. I wonder if JavaScript was originally designed as a foundation on which you build your own language.

About 2 years ago I had worked out a solution which developed by now into a light-weight library which brings into JavaScript everything I miss in the language as a follower of class-based OOP. All about how it is implemented and how can be used is on the slides.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,982
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bringing classical OOP into JavaScript

  1. 1. Bringing classical OOP into JavaScript By Dmitry Sheiko
  2. 2. Who's the dude? I'm Dmitry Sheiko, a web developer, blogger, open source contributor. http://dsheiko.com @sheiko https://github.com/dsheiko
  3. 3. Eager to be a better coder? Reading helps…
  4. 4. Reflecting learned patterns on JavaScript What the hell?! Where are all the classes, interfaces, members visibility, namespaces, mixins?!
  5. 5. JavaScript is a class-free language “JavaScript: The World's Most Misunderstood Programming Language”
  6. 6. Yet JavaScript is incredibly expressive “The expressiveness of JavaScript provides an enormous amount of power. Even though the language lacks certain useful built-in features, its flexibility allows you to add them yourself…” Ross Harmes, Dustin Diaz. Pro JavaScript Design Patterns
  7. 7. Make of JavaScript the language you need As a class-based OOP programmer I would bring to JavaScript following : • classes with private/public members • classical inheritance (abstract class -> class -> .. -> final class) • interfaces • mixins (traits) • type hinting • entry point validators
  8. 8. What look like objects in JavaScript Somehow clumsy, isn’t it? var o, SuperTypeConstruct = function() {}, ConstructorFunc = function() { var _privateMember = "private member"; this.publicMember = "public member"; this.privilegedMethod = function() { return _privateMember; } } ConstructorFunc.prototype = new ConstructorFunc(); o = new ConstructorFunc();
  9. 9. What I want it to look like var ConcreteClass = function() { // Constructor's job var _privateMember = "private member"; return { __extends__: AbstractClass, __implements__: [Countable, Traversable], __mixin__: [Trait], publicMember: "public member", privilegedMethod: function() { return _privateMember; } } }
  10. 10. Can it inherit? With a factory it can: Function.prototype.createInstance = function () { var key, module = this, members = module.apply(this, arguments), Fn = function () {}; members.hasOwnProperty( "__extends__" ) && members[ "__extends__" ] && (module.prototype = members[ "__extends__" ].createInstance()); Fn.prototype = module.prototype; // Link to the supertype for (key in members) { // Mix in members if (members.hasOwnProperty(key)) { Fn.prototype[key] = members[key]; } } return new Fn(); };
  11. 11. What about interfaces, mixins and so on? We add with a hook any object creation control flow that we wish. Let’s just change a bit the factory: Function.prototype.createInstance = function () { ... instance = new Fn(); jsa.Hook.invokeAll( instance, arguments ); return instance; };
  12. 12. JSA Way JSA is a light-weight library comprising factory plugins to “make of JavaScript the language I want”. Let’s see what they are.
  13. 13. Widget foundation class As good programmers we learn from the great ones, don’t we? So, let’s borrow from YUI guys some ideas of abstract widget (http://yuilibrary.com/yui/docs/widget/) . Videlicet: • Common bootstrap interface • Consistent node referencing • Built-in progressive enhancement support
  14. 14. Widget abstract layer in JSA Widget plugin declares BaseAbstract class, which makes the factory (via a hook) to auto- call bootstap methods (init, renderUI, syncUI) of every class extending this one. The plugin also declares WidgetAbstract, which makes the factory to populate node property with node references given in HTML_PARSER property of extending class +syncUI() -__extends__ -HTML_PARSER -settings WidgetAbstract +init() +renderUI() +syncUI() BaseAbstract +init() +renderUI() +syncUI() -__extends__ -node -settings ConcreteModule
  15. 15. Usage example (function( $, jsa ) { Widget = function( settings ) { // event handlers _handler = { onclick : function(e) { // do something } }; return { __extends__ : jsa.WidgetAbstract, HTML_PARSER : { toolbar : 'div.toolbar' }, syncUI : function() { this.node.toolbar.find( 'li' ).bind( 'click.intro', this, _handler.onclick ); } }; }; $(document).bind( 'ready.app', function () { // Document is ready Widget.createInstance({ boundingBox: $('div.intro') }); }); })( jQuery, jsa );
  16. 16. Mixins Mixins provide aggregation (has-a) relation between objects, which is easy to implement especially is JavaScript. Mixin plugin only assigns a hook, which makes factory mix public members of objects given in mixin property Mixin +init() +renderUI() +syncUI() -__extends__ -__mixin__ ConcreteClass 1 *
  17. 17. Usage example var MixinA = { propertyA: "propertyA" }, MixinB = { propertyB: "propertyB" }, Silo = function() { return { __mixin__: [MixinA, MixinB ], ownPropery: "Own property" } }, o = Silo.createInstance(); console.log(o.ownPropery !== undefined ); // true console.log(o. propertyA !== undefined ); // true console.log(o. propertyB !== undefined ); // true
  18. 18. Interfaces Interface plugin assigns a hook, which checks if the newly born object meets the requirements of the interfaces enlisted in implement property. In order to make sure arguments match type hints, the plugin wrap the method with cross-cutting functionality, which does the check on entry point. -__implements__ ConcreteClass Interface *
  19. 19. Usage example var ConcreteInterface = { requeriedMethod : ["string”] }, StrictModule = function() { return { __implements__: ConcreteInterface, requeriedMethod : function() { } } }, o = StrictModule.createInstance(); // Test Module.requeriedMethod('a string'); // OK Module.requeriedMethod(555); // throws TypeError exception
  20. 20. Design by Contract Design by Contract approach provides another and more sophisticated solution of defining requirements for the objects of a type. By a contract we can define entry/exit point conditions. -__contract__ ConcereClass Contract * var Contract = { methodName: { onEntry: [ "number", aClass ], // type hints validators: [ function( arg ) { return arg > 10; }, secondArgValidator ], onExit: "string" } }
  21. 21. Usage example var ConcreteContract = { methodA : { onEntry: [ "number" ], validators: [ function(arg){ return arg > 10; } ], onExit: "string" } }, EmployedModule = function() { return { __contract__: ConcreteContract, aMethod : function() { return "a string"; } } }, o = EmployedModule.createInstance(); o.aMethod( 50 ); // OK o.aMethod( 1 ); // Validator fails, RangeError exception is thrown
  22. 22. Fork me! JSA project page: Articles relevant to JSA http://dsheiko.com/weblog/js-application-design http://dsheiko.com/weblog/prototypal-inheritance- in-javascript-for-modules http://dsheiko.com/weblog/design-by-contract-and- js

×