1. JavaScript + OOP
Dustin Tauer :: Easel Solution
@dtauer

2. Dustin Tauer
Developer (11 years)
Instructor (7 years)
Web :: Mobile ::
eLearning
@dtauer

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

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

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

6. Flash History
1997 2006 2012
Flash Flash Flash
Player Player Player
2 9* 11.4
2003 2008
Flash Flash
Player Player
5 10
@dtauer

7. .Net History
2002 2006 2012
v1.0 v3.0 v4.5
2005 2010
v2.0 v4.0
@dtauer

8. JavaScript History
1996
JavaScript Is that it?
2005
AJAX
@dtauer

9. Languages need to evolve to
survive
JavaScript has survived because of
frameworks
@dtauer

10. JavaScript is like cement
Foundation for frameworks build on
@dtauer

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

12. Most OOP languages have
keywords
class, extends, implements, override, public,
private, protected, final
@dtauer

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

14. Why are they doing it that
way?
Less stuff in memory (scope)
@dtauer

15. Demo
No frameworks :: Just JavaScript
@dtauer

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

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

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

19. THANKS!
Dustin Tauer :: Easel Solutions
@dtauer