Date post: | 12-Jan-2015 |
Category: |
Technology |
Upload: | jeremy-likness |
View: | 769 times |
Download: | 0 times |
wintellect.comconsulting training design debugging
Enterprise JavaScript Development: Oxymoron?Part 1 of 2
Jeremy Likness (@JeremyLikness)Principal [email protected] Copyright © 2012
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
• Introduction• The bad. The ugly.• The good.• Part 2: More of the good.
Agenda
wintellect.comconsulting training design debugging
Introduction – JavaScript
wintellect.comconsulting training design debugging
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)
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
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)
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
Values are … What?! (1 of 2)
false.toString();
[1,2,3].toString();
"2".toString();
2.toString();
02.toString();
2 .toString();
wintellect.comconsulting training design debugging
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;
wintellect.comconsulting training design debugging
Case Sensitive? At least tell me!
var myObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
wintellect.comconsulting training design debugging
I’m not Null, I’m just Undefined
null;undefined;null == undefined;null === undefined;typeof null;typeof undefined;
wintellect.comconsulting training design debugging
I may be Undefined, but I’m still here
var myObj = { foo : 1, bar : 2 };myObj;myObj.foo = undefined;myObj;
delete myObj.foo;
wintellect.comconsulting training design debugging
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");
wintellect.comconsulting training design debugging
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);
wintellect.comconsulting training design debugging
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); };
wintellect.comconsulting training design debugging
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;
wintellect.comconsulting training design debugging
Return to Sender
(function() { return { foo: "bar" }})();
(function() { return { foo: "bar" }})();
wintellect.comconsulting training design debugging
Return to Sender
(function() { return { foo: "bar" };})();
(function() { return; { foo: "bar" };})();
wintellect.comconsulting training design debugging
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";
wintellect.comconsulting training design debugging
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);}
wintellect.comconsulting training design debugging
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'));})();
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
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]