SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra
Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015
Transcript of Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015
![Page 1: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/1.jpg)
ES2015 ready Angular web stack ?
Douglas Duteil @douglasduteil
![Page 2: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/2.jpg)
Angular 1.x
Douglas Duteil @douglasduteil
….…. Dec 18, 2014
![Page 3: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/3.jpg)
Angular 1.x
Douglas Duteil @douglasduteil
Since Feb 15, 2015
![Page 4: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/4.jpg)
ES2015 ready Angular web stack ?
Douglas Duteil @douglasduteil
![Page 5: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/5.jpg)
Me, Myself and I
Douglas Duteil@douglasduteil
Front End Dev at SFΞIRMembre de Angular UICofounder of OneDoes
![Page 6: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/6.jpg)
Once upon a time…
![Page 8: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/8.jpg)
Fail often
![Page 9: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/9.jpg)
The winning stack
![Page 10: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/10.jpg)
ES2015 ?
![Page 11: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/11.jpg)
ECMAScript 2015
● ECMAScript the spec of JavaScript
● Last version : ES5 => ES2009
● New one : ES6 => ES2015
![Page 12: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/12.jpg)
ES2015 aka ES6● In Browser Modularity System (import/export)
● Enhanced browser api (Object, Array, Promise, Loader...)
● Syntaxic sugar (spreading, destructuring, fat arrows...)
![Page 13: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/13.jpg)
ES6 is not ES5...
![Page 14: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/14.jpg)
Learn it !
![Page 15: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/15.jpg)
Target attitude
![Page 16: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/16.jpg)
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....
![Page 17: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/17.jpg)
Critical path first
Page Critical Resources
SystemJS
Bootstrapping
![Page 18: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/18.jpg)
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…)
![Page 19: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/19.jpg)
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>
![Page 20: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/20.jpg)
...System.config({
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js"
}
});
System.config({
"map": {
"angular": "github:angular/[email protected]",
"angular-mocks": "github:angular/[email protected]"
}
}); NOPE
![Page 21: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/21.jpg)
JSPM
GANG
![Page 22: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/22.jpg)
JSPM
JSPM Stargate
![Page 24: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/24.jpg)
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
![Page 25: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/25.jpg)
Simple plz
# Create / validate project configuration file
jspm init
# Install and config your dependencies
jspm install angular angular-mocks
![Page 26: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/26.jpg)
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└── ...
![Page 27: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/27.jpg)
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└── ...
![Page 28: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/28.jpg)
The win ?
Page Critical Resources
SystemJS
Bootstrapping
System.config
JSPM
Vendors Sources
![Page 29: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/29.jpg)
ngColloc
![Page 30: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/30.jpg)
Conflicts ?
● Module system
● Dependency injection
● Utilities
![Page 31: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/31.jpg)
Module system
// on b.js
angular.module('b', [
'a'
]);
// on a.js
angular.module('a', []);
● ES5
![Page 32: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/32.jpg)
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
![Page 33: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/33.jpg)
Dependency injection// on a.js
angular.module('a', [])
.factory('aFacto', aFacto)
;
/**
* @ngInject
*/
function aFacto(){
// ...
}
● ES5
![Page 34: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/34.jpg)
Dependency injection// on b.js
angular.module('b', ['a'])
.controller('BbCtrl', BbCtrl)
;
/**
* @ngInject
*/
function BbCtrl(aFacto){
// ...
}
● ES5
![Page 35: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/35.jpg)
Dependency injection// on a.js
export function aFacto(){
// ...
}
● ES6
![Page 36: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/36.jpg)
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
![Page 37: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/37.jpg)
Utilities
var opts = angular.extend({}, defaults, options);
// to ES6
let opts = Object.assign({}, defaults, options);
// or ES7
let opts = {...defaults, ...options}
![Page 38: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/38.jpg)
Quality matters
![Page 39: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/39.jpg)
Quality matters
● Well known minimal ES5 quality tests :
○ JSHINT / ESLint○ Karma unit tests○ Karma coverage
![Page 40: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/40.jpg)
● JSHINT / ESLint :[ "esnext" option ][ "ecmaFeatures" options ]
● Karma unit tests :Karma babel preprocessorKarma jspm
● Karma coverage :Karma coverage
1 2 3
Quality matters
![Page 41: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/41.jpg)
![Page 42: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/42.jpg)
peerDependencyIstanbul
Karma preprocessor
Gulp
![Page 43: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/43.jpg)
peerDependencyIsparta
Karma-babel- preprocessor
Gulp-babel
![Page 44: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/44.jpg)
Isparta !
![Page 46: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/46.jpg)
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
![Page 47: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/47.jpg)
Isparta !
![Page 48: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/48.jpg)
Conclusion
![Page 49: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/49.jpg)
Ghetto Coding
![Page 50: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/50.jpg)
Ispartaaaaa...
Need to be merged to Istanbul
![Page 51: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/51.jpg)
Thanks
![Page 52: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/52.jpg)
Merry
![Page 53: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/53.jpg)
X mascript
Merry
![Page 54: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/54.jpg)
X mascript
Merry
![Page 55: Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015](https://reader034.fdocuments.in/reader034/viewer/2022042818/55c384c4bb61ebe07a8b45b1/html5/thumbnails/55.jpg)
Q & A
Douglas Duteil @douglasduteil