es2015 ready angular web stack par douglas duteil à best of web 2015
TRANSCRIPT
ES2015 ready Angular web stack ?
Douglas Duteil @douglasduteil
Angular 1.x
Douglas Duteil @douglasduteil
….…. Dec 18, 2014
Angular 1.x
Douglas Duteil @douglasduteil
Since Feb 15, 2015
ES2015 ready Angular web stack ?
Douglas Duteil @douglasduteil
Me, Myself and I
Douglas Duteil@douglasduteil
Front End Dev at SFΞIRMembre de Angular UICofounder of OneDoes
Once upon a time…
Fail often
The winning stack
ES2015 ?
ECMAScript 2015
● ECMAScript the spec of JavaScript
● Last version : ES5 => ES2009
● New one : ES6 => ES2015
ES2015 aka ES6● In Browser Modularity System (import/export)
● Enhanced browser api (Object, Array, Promise, Loader...)
● Syntaxic sugar (spreading, destructuring, fat arrows...)
ES6 is not ES5...
Learn it !
Target attitude
Critical path first
● Load the first page fast ! ○ Inline all the critical stuff !
● Async loading for the rest
● The rest can be anything ! ○ I said anything○ From any source....
Critical path first
Page Critical Resources
SystemJS
Bootstrapping
What’s SystemJS
● Spec-compliant universal module loader
● Builded on top of the Loader API (ES7)
● Loads: ○ ES6 modules, AMD, CommonJS, global scripts○ And more through plugins (CSS, JSON, etc…)
Bootstrapping
<script
src="https://github.jspm.io/systemjs/[email protected]/dist/system.js">
</script>
<script>
// import 'app.js' from the current URL
System.import('app');
</script>
...System.config({
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js"
}
});
System.config({
"map": {
"angular": "github:angular/[email protected]",
"angular-mocks": "github:angular/[email protected]"
}
}); NOPE
JSPM
GANG
JSPM
JSPM Stargate
What’s JSPM
● Package manager for the SystemJS universal module loader
● Can use npm and github endpoints
● Auto create/update a config file for SystemJS from your package.json
Simple plz
# Create / validate project configuration file
jspm init
# Install and config your dependencies
jspm install angular angular-mocks
Simple plz$ tree -L 4 jspm_packagesjspm_packages├── github│ └── angular│ ├── [email protected]│ │ ├── angular.js│ │ └── ...│ ├── [email protected]│ ├── [email protected]│ │ ├── angular-mocks.js│ │ └── ...│ └── [email protected]├── es6-module-loader.js├── system.js├── traceur.js└── ...
Simple plz$ tree -L 4 jspm_packagesjspm_packages├── github│ └── angular│ ├── [email protected]│ │ ├── angular.js│ │ └── ...│ ├── [email protected]│ ├── [email protected]│ │ ├── angular-mocks.js│ │ └── ...│ └── [email protected]├── es6-module-loader.js├── system.js├── traceur.js└── ...
The win ?
Page Critical Resources
SystemJS
Bootstrapping
System.config
JSPM
Vendors Sources
ngColloc
Conflicts ?
● Module system
● Dependency injection
● Utilities
Module system
// on b.js
angular.module('b', [
'a'
]);
// on a.js
angular.module('a', []);
● ES5
Module system
// on b.js
import angular from 'angular';
import aModule from './a';
export default angular.module('b', [
aModule.name
]);
// on a.js
import angular from 'angular';
export default angular.module('a', []);
● ES6
Dependency injection// on a.js
angular.module('a', [])
.factory('aFacto', aFacto)
;
/**
* @ngInject
*/
function aFacto(){
// ...
}
● ES5
Dependency injection// on b.js
angular.module('b', ['a'])
.controller('BbCtrl', BbCtrl)
;
/**
* @ngInject
*/
function BbCtrl(aFacto){
// ...
}
● ES5
Dependency injection// on a.js
export function aFacto(){
// ...
}
● ES6
Dependency injection// on b.js
import angular from 'angular';
import {aFacto} from './a';
export default angular.module('b', [])
.controller('BbCtrl', BbCtrl);
/**
* @ngInject
*/
function BbCtrl(){
// aFacto bla bla bla...
}
● ES6
Utilities
var opts = angular.extend({}, defaults, options);
// to ES6
let opts = Object.assign({}, defaults, options);
// or ES7
let opts = {...defaults, ...options}
Quality matters
Quality matters
● Well known minimal ES5 quality tests :
○ JSHINT / ESLint○ Karma unit tests○ Karma coverage
● JSHINT / ESLint :[ "esnext" option ][ "ecmaFeatures" options ]
● Karma unit tests :Karma babel preprocessorKarma jspm
● Karma coverage :Karma coverage
1 2 3
Quality matters
peerDependencyIstanbul
Karma preprocessor
Gulp
peerDependencyIsparta
Karma-babel- preprocessor
Gulp-babel
Isparta !
Isparta !
● Transform ES6 to ES5 (with babel)
● Extract its abstract syntax tree (AST)
● Run the coverage over the AST
● Post process the result with a sourcemap
Isparta !
Conclusion
Ghetto Coding
Ispartaaaaa...
Need to be merged to Istanbul
Thanks
Merry
X mascript
Merry
X mascript
Merry
Q & A
Douglas Duteil @douglasduteil