JavaScript Growing Up Modules, Platform Consistency and Harmony              David Padbury
Between HTML5 and Node, JavaScriptis seeing a staggering level of adoption.
The patterns and tools and practices that will form the foundation of Modern JavaScript are going tohave to come from outs...
Modules
Java has importC# has using JavaScript has?    Nothing.
So JavaScript authors used what we had inthe language to provide what we needed.
But before we get to that, first some prerequisites.
Everything is global// lib1.jsvar name = Barry;function sayHi() {    alert("Hi, Im " + name);}<script src="lib1.js"></scri...
Which could make including multiple libraries challenging         // lib1.js         function something() {             co...
Using simple JavaScript constructs we can emulate many          traditional organization techniques     ;(function(lib1) {...
function namespace(ns) {    var obj = window;    ns.split(.).forEach(function(component) {        obj = typeof obj[compone...
(function(data) {    data.something = function() {        ...    };})(namespace(lab49.app.data));
(function(example) {   function privateAdd(num1, num2) {       return num1 + num2;   }   example.add = function(num1, num2...
Server-side JavaScript authors started to talk aboutwhat a more robust module system would look like.
I generally support the CommonJS idea, but let’sbe clear: it’s hardly a specification handed down bythe gods (like ES5); it...
Introduced a simple API for dealing with modules.       require for importing a module.  exports for exposing stuff from a...
// math.jsexports.add = function() {    var sum = 0, i = 0, args = arguments, l = args.length;    while (i < l) {        s...
CommonJS modules are now the de-facto    for server based JavaScript.
var http = require(http);var server = http.createServer(function(req, res) {    res.writeHead(200, { Content-Type: text/pl...
There are now a number of tools to bring  CommonJS modules to the browser.         https://github.com/substack/node-browse...
var stitch = require(stitch);var express = require(express);var package = stitch.createPackage({  paths: [__dirname + /lib...
There are some problems with using this    module format in the browser.
Asynchronous Module Definition  (Commonly known as AMD)    https://github.com/amdjs/amdjs-api/wiki/AMD
define for creating a module definition.
define(personView, [models/person], function(person) {    return {        initialize: function() {            ...        }...
AMD is now used by RequireJS, Dojo and even Node.
RequireJS also supports text templates.
Becoming the most common way to structure large JavaScript    applications, both on the server and in the browser.
JS.next will be introducing language level modules.These are similar to the modules we’ve been looking at.
module Math {    export function add(x, y) {        return x + y;    }}Math.add(2, 2);import Math.*;add(2,2);
But not much implements that yet.        Why do we care?       I’ll get to that later.
Platform Consistency
Everyone knows that the biggest suckage in modern    JavaScript is dealing with different platforms.
PolyfillA shim that mimics a future API, providing fallback functionality to older browsers.            http://stateofhtml5...
You can fake a surprising amount now days.
;(function(geolocation){  if (geolocation) return;  var cache; geolocation = window.navigator.geolocation = {}; geolocatio...
border-radius: 8px;box-shadow: #666 0px 2px 3px;background: linear-gradient(#eeff99, #66ee33);behavior: url(/PIE.htc);    ...
But just because you can,it doesn’t mean that you should.
But if we are in different environments,we can start with some polyfills that are much simpler.
Array.prototype.forEachArray.prototype.mapArray.prototype.filterArray.prototype.everyArray.prototype.someArray.prototype.r...
[one, two, three].map(function(word) {    return word.length}).filter(function(length) {    return length > 3;});
It is not seldom that you see people messing withObject.prototype.This is very bad because it breaks the        object-as-...
Array.prototype.map = function() {...};var arr = [1,2,3];for (var p in arr) {    if (arr.hasOwnProperty(p)) {        conso...
So where we can polyfill basic language functionality,              take advantage of it.                https://github.com...
Harmony
JavaScript is the x86 of the web     - Brendan Eich (creator of JavaScript)
Google Traceur - JavaScript to JavaScript Compiler              http://code.google.com/p/traceur-compiler/
Harmony Features                      Modules                      Iterators               Iterators and For Each         ...
Destructuring Assignmentvar [a, [b], c] = [hello, [, , junk], world];alert(a + b + c); // hello, world              http:/...
function slice(list, start = 0, end = list.length) {    ...}               http://traceur-testbed.herokuapp.com/defaultPar...
function print(...items) {    items.forEach(function(item, index) {        console.log(index, item);    });}print(foo, bar...
var a1 = [1,2,3],    a2 = [];a2.push(...a1);// a1.push.apply(a1, a2) http://traceur-testbed.herokuapp.com/spreadOperator
Deferred / Promisesvar deferred = $.Deferred();// or dojo.Deferred, new Deferred(), etc...// Complete the deferreddeferred...
function wait(duration) {    var deferred = $.Deferred();    window.setTimeout(function() {        deferred.resolve();    ...
function deferredWait(timeout) {    var d = $.Deferred();    window.setTimeout(function() {        d.resolve();    }, time...
Thanks for listening!
JavaScript Growing Up
Upcoming SlideShare
Loading in...5
×

JavaScript Growing Up

6,894

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,894
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
73
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×