Your SlideShare is downloading. ×
0
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
JavaScript Growing Up
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Growing Up

6,650

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 1. JavaScript Growing Up Modules, Platform Consistency and Harmony David Padbury
    • 2. Between HTML5 and Node, JavaScriptis seeing a staggering level of adoption.
    • 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. Modules
    • 5. Java has importC# has using JavaScript has? Nothing.
    • 6. So JavaScript authors used what we had inthe language to provide what we needed.
    • 7. But before we get to that, first some prerequisites.
    • 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. 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. 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. function namespace(ns) { var obj = window; ns.split(.).forEach(function(component) { obj = typeof obj[component] !== undefined ? obj[component] : obj[component] = {}; }); return obj;}
    • 12. (function(data) { data.something = function() { ... };})(namespace(lab49.app.data));
    • 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. Server-side JavaScript authors started to talk aboutwhat a more robust module system would look like.
    • 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. 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. // 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. CommonJS modules are now the de-facto for server based JavaScript.
    • 19. var http = require(http);var server = http.createServer(function(req, res) { res.writeHead(200, { Content-Type: text/plain }); res.end(Hi Lab!);});
    • 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. 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. There are some problems with using this module format in the browser.
    • 23. Asynchronous Module Definition (Commonly known as AMD) https://github.com/amdjs/amdjs-api/wiki/AMD
    • 24. define for creating a module definition.
    • 25. define(personView, [models/person], function(person) { return { initialize: function() { ... } };});
    • 26. AMD is now used by RequireJS, Dojo and even Node.
    • 27. RequireJS also supports text templates.
    • 28. Becoming the most common way to structure large JavaScript applications, both on the server and in the browser.
    • 29. JS.next will be introducing language level modules.These are similar to the modules we’ve been looking at.
    • 30. module Math { export function add(x, y) { return x + y; }}Math.add(2, 2);import Math.*;add(2,2);
    • 31. But not much implements that yet. Why do we care? I’ll get to that later.
    • 32. Platform Consistency
    • 33. Everyone knows that the biggest suckage in modern JavaScript is dealing with different platforms.
    • 34. PolyfillA shim that mimics a future API, providing fallback functionality to older browsers. http://stateofhtml5.appspot.com/
    • 35. You can fake a surprising amount now days.
    • 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. border-radius: 8px;box-shadow: #666 0px 2px 3px;background: linear-gradient(#eeff99, #66ee33);behavior: url(/PIE.htc); http://css3pie.com/
    • 38. But just because you can,it doesn’t mean that you should.
    • 39. But if we are in different environments,we can start with some polyfills that are much simpler.
    • 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. [one, two, three].map(function(word) { return word.length}).filter(function(length) { return length > 3;});
    • 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. Array.prototype.map = function() {...};var arr = [1,2,3];for (var p in arr) { if (arr.hasOwnProperty(p)) { console.log(p); }}
    • 44. So where we can polyfill basic language functionality, take advantage of it. https://github.com/kriskowal/es5-shim
    • 45. Harmony
    • 46. JavaScript is the x86 of the web - Brendan Eich (creator of JavaScript)
    • 47. Google Traceur - JavaScript to JavaScript Compiler http://code.google.com/p/traceur-compiler/
    • 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. 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. function slice(list, start = 0, end = list.length) { ...} http://traceur-testbed.herokuapp.com/defaultParameters
    • 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. var a1 = [1,2,3], a2 = [];a2.push(...a1);// a1.push.apply(a1, a2) http://traceur-testbed.herokuapp.com/spreadOperator
    • 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. function wait(duration) { var deferred = $.Deferred(); window.setTimeout(function() { deferred.resolve(); }); return deferred.promise();}wait(1000).then(function() { alert(done);});
    • 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. Thanks for listening!

    ×