JavaScript Patterns and Node Idioms by Rob Richardson https://robrich/ @rob_rich

1. JavaScript Patternsand Node Idiomsby Rob Richardsonhttps://robrich.org/@rob_rich #ITDEVCON @rob_rich

2. 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

3. What canclient-side JavaScriptprogrammers learnfrom Node? #ITDEVCON @rob_rich

4. 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

5. Why JavaScript Everything in the browser: • HTML: content • CSS: pretty • JavaScript: everything else #ITDEVCON @rob_rich

6. We generally seecurly bracesand just use JavaScript… without learning it #ITDEVCON @rob_rich

7. Node

8. 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

9. *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

10. The Callback Pattern mylib(in, data, function (err, arg, results) { if (err) { return; // handle error } // handle success }); #ITDEVCON @rob_rich

11. The Callback Pattern Benefits Drawbacks No run state / handle The airplane wing of nested callbacks • Elegant asynchrony • Simplest solution • Any number of arguments • Single result function #ITDEVCON @rob_rich

12. 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

13. The Airplane Wing \ \ \ ===================> / / / // weeeeee...... #ITDEVCON @rob_rich

14. 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

15. Node

16. Lessons from Node • The Callback Pattern • Small modules orchestrated together • Package manager: npm • Culture of Testing #ITDEVCON @rob_rich

17. 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

18. 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

19. JavaScript

20. 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

21. Every function is an object • Think delegate in C#, function pointer in C/C++ • Functions define scope, curly braces don’t #ITDEVCON @rob_rich

22. Every function is an object function myfunc() { console.log(myfunc.data); }; myfunc.data = 2; #ITDEVCON @rob_rich

23. Every parameter is optional • missing parameters are undefined • arguments holds extra parameters #ITDEVCON @rob_rich

24. Truthy / Falsey falsey truthy everything else … thus === • 0 • false • "" • null • undefined • NaN #ITDEVCON @rob_rich

25. 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

26. Protect the Global Scope

27. 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

28. 0. Head in the sand http://theprofoundprogrammer.com/post/28552672458/text-maybe-a-clean-build-will-fix-it #ITDEVCON @rob_rich

29. 1. Nested objects var YAHOO = {}; YAHOO.dept = {}; YAHOO.dept.product = {}; // ... if (theirVar === YAHOO.dept.product.feature.someEnum.value) { #ITDEVCON @rob_rich

30. 2. IIFE (function () { // <-- no name, out of dict. // functions define scope // therefore "private" variables }()); // <-- execute it right away #ITDEVCON @rob_rich

31. 3. Revealing Module Pattern var myModule = (function () { // private variables return { the: interface }; }()); #ITDEVCON @rob_rich

32. 4. Module loaders • CommonJS: node, browserify • AMD: requirejs • ES6 modules: angular 2 #ITDEVCON @rob_rich

33. 4. Module loaders https://xkcd.com/927/ #ITDEVCON @rob_rich

34. Protect Global Scope 0. Head in the Sand 1. Nested objects 2. IIFE 3. Revealing Module Pattern 4. Module loaders #ITDEVCON @rob_rich

35. JavaScript has come of ageWe can learn from Node #ITDEVCON @rob_rich

36. QUESTIONS?@rob_rich• https://robrich.org/

37. Rate with Mobile App: Rate This Session Now! Tell Us What You Thought of This Session 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