JavaScript Patterns and Node Idioms by Rob Richardson

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 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 and follow him on twitter

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob What can client-side JavaScript programmers learn from Node?

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 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

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob Everything in the browser: HTML: content CSS: pretty JavaScript: everything else Why JavaScript

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob We generally see curly braces and just use JavaScript … without learning it

NODE

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 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

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 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 *promises

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob mylib(in, data, function (err, arg, results) { if (err) { return; // handle error } // handle success }); The Callback Pattern

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 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

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob lib1(arg1, function (err, cb) { lib2(arg2, function (err, cb) { lib3(arg3, function (err, cb) { lib4(arg4, function (err, cb) { // done }); The Airplane Wing

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob \ \ \ ===================> / / / // weeeeee The Airplane Wing

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob var indata = {some:'data'}; var url = '/path/to/service'; $.getJSON(url, indata, function (outdata) { if (outdata.some !== indata.some) { // take action } }); The Callback Pattern

NODE

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob The Callback Pattern Small modules orchestrated together Package manager: npm Culture of Testing Lessons from Node

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob Single purpose: asynchronously process things Single result: one callback when it’s done Browser and node tests The async module

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 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

JAVASCRIPT

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob or ["prop"] Property: a value in the dictionary Method: a function in the dictionary Dictionaries have no private keys Every object is a Dictionary

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob Think delegate in C#, function pointer in C/C++ Functions define scope, curly braces don’t Every function is an object

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob function myfunc() { console.log(myfunc.data); }; myfunc.data = 2; Every function is an object

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob missing parameters are undefined arguments holds extra parameters Every parameter is optional

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob Truthy / Falsey falsey 0 false "" null undefined NaN truthy everything else … thus ===

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob JavaScript differences Object is Dictionary Every function is an object Functions define scope Every function parameter is optional Truthy / Falsey

PROTECT THE GLOBAL SCOPE

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob window is a dictionary too What if we both name it calendar ? What if we both name it i ? Why Protect Global Scope?

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 0. Head in the sand

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob var YAHOO = {}; YAHOO.dept = {}; YAHOO.dept.product = {}; //... if (theirVar === YAHOO.dept.product.feature.someEnum.value) { 1. Nested objects

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob (function () { // <-- no name, out of dict. // functions define scope // therefore "private" variables }()); // <-- execute it right away 2. IIFE

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob var myModule = (function () { // private variables return { the: interface }; }()); 3. Revealing Module Pattern

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob CommonJS: node, browserify AMD: requirejs ES6 modules: angular 2 4. Module loaders

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 4. Module loaders

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob 0. Head in the Sand 1. Nested objects 2. IIFE 3. Revealing Module Pattern 4. Module loaders Protect Global Scope

JAVASCRIPT PATTERNS AND NODE IDIOMS by Rob JavaScript has come of age We can learn from Node

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 Go to Select this session from the list and rate it Tell Us What You Thought of This Session Be Entered to WIN Prizes!