JavaScript Patterns and Node Idioms by Rob Richardson @rob_rich #ITDEVCON @rob_rich.
-
Upload
ellen-holland -
Category
Documents
-
view
219 -
download
1
Transcript of 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
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
What canclient-side JavaScriptprogrammers learn
from Node?
#ITDEVCON @rob_rich
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
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
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
We generally seecurly braces
and just use JavaScript… without learning it
#ITDEVCON @rob_rich
NODENODE
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
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
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
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
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
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
\
\ \
===================>
/ /
/
// weeeeee......
The Airplane Wing
#ITDEVCON @rob_rich
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
NODENODE
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
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
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
JAVASCRIPTJAVASCRIPT
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
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
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
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
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
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 PROTECT THE GLOBAL SCOPESCOPE
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
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
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
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
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
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
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich
4. Module loaders
#ITDEVCON @rob_rich
https://xkcd.com/927/
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
JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @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