The State of JavaScript
-
Upload
domenic-denicola -
Category
Technology
-
view
2.759 -
download
1
description
Transcript of The State of JavaScript
The State of JavaScript
form validation
image rollovers
1995
ECMA-262 edition 1
Internet Explorer 4
DHTML
1997
ES3 (function expressions, try/catch/finally, regexps, …)1999
WHATWG formed, focusing on web applications2004
Ajax (XMLHttpRequest) appears2005
jQuery 1.02006
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
Windows 8
Nodecopter
2012
Nodebots
Ember
Angular
The Extensible Web Manifesto
asm.js
2013
ES6
ES7
???
2014
JS on the front-end
In the beginning, there was
then we said, i have heard about this “mvc” thing!
and there was
then we looked upon data-binding, and saw it was good.
and there was
HTML enhanced for web apps!
A framework for creating ambitious web applications.
but, why let the libraries have all the fun?
Web components are…
Shadow DOM
Custom Elements
<template>
HTML imports
polymer, the web components prolyfill
JS on everything
node repl.js
drone> takeoff()
drone> clockwise(0.5)
drone> front(1)
drone> land()
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(this.cm); });});
node-serialport
?
node-serialport
???
node-serialportport.on("open", function () { port.on("data", function (data) { console.log(data); }); port.write("ls\n", function (err, res) { // … });});
JS the language
asm.jsan extraordinarily optimizable, low-level subset of JavaScript
js as the assembly of the web
js as the vm of the web
.NET
JVM
Ruby
Python
Haskell
traceur
es6ify
es6 goals Be a better language for writing:
- Complex applications
- Libraries (including the DOM) shared by those applications
- Code generators targeting the new edition
what’s in es6 anyway: syntax
Class sugar: class, extends, super
Arrow functions: arr.map(x => x * x)
Destructuring: var { x, y } = getPoint()
Rest/spread: var [first, …rest] = els; Math.max(...myArray)
Parameter defaults: function parseInt(x, base = 10) { }
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 });
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
es7 is one more than es6
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 = ::obj.foo