@dtauer

JavaScript + OOPDustin Tauer :: Easel Solution

@dtauer

Dustin Tauer

Developer (11 years)Instructor (7 years)

Web :: Mobile :: eLearning

@dtauer

Easel SolutionsTraining

• Design, Web, Mobile, eLearning, Strategy, Social, etc.

Customized TrainingConsultingAdobe Connect

@dtauer

TopicsOOP 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

1997Flash Playe

r 2

2003Flash Playe

r 5

2006Flash Player

9*

2008Flash Player

10

2012Flash Player 11.4

@dtauer

.Net History200

2v1.0

2005

v2.0

2006

v3.0

2010

v4.0

2012

v4.5

@dtauer

JavaScript History

1996 JavaScr

ipt

2005AJAX

Is that it?

@dtauer

Languages need to evolve to surviveJavaScript has survived because of frameworks

@dtauer

JavaScript is like cementFoundation for frameworks build on

@dtauer

JavaScript is Object OrientedPolymorphism, encapsulation, and inheritance are all possible.

@dtauer

Most OOP languages have keywordsclass, 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));

});

};})(jQuery);

@dtauer

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

@dtauer

DemoNo frameworks :: Just JavaScript

@dtauer

Please, use a frameworkThere 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 editorAbove 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 Prohttp://sourceforge.net/projects/sourcecodepro.adobe/

@dtauer

THANKS!Dustin Tauer :: Easel Solutions