![Page 1: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/1.jpg)
JavaScript Patternsand Node Idioms
by Rob Richardsonhttps://robrich.org/@rob_rich
#ITDEVCON @rob_rich
![Page 2: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/3.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
What canclient-side JavaScriptprogrammers learn
from Node?
#ITDEVCON @rob_rich
![Page 4: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/4.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @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
![Page 5: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/5.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Everything in the browser:•HTML: content•CSS: pretty•JavaScript: everything else
Why JavaScript
#ITDEVCON @rob_rich
![Page 6: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/6.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
We generally seecurly braces
and just use JavaScript… without learning it
#ITDEVCON @rob_rich
![Page 7: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/7.jpg)
NODENODE
![Page 8: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/8.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
• 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
![Page 9: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/9.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @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
![Page 10: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/10.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
mylib(in, data, function (err, arg, results) {
if (err) {
return; // handle error
}
// handle success
});
The Callback Pattern
#ITDEVCON @rob_rich
![Page 11: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/11.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
The Callback Pattern
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
![Page 12: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/12.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
lib1(arg1, function (err, cb) {
lib2(arg2, function (err, cb) {
lib3(arg3, function (err, cb) {
lib4(arg4, function (err, cb) {
// done
});
});
});
});
The Airplane Wing
#ITDEVCON @rob_rich
![Page 13: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/13.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
\
\ \
===================>
/ /
/
// weeeeee......
The Airplane Wing
#ITDEVCON @rob_rich
![Page 14: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/14.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
var indata = {some:'data'};
var url = '/path/to/service';
$.getJSON(url, indata, function (outdata) {
if (outdata.some !== indata.some) {
// take action
}
}
});
The Callback Pattern
#ITDEVCON @rob_rich
![Page 15: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/15.jpg)
NODENODE
![Page 16: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/16.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
• The Callback Pattern• Small modules orchestrated together• Package manager: npm• Culture of Testing
Lessons from Node
#ITDEVCON @rob_rich
![Page 17: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/17.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @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
![Page 18: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/18.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
async.parallel([
lib1.bind(null, arg1),
lib2.bind(null, arg2),
lib3.bind(null, arg3),
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
![Page 19: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/19.jpg)
JAVASCRIPTJAVASCRIPT
![Page 20: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/20.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
• .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
![Page 21: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/21.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @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
![Page 22: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/22.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
function myfunc() {
console.log(myfunc.data);
};
myfunc.data = 2;
Every function is an object
#ITDEVCON @rob_rich
![Page 23: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/23.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
• missing parameters are undefined• arguments holds extra parameters
Every parameter is optional
#ITDEVCON @rob_rich
![Page 24: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/24.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Truthy / Falsey
falsey• 0• false• ""• null• undefined• NaN
truthy• everything else
… thus ===#ITDEVCON @rob_rich
![Page 25: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/25.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @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
![Page 26: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/26.jpg)
PROTECT THE GLOBAL PROTECT THE GLOBAL SCOPESCOPE
![Page 27: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/27.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
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
![Page 28: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/28.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
0. Head in the sand
#ITDEVCON @rob_rich
http://theprofoundprogrammer.com/post/28552672458/text-maybe-a-clean-build-will-fix-it
![Page 29: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/29.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
var YAHOO = {};
YAHOO.dept = {};
YAHOO.dept.product = {};
// ...
if (theirVar === YAHOO.dept.product.feature.someEnum.value) {
1. Nested objects
#ITDEVCON @rob_rich
![Page 30: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/30.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
(function () { // <-- no name, out of dict.
// functions define scope
// therefore "private" variables
}()); // <-- execute it right away
2. IIFE
#ITDEVCON @rob_rich
![Page 31: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/31.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
var myModule = (function () {
// private variables
return {
the: interface
};
}());
3. Revealing Module Pattern
#ITDEVCON @rob_rich
![Page 32: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/32.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
• CommonJS: node, browserify• AMD: requirejs• ES6 modules: angular 2
4. Module loaders
#ITDEVCON @rob_rich
![Page 33: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/33.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
4. Module loaders
#ITDEVCON @rob_rich
https://xkcd.com/927/
![Page 34: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/34.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
0. Head in the Sand1. Nested objects2. IIFE3. Revealing Module Pattern4. Module loaders
Protect Global Scope
#ITDEVCON @rob_rich
![Page 35: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/35.jpg)
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
JavaScript has come of age
We can learn from Node
#ITDEVCON @rob_rich
![Page 36: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/36.jpg)
QUESTIONS?QUESTIONS?@rob_rich @rob_rich • • https://robrich.org/https://robrich.org/
![Page 37: JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich](https://reader030.vdocuments.us/reader030/viewer/2022032709/56649ebb5503460f94bc313a/html5/thumbnails/37.jpg)
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