The State of JavaScript


Published on

Our favorite language is now powering everything from event-driven servers to robots to Git clients to 3D games. The JavaScript package ecosystem has quickly outpaced past that of most other languages, allowing our vibrant community to showcase their talent. The front-end framework war has been taken to the next level, with heavy-hitters like Ember and Angular ushering in the new generation of long-lived, component-based web apps. The extensible web movement, spearheaded by the newly-reformed W3C Technical Architecture Group, has promised to place JavaScript squarely at the foundation of the web platform. Now, the language improvements of ES6 are slowly but surely making their way into the mainstream— witness the recent interest in using generators for async programming. And all the while, whispers of ES7 features are starting to circulate…

JavaScript has grown up. Now it's time to see how far it can go.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • (BE EXCITED!)It’s fun to take a step back and see how we got here. It’s been a long time since JavaScript came out!
  • The State of JavaScript

    1. 1. The State of JavaScript
    2. 2. form validation image rollovers 1995 ECMA-262 edition 1 Internet Explorer 4 DHTML 1997 ES3 (function expressions, try/catch/finally, regexps, …)1999
    3. 3. WHATWG formed, focusing on web applications2004 Ajax (XMLHttpRequest) appears2005 jQuery 1.02006
    4. 4. V8 released, and the speed race begins JS: The Good Parts released 2008 ES5 ServerJS/CommonJS Node.js PhoneGap JSConf 2009 Backbone.js RequireJS 2010
    5. 5. Windows 8 Nodecopter 2012 Nodebots Ember Angular The Extensible Web Manifesto asm.js 2013 ES6 ES7 ??? 2014
    6. 6. JS on the front-end
    7. 7. In the beginning, there was
    8. 8. then we said, i have heard about this “mvc” thing! and there was
    9. 9. then we looked upon data-binding, and saw it was good. and there was
    10. 10. HTML enhanced for web apps!
    11. 11. A framework for creating ambitious web applications.
    12. 12. but, why let the libraries have all the fun?
    13. 13. Web components are… Shadow DOM Custom Elements <template> HTML imports
    14. 14. polymer, the web components prolyfill
    15. 15. #extendthewebforward
    16. 16. JS on everything
    17. 17. node repl.js drone> takeoff() drone> clockwise(0.5) drone> front(1) drone> land()
    18. 18. var five = require("johnny-five"); var board = new five.Board(); board.on("ready", function () { var sonar = new five.Sonar("A2"); sonar.on("data", function() { console.log(; }); });
    19. 19. node-serialport ?
    20. 20. node-serialport ???
    21. 21. node-serialport port.on("open", function () { port.on("data", function (data) { console.log(data); }); port.write("lsn", function (err, res) { // … }); });
    22. 22. JS the language
    23. 23. asm.js an extraordinarily optimizable, low-level subset of JavaScript
    24. 24. js as the assembly of the web
    25. 25. js as the vm of the web
    26. 26. .NET JVM Ruby Python Haskell
    27. 27. traceur
    28. 28. es6ify
    29. 29. es6 goals Be a better language for writing: - Complex applications - Libraries (including the DOM) shared by those applications - Code generators targeting the new edition
    30. 30. what’s in es6 anyway: syntax Class sugar: class, extends, super Arrow functions: => x * x) Destructuring: var { x, y } = getPoint() Rest/spread: var *first, …rest+ = els; Math.max(...myArray) Parameter defaults: function parseInt(x, base = 10) { }
    31. 31. what’s in es6 anyway: data structures Map: object-to-object O(1) access time Set: O(1) lookup and storage WeakMap/WeakSet: private state and branding Iteration protocol: for-of across anything, even user iterables Typed objects: const Point = new StructType({ x: uint32, y: uint32 });
    32. 32. what’s in es6 anyway: game-changers Generators: lazy sequences and async/await-like syntax Promises: standardized async; play well with generators Subclassable builtins: custom arrays, dates, regexps, … Proxies: virtual objects, no more .get(…)/.set(…, …)! Template strings: jsx`<a href="${url}">${text}</a>` Modules: an end to the AMD/CommonJS schism
    33. 33. es7 is one more than es6
    34. 34. what maybe possibly could be in es7 Weak references: useful for e.g. auto-cleanup of data-binding Async/await: function^() { var res = await promise; } Object.observe: no-overhead observation Value types: both built-in (integers!) and user-defined Bind operator: var method =