Java Script Patterns and Node Idioms by Rob

Java. Script 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 Java. Script programmers learn from Node? #ITDEVCON @rob_rich

JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich What is Java. Script • The most ubiquitous language in the world • You probably have a Java. Script 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 Java. Script Everything in the browser: • HTML: content • CSS: pretty • Java. Script: everything else #ITDEVCON @rob_rich

JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich We generally see curly braces and just use Java. Script … without learning it #ITDEVCON @rob_rich

NODE

JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich What is Node • Server-side Java. Script • Built on Chrome’s V 8 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 lib 1(arg 1, function (err, cb) { lib 2(arg 2, function (err, cb) { lib 3(arg 3, function (err, cb) { lib 4(arg 4, 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'; $. get. JSON(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([ lib 1. bind(null, arg 1), lib 2. bind(null, arg 2), lib 3. bind(null, arg 3), lib 4. bind(null, arg 4) ], 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 • Na. N #ITDEVCON @rob_rich truthy • everything else … thus ===

JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich Java. Script 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. product = {}; //. . . if (their. Var === YAHOO. dept. product. feature. some. Enum. 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 my. Module = (function () { // private variables return { the: interface }; }()); #ITDEVCON @rob_rich

JAVASCRIPT PATTERNS AND NODE IDIOMS • by Rob Richardson • @rob_rich 4. Module loaders • Common. JS: node, browserify • AMD: requirejs • ES 6 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 Java. Script 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