JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich.

JavaScript Patternsand Node Idioms

by Rob Richardsonhttps://robrich.org/@rob_rich

#ITDEVCON @rob_rich

JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich

About MeRob Richardson is a local software craftsman building web properties in ASP.NET and Node. He's a Microsoft MVP, published author, frequent speaker at conferences, user groups, and community events, and a diligent teacher and student of high quality software development. You can find this and other talks on his blog at http://robrich.org/presentations and follow him on twitter at @rob_rich.

#ITDEVCON @rob_rich


What canclient-side JavaScriptprogrammers learn

from Node?

#ITDEVCON @rob_rich


• The most ubiquitous language in the world

• You probably have a JavaScript runtime in your pocket -- maybe 2 or 3

• Every browser since Netscape 4 and IE 4 can run it

What is JavaScript

#ITDEVCON @rob_rich


Everything in the browser:•HTML: content•CSS: pretty•JavaScript: everything else

Why JavaScript

#ITDEVCON @rob_rich


We generally seecurly braces

and just use JavaScript… without learning it

#ITDEVCON @rob_rich

NODENODE


• Server-side JavaScript• Built on Chrome’s V8 engine

• Asynchronous to a fault• There is no Thread.sleep();• So we use the callback pattern

What is Node

#ITDEVCON @rob_rich


Promises are built in with ES v. 6,but it’s a higher-level conceptand it isn’t the dominant patternso there’s friction when training others

*promises

#ITDEVCON @rob_rich


mylib(in, data, function (err, arg, results) {

if (err) {

return; // handle error

}

// handle success

});

The Callback Pattern

#ITDEVCON @rob_rich



Benefits• Elegant asynchrony• Simplest solution• Any number of

arguments• Single result function

Drawbacks• No run state / handle• The airplane wing of

nested callbacks

#ITDEVCON @rob_rich


lib1(arg1, function (err, cb) {




// done

});

});

});

});

The Airplane Wing

#ITDEVCON @rob_rich


\

\ \

===================>

/ /

/

// weeeeee......

The Airplane Wing

#ITDEVCON @rob_rich


var indata = {some:'data'};

var url = '/path/to/service';

$.getJSON(url, indata, function (outdata) {

if (outdata.some !== indata.some) {

// take action

}

}

});


#ITDEVCON @rob_rich

NODENODE


• The Callback Pattern• Small modules orchestrated together• Package manager: npm• Culture of Testing

Lessons from Node

#ITDEVCON @rob_rich


Single purpose:•asynchronously process thingsSingle result:•one callback when it’s doneBrowser and node tests

The async module

#ITDEVCON @rob_rich

https://npmjs.org/async • https://github.com/caolan/async


async.parallel([

lib1.bind(null, arg1),



lib4.bind(null, arg4)

], function (err, results) {

if (err) {

return; // one of them errored, log, handle

}

// all of them succeeded

});

The async module

#ITDEVCON @rob_rich

JAVASCRIPTJAVASCRIPT


• .prop or ["prop"]• Property: a value in the dictionary• Method: a function in the dictionary• Dictionaries have no private keys

Every object is a Dictionary<string, object>

#ITDEVCON @rob_rich


• Think delegate in C#,function pointer in C/C++

• Functions define scope,curly braces don’t

Every function is an object

#ITDEVCON @rob_rich


function myfunc() {

console.log(myfunc.data);

};

myfunc.data = 2;

Every function is an object

#ITDEVCON @rob_rich


• missing parameters are undefined• arguments holds extra parameters

Every parameter is optional

#ITDEVCON @rob_rich


Truthy / Falsey

falsey• 0• false• ""• null• undefined• NaN

truthy• everything else

… thus ===#ITDEVCON @rob_rich


JavaScript differences

• Object is Dictionary<string, object>• Every function is an object• Functions define scope• Every function parameter is optional• Truthy / Falsey

#ITDEVCON @rob_rich

PROTECT THE GLOBAL PROTECT THE GLOBAL SCOPESCOPE


window is a dictionary too

What if we both name it calendar?What if we both name it i?

Why Protect Global Scope?

#ITDEVCON @rob_rich


0. Head in the sand

#ITDEVCON @rob_rich

http://theprofoundprogrammer.com/post/28552672458/text-maybe-a-clean-build-will-fix-it


var YAHOO = {};

YAHOO.dept = {};

YAHOO.dept.product = {};

// ...

if (theirVar === YAHOO.dept.product.feature.someEnum.value) {

1. Nested objects

#ITDEVCON @rob_rich


(function () { // <-- no name, out of dict.

// functions define scope

// therefore "private" variables

}()); // <-- execute it right away

2. IIFE

#ITDEVCON @rob_rich


var myModule = (function () {

// private variables

return {

the: interface

};

}());

3. Revealing Module Pattern

#ITDEVCON @rob_rich


• CommonJS: node, browserify• AMD: requirejs• ES6 modules: angular 2

4. Module loaders

#ITDEVCON @rob_rich


4. Module loaders

#ITDEVCON @rob_rich

https://xkcd.com/927/


0. Head in the Sand1. Nested objects2. IIFE3. Revealing Module Pattern4. Module loaders

Protect Global Scope

#ITDEVCON @rob_rich


JavaScript has come of age

We can learn from Node

#ITDEVCON @rob_rich

QUESTIONS?QUESTIONS?@rob_rich @rob_rich • • https://robrich.org/https://robrich.org/

Rate This Session Now!Rate with Mobile App:• Select the session from the

Agenda or Speakers menus

• Select the Actions tab

• Click Rate Session

Rate with Website:Register at www.devconnections.com/logintoratesession

Go to www.devconnections.com/ratesession

Select this session from the list and rate it

Tell Us What You

Thought of This

Session

Be Entered to

WIN

Prizes!

#ITDEVCON @rob_rich

JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich.

Documents

Transcript of JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich.