Download pptx - Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

wintellect.comconsulting training design debugging

Enterprise JavaScript Development: Oxymoron?Part 1 of 2

Jeremy Likness (@JeremyLikness)Principal [email protected] Copyright © 2012


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.

Consulting & Debugging• Architecture, analysis, and design services• Full lifecycle custom software development• Content creation• Project management• Debugging & performance tuning

Training• On-site instructor-led training• Virtual instructor-led training• Devscovery conferences

Design• User Experience Design• Visual & Content Design• Video & Animation Production

what we do

who we are

how we do it

consulting training debuggingdesign


• Introduction• The bad. The ugly.• The good.• Part 2: More of the good.

Agenda


Introduction – JavaScript


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)


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


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)


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


Values are … What?! (1 of 2)

false.toString();

[1,2,3].toString();

"2".toString();

2.toString();

02.toString();

2 .toString();


Values are … What?! (2 of 2)

var one = 1;one;typeof one;

var two = '2',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 = ['1', '2', '3']two;typeof two;

one[0] == two[0];one[0] === two[0];

var three = one + two;typeof three;three;

var three = one.concat(two); typeof three;three;


Case Sensitive? At least tell me!

var myObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;


I’m not Null, I’m just Undefined

null;undefined;null == undefined;null === undefined;typeof null;typeof undefined;


I may be Undefined, but I’m still here

var myObj = { foo : 1, bar : 2 };myObj;myObj.foo = undefined;myObj;

delete myObj.foo;


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");


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);


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); };


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;


Return to Sender

(function() { return { foo: "bar" }})();

(function() { return { foo: "bar" }})();


Return to Sender

(function() { return { foo: "bar" };})();

(function() { return; { foo: "bar" };})();


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";


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);}


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'));})();


Can You Guess the Result?

(function() { var logMe; function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); logMe = function() { console.log('Welcome to Devscovery.'); } logMe(); logMe(); console.log(parseInt('0114602653')); })();

Variable declaration was hoisted

Function declaration was hoisted

parseInt assumes Octal


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

wintellect.com

Questions?

consulting training design debugging

Jeremy Likness (@JeremyLikness)Principal [email protected]