OOP and JavaScript

OOP and JavaScript

• 1.
  JavaScript + OOP DustinTauer :: Easel Solution @dtauer
• 2.
  Dustin Tauer Developer (11years) 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 withOOP? 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 toevolve to survive JavaScript has survived because of frameworks @dtauer
• 10.
  JavaScript is likecement Foundation for frameworks build on @dtauer
• 11.
  JavaScript is ObjectOriented Polymorphism, encapsulation, and inheritance are all possible. @dtauer
• 12.
  Most OOP languageshave 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 theydoing it that way? Less stuff in memory (scope) @dtauer
• 15.
  Demo No frameworks ::Just JavaScript @dtauer
• 16.
  Please, use aframework  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 goodcode 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: SourceCode Pro http://sourceforge.net/projects/sourcecodepro.ado be/ @dtauer
• 19.
  THANKS! Dustin Tauer ::Easel Solutions @dtauer