25
wintellect.com consulting training design debugging Enterprise JavaScript Development: Oxymoron? Part 1 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant [email protected] Copyright © 2012

Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

Embed Size (px)

DESCRIPTION

In this three hour training session Jeremy Likness will cover the nuances of building extremely large enterprise applications that rely heavily on JavaScript. Today’s web platforms have more reach than ever before, and use of JavaScript is evolving rapidly to take advantage of libraries that provide services ranging from cross-browser compatibility to organization and streamlining of code. Learn about some of the popular JavaScript libraries in use today including jQuery and related plugins, Requires, Backbone, Kendo UI, Postal and more. Learn how Wintellect tackles the challenge of working with JavaScript within large development teams and how these technologies correlate closely to server side technologies like MVC and Web API. In building a reference application, Jeremy will uncover some of these challenges and proposed solutions, provide an overview of current best practices and patterns in JavaScript, and discuss challenges like scoping code, enforcing standards, and unit testing. This session is designed to provide you with the tools and insights you need to take advantage of modern web development using the HTML5, CSS3, and JavaScript stack.

Citation preview

Page 1: 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

Page 2: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 3: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

wintellect.comconsulting training design debugging

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

Agenda

Page 4: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

wintellect.comconsulting training design debugging

Introduction – JavaScript

Page 5: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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)

Page 6: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 7: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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)

Page 8: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 9: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 10: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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;

Page 11: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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;

Page 12: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

wintellect.comconsulting training design debugging

I’m not Null, I’m just Undefined

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

Page 13: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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;

Page 14: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 15: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 16: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 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); };

Page 17: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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;

Page 18: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

wintellect.comconsulting training design debugging

Return to Sender

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

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

Page 19: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

wintellect.comconsulting training design debugging

Return to Sender

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

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

Page 20: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 21: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 22: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 23: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 24: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

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

Page 25: Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

wintellect.com

Questions?

consulting training design debugging

Jeremy Likness (@JeremyLikness)Principal [email protected]