JavaScript Patterns
and Node Idioms
by Rob Richardson
https://robrich.org/
@rob_rich
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
About Me
Rob 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
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
What can
client-side JavaScript
programmers learn
from Node?
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
What is JavaScript
• 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
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Why JavaScript
Everything in the browser:
• HTML: content
• CSS: pretty
• JavaScript: everything else
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
We generally see
curly braces
and just use JavaScript
… without learning it
#ITDEVCON @rob_rich
NODE
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
What is Node
• Server-side JavaScript
• Built on Chrome’s V8 engine
• Asynchronous to a fault
• There is no Thread.sleep();
• So we use the callback pattern
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
*promises
Promises are built in with ES v. 6,
but it’s a higher-level concept
and it isn’t the dominant pattern
so there’s friction when training others
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
The Callback Pattern
mylib(in, data, function (err, arg, results) {
if (err) {
return; // handle error
}
// handle success
});
#ITDEVCON @rob_rich
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
#ITDEVCON @rob_rich
Drawbacks
• No run state / handle
• The airplane wing of
nested callbacks
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
The Airplane Wing
lib1(arg1, function (err, cb) {
lib2(arg2, function (err, cb) {
lib3(arg3, function (err, cb) {
lib4(arg4, function (err, cb) {
// done
});
});
});
});
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
The Airplane Wing
\
\
\
===================>
/
/
/
// weeeeee......
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
The Callback Pattern
var indata = {some:'data'};
var url = '/path/to/service';
$.getJSON(url, indata, function (outdata) {
if (outdata.some !== indata.some) {
// take action
}
}
});
#ITDEVCON @rob_rich
NODE
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Lessons from Node
• The Callback Pattern
• Small modules orchestrated together
• Package manager: npm
• Culture of Testing
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
The async module
Single purpose:
• asynchronously process things
Single result:
• one callback when it’s done
Browser and node tests
https://npmjs.org/async • https://github.com/caolan/async
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
The async module
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
});
#ITDEVCON @rob_rich
JAVASCRIPT
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Every object is a
Dictionary<string, object>
• .prop or ["prop"]
• Property: a value in the dictionary
• Method: a function in the dictionary
• Dictionaries have no private keys
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Every function is an object
• Think delegate in C#,
function pointer in C/C++
• Functions define scope,
curly braces don’t
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Every function is an object
function myfunc() {
console.log(myfunc.data);
};
myfunc.data = 2;
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Every parameter is optional
• missing parameters are undefined
• arguments holds extra parameters
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Truthy / Falsey
falsey
• 0
• false
• ""
• null
• undefined
• NaN
#ITDEVCON @rob_rich
truthy
• everything else
… thus ===
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
PROTECT THE GLOBAL SCOPE
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Why Protect Global Scope?
window is a dictionary too
What if we both name it calendar?
What if we both name it i?
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
0. Head in the sand
http://theprofoundprogrammer.com/post/28552672458/text-maybe-a-clean-build-will-fix-it
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
1. Nested objects
var YAHOO = {};
YAHOO.dept = {};
YAHOO.dept.product = {};
// ...
if (theirVar ===
YAHOO.dept.product.feature.someEnum.value) {
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
2. IIFE
(function () { // <-- no name, out of dict.
// functions define scope
// therefore "private" variables
}()); // <-- execute it right away
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
3. Revealing Module Pattern
var myModule = (function () {
// private variables
return {
the: interface
};
}());
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
4. Module loaders
• CommonJS: node, browserify
• AMD: requirejs
• ES6 modules: angular 2
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
4. Module loaders
https://xkcd.com/927/
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
Protect Global Scope
0. Head in the Sand
1. Nested objects
2. IIFE
3. Revealing Module Pattern
4. Module loaders
#ITDEVCON @rob_rich
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
JavaScript has come of age
We can learn from Node
#ITDEVCON @rob_rich
QUESTIONS?
@rob_rich • https://robrich.org/
Rate This Session Now!
Tell Us
What You
Thought
of This
Session
Rate with Mobile App:
•
Select the session from the
Agenda or Speakers menus
•
Select the Actions tab
•
Click Rate Session
Be Entered to
WIN
Prizes!
Rate with Website:
Register at www.devconnections.com/logintoratesession
Go to www.devconnections.com/ratesession
Select this session from the list and rate it
#ITDEVCON @rob_rich