ES6 in Practice
'ECMAScript 2015' == 'ES6'
$ whoami
Erik Wallin
Consultant at DevCode
@c01ac0ca
== vs ===
- === requires same type, == implies a type conversion
[0] == 0; //true
[1] == [1]; //false
[1] == "1"; //trueJavascript equality table
Dirt (cont'd)
Found too often in javascript code bases...
...
// In production code, but is more like a quiz
init: function () {
this.constructor.__super__.init.apply(this, arguments);
}
...
...
var args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
// This is a more correct way, still strange.
var args = Array.prototype.slice.call(arguments);
...'use strict';
- Converting mistakes into errors
- Security
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
‘use strict’;
myVar = 4711; // errorESLint/JSHint
-
Detect errors and potential problems in JavaScript code.
-
Dangerous constructions (e.g. require ===)
-
Styling/coding convensions (spaces, indentation, etc)
-
Should be in a build step
-
Use it!
Javascript needs updates
Despite ‘use strict’/ESLint
- More language features could make the code more expressive
- Reduce noise
- Compare with english vocabulary
-
Compare with java
-
Java8 >> Java7 >~ Java6 >~ Java5 >> Java4
-
-
Will more features really make code of higher quality?
- Removal of dirt is desired!
Which javascript engine runs our code?
Customers on Internet
-
Chrome, Firefox, Safari, IE, mobile
-
V8, SpiderMonkey, JavaScriptCore (SquirrelFish), Chakra (JScript9)
-
Different versions of the browsers have different versions of the javascript engines
-
No control
-
Internal clients
-
IT policy (e.g. only Firefox)
-
Some control
Serverside javascript
-
node.js with V8
-
Full controll
Browser incompatibility
-
Anyone remembers IE6?
Polyfills for monkey patching
-
A polyfill is a piece of code that implements the features that you expect the browser to support natively.
-
Googling for specific parts of ES6
-
Babel.js - http://babeljs.io/
if (!Array.prototype.find) {
Array.prototype.find = function(predicate) {
// implementation goes here
};
}What about language features/syntax?
- How do we write a polypill for arrow functions?
- We can’t patch language features, so we must transform the code in order to let the ES5 : ES6 -> ES5
-
Transpiler (or source-to-source compiler or transcompiler)
Babel.js - http://babeljs.io/
let quadruples = [1, 2, 3].map(i => i * 4); // ES6
var quadruples = [1, 2, 3].map(function(i) {return i * 4;}); // transpiled ES5Source maps
-
Transform back from a minified, concatenated, ES5 file to our original ES6 files
-
Debug our original files in browser!
-
The browser downloads source maps when “developer tools” is open
-
Make sure your build chain produces source maps.
Alternative languages
Same principles as ES6 with transpiling
-
Typescript - http://www.typescriptlang.org/
-
Coffeescript - http://coffeescript.org/
-
Closurescript - https://github.com/clojure/clojurescript
-
Scala.js - http://www.scala-js.org/
Framework/library integration
-
Most frameworks/libraries are designed for ES5
-
Not as many tutorials with ES6
-
I believe that the framework race will continue and make use of all new features and standardized APIs
How to proceed?
-
Do a presentation at your job
-
Workshop/discussions in your team
-
What is good/bad
-
Code conventions
-
-
Start with a small project