Enterprise JavaScript Development: Oxymoron? Part 1 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012 consulting training design debugging wintellect.com
what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Production consulting training design debugging wintellect.com
Agenda • Introduction • The bad. The ugly. • The good. • Part 2: More of the good. consulting training design debugging wintellect.com
Introduction – JavaScript consulting training design debugging wintellect.com
JavaScript – A Brief History • 1995 – Netscape, “make Java more accessible to non-Java programmers” • Goal was to make it easy to tie into page elements without the need for a compiler or knowledge of object-oriented design • Loosely-typed scripting language • Codenamed “Mocha” started out as “LiveScript” then renamed to “JavaScript” (oops, this caused a little bit of confusion, some think this was an intentional marketing move between Netscape and Sun) • Moved from manipulation of Java applets to manipulation of DOM elements • 1996 – Microsoft does this a little differently (surprise!) and releases VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998) • 1997 - ECMAScript adopted (ISO in 1998) • 2006 – jQuery (no, it‟s not JavaScript, but it is certainly ubiquitous) consulting training design debugging wintellect.com
JavaScript – What is It? • Dynamic – variables are not bound to types, only values • Object-based (not oriented) – arrays and prototypes – myObj.foo = myObj[“foo”] • Interpreted, not compiled • Functional • Supports anonymous functions • Closures • Global scope • Unfortunately, not consistently implemented consulting training design debugging wintellect.com
The Bad - Incompatibilities • Blur – when an element loses focus – not consistently implemented • Change – buggy implementation in IE5 – IE8 • Focus – Firefox on Mac, Safari, and Chrome don‟t consistently support this event • Keydown – not properly implemented in Opera • Keypress – not properly implemented in FireFox • Mouseenter/Mouseleave - Firefox, Safari, and Chrome don‟t implement despite being in the spec – used for child elements • Cut/copy/paste/selection – not consistently implemented as well • DOM – the lifecycle is different and events will fire at different times and have a different state of readiness between browsers (this is why jQuery uses document.ready to provide a common ground) consulting training design debugging wintellect.com
The Ugly • Variables are scoped to values, not types • Case sensitivity makes it really tough to track typos • Null doesn‟t mean Undefined, Undefined does • Setting a property to undefined doesn‟t remove the definition • You can‟t trust your built-in functions • Parameters are just syntactic sugar for an array of objects • Scope is based on functions, not blocks • Arrays are easy to clobber • Semi-colon completion means position (and style) matter • Spaces count – for example, string continuations • Position doesn‟t matter for the increment/decrement operators • Variable and function definitions are hoisted consulting training design debugging wintellect.com
Values are … What?! (1 of 2) false.toString(); [1,2,3].toString(); "2".toString(); 2.toString(); 02.toString(); 2 .toString(); consulting training design debugging wintellect.com
Values are … What?! (2 of 2) var one = 1; var one = [1,2,3]; one; one; typeof one; typeof one; var two = '2', var two = ['1', '2', '3'] two; two; typeof two; typeof two; var three = one + two; one[0] == two[0]; three; one[0] === two[0]; typeof three; var three = one + two; var three = Number(one) + typeof three; Number(two); three; typeof three; three; var three = one.concat(two); typeof three; three; consulting training design debugging wintellect.com
Case Sensitive? At least tell me! var myObj = { foo : 1, Bar: 2 }; var result = myObj.foo + myObj.bar; typeof result; result; consulting training design debugging wintellect.com
I‟m not Null, I‟m just Undefined null; undefined; null == undefined; null === undefined; typeof null; typeof undefined; consulting training design debugging wintellect.com
I may be Undefined, but I‟m still here var myObj = { foo : 1, bar : 2 }; myObj; myObj.foo = undefined; myObj; delete myObj.foo; consulting training design debugging wintellect.com
Nothing is Sacred var myObj = { foo : 1 }; myObj.hasOwnProperty("foo"); myObj.hasOwnProperty = function(args) { return false; }; myObj.hasOwnProperty("foo"); Object.prototype.hasOwnProperty.call(myObj, "foo"); consulting training design debugging wintellect.com
Parameters … more like “Guidelines” var myFunc = function(something) { console.log(something); return 1; }; myfunc(); myFunc('test'); myFunc(myFunc); myFunc('test', myFunc); var myFunc = function() { console.log(Array.prototype.slice.call(arguments)); }; myFunc(); myFunc('test', 2); consulting training design debugging wintellect.com
Scope is not a Block Party var foo = 42; function test() { foo = 21; console.log(foo); }; test(); foo; var foo = 42; function test() { var foo = 21; console.log(foo); }; test(); foo; for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i);}, 1000);}; for (var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); }; consulting training design debugging wintellect.com
Arrays have Split Personalities var list = [1,2,3,4,5,6]; list; list.length; list.length = 2; list; var list = new Array(1,2,3); list; var list = new Array(3); list; consulting training design debugging wintellect.com
Return to Sender (function() { return { foo: "bar" } })(); (function() { return { foo: "bar" } })(); consulting training design debugging wintellect.com
Return to Sender (function() { return { foo: "bar" }; })(); (function() { return; { foo: "bar" }; })(); consulting training design debugging wintellect.com
Can you Spot the Error? var myString = "this is a multi-line string if you know what I mean"; var myString = "this is another multi-line string if you know what I mean"; consulting training design debugging wintellect.com
Who Knows How to Count? for (var x = 0; x < 5; x++) { console.log(x); } for (var x = 0; x < 5; ++x) { console.log(x); } consulting training design debugging wintellect.com
Can You Guess the Result? (function() { logMe(); var logMe = function() { console.log('Welcome to Devscovery.'); }; logMe(); function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
Can You Guess the Result? Variable declaration was hoisted (function() { Function declaration was hoisted var logMe; function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); logMe = function() { console.log('Welcome to Devscovery.'); } parseInt assumes Octal logMe(); logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
The Good • JSLint / JSHint – personal style is for fashion, not code • jQuery – one API to bind them all • JSON and Web API – flexible information on demand • Twitter Bootstrap – one layout to rule them all • Underscore.js – the Swiss army knife of JavaScript • Backbone.js – MVC on the client • RequireJS – dependency resolution • MVVM (for example, Kendo UI) – “Gotta keep „em separated” • Amplify.js – publisher/subscriber for the client • … and many more great projects we won‟t have time to discuss today consulting training design debugging wintellect.com
Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com

Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

  • 1.
    Enterprise JavaScript Development:Oxymoron? Part 1 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012 consulting training design debugging wintellect.com
  • 2.
    what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Production consulting training design debugging wintellect.com
  • 3.
    Agenda • Introduction • The bad. The ugly. • The good. • Part 2: More of the good. consulting training design debugging wintellect.com
  • 4.
    Introduction – JavaScript consulting training design debugging wintellect.com
  • 5.
    JavaScript – ABrief History • 1995 – Netscape, “make Java more accessible to non-Java programmers” • Goal was to make it easy to tie into page elements without the need for a compiler or knowledge of object-oriented design • Loosely-typed scripting language • Codenamed “Mocha” started out as “LiveScript” then renamed to “JavaScript” (oops, this caused a little bit of confusion, some think this was an intentional marketing move between Netscape and Sun) • Moved from manipulation of Java applets to manipulation of DOM elements • 1996 – Microsoft does this a little differently (surprise!) and releases VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998) • 1997 - ECMAScript adopted (ISO in 1998) • 2006 – jQuery (no, it‟s not JavaScript, but it is certainly ubiquitous) consulting training design debugging wintellect.com
  • 6.
    JavaScript – Whatis It? • Dynamic – variables are not bound to types, only values • Object-based (not oriented) – arrays and prototypes – myObj.foo = myObj[“foo”] • Interpreted, not compiled • Functional • Supports anonymous functions • Closures • Global scope • Unfortunately, not consistently implemented consulting training design debugging wintellect.com
  • 7.
    The Bad -Incompatibilities • Blur – when an element loses focus – not consistently implemented • Change – buggy implementation in IE5 – IE8 • Focus – Firefox on Mac, Safari, and Chrome don‟t consistently support this event • Keydown – not properly implemented in Opera • Keypress – not properly implemented in FireFox • Mouseenter/Mouseleave - Firefox, Safari, and Chrome don‟t implement despite being in the spec – used for child elements • Cut/copy/paste/selection – not consistently implemented as well • DOM – the lifecycle is different and events will fire at different times and have a different state of readiness between browsers (this is why jQuery uses document.ready to provide a common ground) consulting training design debugging wintellect.com
  • 8.
    The Ugly • Variables are scoped to values, not types • Case sensitivity makes it really tough to track typos • Null doesn‟t mean Undefined, Undefined does • Setting a property to undefined doesn‟t remove the definition • You can‟t trust your built-in functions • Parameters are just syntactic sugar for an array of objects • Scope is based on functions, not blocks • Arrays are easy to clobber • Semi-colon completion means position (and style) matter • Spaces count – for example, string continuations • Position doesn‟t matter for the increment/decrement operators • Variable and function definitions are hoisted consulting training design debugging wintellect.com
  • 9.
    Values are …What?! (1 of 2) false.toString(); [1,2,3].toString(); "2".toString(); 2.toString(); 02.toString(); 2 .toString(); consulting training design debugging wintellect.com
  • 10.
    Values are …What?! (2 of 2) var one = 1; var one = [1,2,3]; one; one; typeof one; typeof one; var two = '2', var two = ['1', '2', '3'] two; two; typeof two; typeof two; var three = one + two; one[0] == two[0]; three; one[0] === two[0]; typeof three; var three = one + two; var three = Number(one) + typeof three; Number(two); three; typeof three; three; var three = one.concat(two); typeof three; three; consulting training design debugging wintellect.com
  • 11.
    Case Sensitive? Atleast tell me! var myObj = { foo : 1, Bar: 2 }; var result = myObj.foo + myObj.bar; typeof result; result; consulting training design debugging wintellect.com
  • 12.
    I‟m not Null,I‟m just Undefined null; undefined; null == undefined; null === undefined; typeof null; typeof undefined; consulting training design debugging wintellect.com
  • 13.
    I may beUndefined, but I‟m still here var myObj = { foo : 1, bar : 2 }; myObj; myObj.foo = undefined; myObj; delete myObj.foo; consulting training design debugging wintellect.com
  • 14.
    Nothing is Sacred var myObj = { foo : 1 }; myObj.hasOwnProperty("foo"); myObj.hasOwnProperty = function(args) { return false; }; myObj.hasOwnProperty("foo"); Object.prototype.hasOwnProperty.call(myObj, "foo"); consulting training design debugging wintellect.com
  • 15.
    Parameters … morelike “Guidelines” var myFunc = function(something) { console.log(something); return 1; }; myfunc(); myFunc('test'); myFunc(myFunc); myFunc('test', myFunc); var myFunc = function() { console.log(Array.prototype.slice.call(arguments)); }; myFunc(); myFunc('test', 2); consulting training design debugging wintellect.com
  • 16.
    Scope is nota Block Party var foo = 42; function test() { foo = 21; console.log(foo); }; test(); foo; var foo = 42; function test() { var foo = 21; console.log(foo); }; test(); foo; for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i);}, 1000);}; for (var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); }; consulting training design debugging wintellect.com
  • 17.
    Arrays have SplitPersonalities var list = [1,2,3,4,5,6]; list; list.length; list.length = 2; list; var list = new Array(1,2,3); list; var list = new Array(3); list; consulting training design debugging wintellect.com
  • 18.
    Return to Sender (function() { return { foo: "bar" } })(); (function() { return { foo: "bar" } })(); consulting training design debugging wintellect.com
  • 19.
    Return to Sender (function() { return { foo: "bar" }; })(); (function() { return; { foo: "bar" }; })(); consulting training design debugging wintellect.com
  • 20.
    Can you Spotthe Error? var myString = "this is a multi-line string if you know what I mean"; var myString = "this is another multi-line string if you know what I mean"; consulting training design debugging wintellect.com
  • 21.
    Who Knows Howto Count? for (var x = 0; x < 5; x++) { console.log(x); } for (var x = 0; x < 5; ++x) { console.log(x); } consulting training design debugging wintellect.com
  • 22.
    Can You Guessthe Result? (function() { logMe(); var logMe = function() { console.log('Welcome to Devscovery.'); }; logMe(); function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
  • 23.
    Can You Guessthe Result? Variable declaration was hoisted (function() { Function declaration was hoisted var logMe; function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); logMe = function() { console.log('Welcome to Devscovery.'); } parseInt assumes Octal logMe(); logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
  • 24.
    The Good • JSLint / JSHint – personal style is for fashion, not code • jQuery – one API to bind them all • JSON and Web API – flexible information on demand • Twitter Bootstrap – one layout to rule them all • Underscore.js – the Swiss army knife of JavaScript • Backbone.js – MVC on the client • RequireJS – dependency resolution • MVVM (for example, Kendo UI) – “Gotta keep „em separated” • Amplify.js – publisher/subscriber for the client • … and many more great projects we won‟t have time to discuss today consulting training design debugging wintellect.com
  • 25.
    Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com

Editor's Notes

  • #10 false.toString();[1,2,3].toString();&quot;2&quot;.toString();2.toString(); 02.toString();2 .toString();
  • #11 var one = 1;one;typeof one;var two = &apos;2&apos;,two;typeof two;var three = one + two;three;typeof three; var three = Number(one) + Number(two);typeof three;three;var one = [1,2,3];one;typeof one;var two = [&apos;1&apos;, &apos;2&apos;, &apos;3&apos;]two;typeof two;one[0] == two[0];one[0] === two[0];var three = one + two;typeof three;three;var three = one.concat(two);three;typeof three;
  • #12 varmyObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
  • #13 null;undefined;null == undefined;null === undefined;typeof null;typeof undefined;
  • #14 varmyObj = { foo : 1, bar : 2 };myObj;myObj.foo = undefined;myObj;delete myObj.foo;
  • #15 varmyObj = { foo : 1 };myObj.hasOwnProperty(&quot;foo&quot;);myObj.hasOwnProperty = function(args) { return false; };myObj.hasOwnProperty(&quot;foo&quot;);Object.prototype.hasOwnProperty.call(myObj, &quot;foo&quot;);
  • #16 varmyFunc = function(something) { console.log(something); return 1; };myfunc();myFunc(&apos;test&apos;);myFunc(myFunc);myFunc(&apos;test&apos;, myFunc);varmyFunc = function() { console.log(Array.prototype.slice.call(arguments)); };myFunc();myFunc(&apos;test&apos;, 2);
  • #17 var foo = 42;function test() { foo = 21; console.log(foo); };test();foo;(clear the screen) var foo = 42;function test() { var foo = 21; console.log(foo); };test();foo; for(vari = 0; i &lt; 10; i++) { setTimeout(function() { console.log(i);}, 1000);};for (vari = 0; i &lt; 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); };
  • #18 var list = [1,2,3,4,5,6];list;list.length;list.length = 2;list;var list = new Array(1,2,3);list;var list = new Array(3);list;
  • #19 (function() { return { foo: &quot;bar&quot; }})(); (function() { return { foo: &quot;bar&quot; }})();
  • #21 varmyString = &quot;this is a multi-line string \\ if you know what I mean&quot;; varmyString = &quot;this is another multi-line string \\ if you know what I mean&quot;;
  • #22 for (var x = 0; x &lt; 5; x++) { console.log(x); }for (var x = 0; x &lt; 5; ++x) { console.log(x);}
  • #23 (function() {logMe();varlogMe = function() { console.log(&apos;Welcome to Devscovery.&apos;); };logMe(); function logMe() { console.log(&apos;Devscovery is a great place to be.&apos;); }logMe(); console.log(parseInt(&apos;0114602653&apos;));})();