Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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


Agenda

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


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


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


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


Questions?

Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com


Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

Similar to Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2 (20)

Recently uploaded

Recently uploaded (20)

Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

Editor's Notes