OOP and JavaScript

JavaScript + OOP
Dustin Tauer :: Easel Solution

@dtauer

Dustin Tauer

Developer (11 years)
Instructor (7 years)

Web :: Mobile ::
eLearning

@dtauer

Easel Solutions
 Training
• Design, Web, Mobile,
eLearning, Strategy,
Social, etc.
 Customized Training
 Consulting
 Adobe Connect

@dtauer

Topics
 OOP Techniques
• Scope
• Classes
• Public/Private
• Inheritance
 A bit of framework talk
• RequireJS, BackboneJS, etc

@dtauer

Who’s down with OOP?
Classes, Inheritance, Interfaces, etc.

@dtauer

Flash History
1997 2006 2012
Flash Flash Flash
Player Player Player
2 9* 11.4

2003 2008
Flash Flash
Player Player
5 10

@dtauer

.Net History

2002 2006 2012
v1.0 v3.0 v4.5

2005 2010
v2.0 v4.0

@dtauer

JavaScript History

1996
JavaScript Is that it?

2005
AJAX

@dtauer

Languages need to evolve to
survive
JavaScript has survived because of
frameworks

@dtauer

JavaScript is like cement
Foundation for frameworks build on

@dtauer

JavaScript is Object Oriented
Polymorphism, encapsulation, and
inheritance are all possible.

@dtauer

Most OOP languages have
keywords
class, extends, implements, override, public,
private, protected, final

@dtauer

jQuery Plugin (Class)
(function($){
$.yourPluginName = function(el, radius, options){
var base = this;
base.$el = $(el);
base.el = el;
base.$el.data("yourPluginName", base);
base.init = function(){
if( typeof( radius ) === "undefined" || radius === null ) radius =
"20px";
base.radius = radius;
base.options = $.extend({},$.yourPluginName.defaultOptions,
options);
};
base.init();
};
$.yourPluginName.defaultOptions = {
radius: "20px"
};
$.fn.yourPluginName = function(radius, options){
return this.each(function(){
(new $.yourPluginName(this, radius, options));
});
}; @dtauer

Why are they doing it that
way?
Less stuff in memory (scope)

@dtauer

Demo
No frameworks :: Just JavaScript

@dtauer

Please, use a framework
 There are far too many to list
• TodoMVC is a good resource
• http://todomvc.com/

 RequireJS is manditory
• Manages your files/modules
• http://requirejs.org/

@dtauer

Use a good code editor
 Above all, get yourself some code hinting
and snippets
• Aptana (http://www.aptana.com/)
• Sublime Text (http://www.sublimetext.com/)
• Brackets (https://github.com/adobe/brackets)
 Free, open source
• Adobe Edge Code
(http://html.adobe.com/edge/code/)
 Current Version: “Preview”
 Built on Brackets
 Free with Creative Cloud Membership
@dtauer

Killer Font: Source Code Pro
http://sourceforge.net/projects/sourcecodepro.ado
be/

@dtauer

THANKS!
Dustin Tauer :: Easel Solutions

@dtauer

OOP and JavaScript

More Related Content

Viewers also liked (20)

Similar to OOP and JavaScript (20)

More from easelsolutions (11)

OOP and JavaScript