Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Growing Up

15,149 views

Published on

Published in: Technology
  • Be the first to comment

JavaScript Growing Up

  1. 1. JavaScript Growing Up Modules, Platform Consistency and Harmony David Padbury
  2. 2. Between HTML5 and Node, JavaScriptis seeing a staggering level of adoption.
  3. 3. The patterns and tools and practices that will form the foundation of Modern JavaScript are going tohave to come from outside implementations of the language itself - Rebecca Murphey
  4. 4. Modules
  5. 5. Java has importC# has using JavaScript has? Nothing.
  6. 6. So JavaScript authors used what we had inthe language to provide what we needed.
  7. 7. But before we get to that, first some prerequisites.
  8. 8. Everything is global// lib1.jsvar name = Barry;function sayHi() { alert("Hi, Im " + name);}<script src="lib1.js"></script><script> something(); console.log(name); // Barry</script>
  9. 9. Which could make including multiple libraries challenging // lib1.js function something() { console.log(foo); } // lib2.js function something() { console.log(bar); } <script src="lib1.js"></script> <script src="lib2.js"></script> <script> something(); </script>
  10. 10. Using simple JavaScript constructs we can emulate many traditional organization techniques ;(function(lib1) { lib1.something = function() { ... }; })(window.lib1 = window.lib1 || {}); lib1.something(); lib2.something();
  11. 11. function namespace(ns) { var obj = window; ns.split(.).forEach(function(component) { obj = typeof obj[component] !== undefined ? obj[component] : obj[component] = {}; }); return obj;}
  12. 12. (function(data) { data.something = function() { ... };})(namespace(lab49.app.data));
  13. 13. (function(example) { function privateAdd(num1, num2) { return num1 + num2; } example.add = function(num1, num2) { return privateAdd(num1, num2); };})(namespace(lab49.example));console.log(typeof example.add); // functionconsole.log(typeof example.privateAdd); // undefinedconsole.log(typeof privateAdd); // undefined
  14. 14. Server-side JavaScript authors started to talk aboutwhat a more robust module system would look like.
  15. 15. I generally support the CommonJS idea, but let’sbe clear: it’s hardly a specification handed down bythe gods (like ES5); it’s just some people discussing ideas on a mailing list. Most of these ideas are without actual implementations. - Ryan Dahl (creator of node.js)
  16. 16. Introduced a simple API for dealing with modules. require for importing a module. exports for exposing stuff from a module. http://wiki.commonjs.org/wiki/Modules/1.1.1
  17. 17. // math.jsexports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { sum += args[i++]; } return sum;};//increment.jsvar add = require(math).add;exports.increment = function(val) { return add(val, 1);};// program.jsvar inc = require(increment).increment;var a = 1;inc(a); // 2
  18. 18. CommonJS modules are now the de-facto for server based JavaScript.
  19. 19. var http = require(http);var server = http.createServer(function(req, res) { res.writeHead(200, { Content-Type: text/plain }); res.end(Hi Lab!);});
  20. 20. There are now a number of tools to bring CommonJS modules to the browser. https://github.com/substack/node-browserify https://github.com/sstephenson/stitch
  21. 21. var stitch = require(stitch);var express = require(express);var package = stitch.createPackage({ paths: [__dirname + /lib, __dirname + /vendor]});var app = express.createServer();app.get(/application.js, package.createServer());app.listen(3000);
  22. 22. There are some problems with using this module format in the browser.
  23. 23. Asynchronous Module Definition (Commonly known as AMD) https://github.com/amdjs/amdjs-api/wiki/AMD
  24. 24. define for creating a module definition.
  25. 25. define(personView, [models/person], function(person) { return { initialize: function() { ... } };});
  26. 26. AMD is now used by RequireJS, Dojo and even Node.
  27. 27. RequireJS also supports text templates.
  28. 28. Becoming the most common way to structure large JavaScript applications, both on the server and in the browser.
  29. 29. JS.next will be introducing language level modules.These are similar to the modules we’ve been looking at.
  30. 30. module Math { export function add(x, y) { return x + y; }}Math.add(2, 2);import Math.*;add(2,2);
  31. 31. But not much implements that yet. Why do we care? I’ll get to that later.
  32. 32. Platform Consistency
  33. 33. Everyone knows that the biggest suckage in modern JavaScript is dealing with different platforms.
  34. 34. PolyfillA shim that mimics a future API, providing fallback functionality to older browsers. http://stateofhtml5.appspot.com/
  35. 35. You can fake a surprising amount now days.
  36. 36. ;(function(geolocation){ if (geolocation) return; var cache; geolocation = window.navigator.geolocation = {}; geolocation.getCurrentPosition = function(callback){ if (cache) callback(cache); $.getScript(//www.google.com/jsapi,function(){ cache = { coords : { "latitude": google.loader.ClientLocation.latitude, "longitude": google.loader.ClientLocation.longitude } }; callback(cache); }); }; geolocation.watchPosition = geolocation.getCurrentPosition;})(navigator.geolocation);
  37. 37. border-radius: 8px;box-shadow: #666 0px 2px 3px;background: linear-gradient(#eeff99, #66ee33);behavior: url(/PIE.htc); http://css3pie.com/
  38. 38. But just because you can,it doesn’t mean that you should.
  39. 39. But if we are in different environments,we can start with some polyfills that are much simpler.
  40. 40. Array.prototype.forEachArray.prototype.mapArray.prototype.filterArray.prototype.everyArray.prototype.someArray.prototype.reduceArray.prototype.indexOfObject.keysDate.nowDate.prototype.toISOStringFunction.prototype.bindString.prototype.trim
  41. 41. [one, two, three].map(function(word) { return word.length}).filter(function(length) { return length > 3;});
  42. 42. It is not seldom that you see people messing withObject.prototype.This is very bad because it breaks the object-as-hash-tables feature in javascript. Array.prototype.map = function() {...}; var arr = [1,2,3]; for (var p in arr) { console.log(p); } // 1 // 2 // 3 // map - erm, what?http://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/
  43. 43. Array.prototype.map = function() {...};var arr = [1,2,3];for (var p in arr) { if (arr.hasOwnProperty(p)) { console.log(p); }}
  44. 44. So where we can polyfill basic language functionality, take advantage of it. https://github.com/kriskowal/es5-shim
  45. 45. Harmony
  46. 46. JavaScript is the x86 of the web - Brendan Eich (creator of JavaScript)
  47. 47. Google Traceur - JavaScript to JavaScript Compiler http://code.google.com/p/traceur-compiler/
  48. 48. Harmony Features Modules Iterators Iterators and For Each Generators Block Scoped Bindings Destructuring Assignment Default Parameters Rest Parameters Spread Operator Strawman Features Classes Traits Deferred Functions Object Initializer Shorthandhttp://code.google.com/p/traceur-compiler/wiki/LanguageFeatures
  49. 49. Destructuring Assignmentvar [a, [b], c] = [hello, [, , junk], world];alert(a + b + c); // hello, world http://traceur-testbed.herokuapp.com/destructuringArrayAssignment var pt = { x: 23, y: 42 }; var {x, y} = pt; console.log(x); // 23 http://traceur-testbed.herokuapp.com/destructuringObjectAssignment
  50. 50. function slice(list, start = 0, end = list.length) { ...} http://traceur-testbed.herokuapp.com/defaultParameters
  51. 51. function print(...items) { items.forEach(function(item, index) { console.log(index, item); });}print(foo, bar);// 0, foo// 1, bar http://traceur-testbed.herokuapp.com/restParameters
  52. 52. var a1 = [1,2,3], a2 = [];a2.push(...a1);// a1.push.apply(a1, a2) http://traceur-testbed.herokuapp.com/spreadOperator
  53. 53. Deferred / Promisesvar deferred = $.Deferred();// or dojo.Deferred, new Deferred(), etc...// Complete the deferreddeferred.resolve(...args);// Fail the deferreddeferred.reject(...args);// Return a read-only deferreddeferred.promise();// Attach handlers for when resolve or rejecteddeferred.then(function(...args) { ... }, function(...args) {...}); http://wiki.commonjs.org/wiki/Promises
  54. 54. function wait(duration) { var deferred = $.Deferred(); window.setTimeout(function() { deferred.resolve(); }); return deferred.promise();}wait(1000).then(function() { alert(done);});
  55. 55. function deferredWait(timeout) { var d = $.Deferred(); window.setTimeout(function() { d.resolve(); }, timeout); return d;}function waitOnThings() { alert(Starting); await deferredWait(1000); alert(Finished);} http://traceur-testbed.herokuapp.com/await
  56. 56. Thanks for listening!

×