1.
ES2015 ready
Angular web
stack ?
Douglas Duteil
@douglasduteil

2.
Angular 1.x
Douglas Duteil
@douglasduteil
….…. Dec 18, 2014

3.
Angular 1.x
Douglas Duteil
@douglasduteil
Since Feb 15, 2015

4.
ES2015 ready
Angular web
stack ?
Douglas Duteil
@douglasduteil

5.
Me, Myself and I
Douglas Duteil
@douglasduteil
Front End Dev at SFΞIR
Membre de Angular UI
Cofounder of OneDoes

6.
Once upon
a time…

7.
ES6 conf

8.
Fail often

9.
The winning stack

10.
ES2015 ?

11.
ECMAScript 2015
● ECMAScript the spec of JavaScript
● Last version : ES5 => ES2009
● New one : ES6 => ES2015

12.
ES2015 aka ES6
● In Browser Modularity System
(import/export)
● Enhanced browser api
(Object, Array, Promise, Loader...)
● Syntaxic sugar
(spreading, destructuring, fat arrows...)

13.
ES6 is not ES5...

14.
Learn it !

15.
Target
attitude

16.
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....

17.
Critical path first
Page Critical
Resources
SystemJS
Bootstrapping

18.
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…)

19.
Bootstrapping
<script
src="https://github.jspm.io/systemjs/systemjs@0.16.9/dist/system.js">
</script>
<script>
// import 'app.js' from the current URL
System.import('app');
</script>

20.
...
System.config({
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js"
}
});
System.config({
"map": {
"angular": "github:angular/bower-angular@1.3.7",
"angular-mocks": "github:angular/bower-angular-mocks@1.3.7"
}
});
NOPE

21.
JSPM
GANG

22.
JSPM
JSPM Stargate

23.
6 PACK MANAGA
JESUS SUPA

24.
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

25.
Simple plz
# Create / validate project configuration file
jspm init
# Install and config your dependencies
jspm install angular angular-mocks

26.
Simple plz
$ tree -L 4 jspm_packages
jspm_packages
├── github
│ └── angular
│ ├── bower-angular@1.3.7
│ │ ├── angular.js
│ │ └── ...
│ ├── bower-angular@1.3.7.js
│ ├── bower-angular-mocks@1.3.7
│ │ ├── angular-mocks.js
│ │ └── ...
│ └── bower-angular-mocks@1.3.7.js
├── es6-module-loader.js
├── system.js
├── traceur.js
└── ...

27.
Simple plz
$ tree -L 4 jspm_packages
jspm_packages
├── github
│ └── angular
│ ├── bower-angular@1.3.7
│ │ ├── angular.js
│ │ └── ...
│ ├── bower-angular@1.3.7.js
│ ├── bower-angular-mocks@1.3.7
│ │ ├── angular-mocks.js
│ │ └── ...
│ └── bower-angular-mocks@1.3.7.js
├── es6-module-loader.js
├── system.js
├── traceur.js
└── ...

28.
The win ?
Page Critical
Resources
SystemJS
Bootstrapping
System.config
JSPM
Vendors Sources

29.
ngColloc

30.
Conflicts ?
● Module system
● Dependency injection
● Utilities

31.
Module system
// on b.js
angular.module('b', [
'a'
]);
// on a.js
angular.module('a', []);
● ES5

32.
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

33.
Dependency injection
// on a.js
angular.module('a', [])
.factory('aFacto', aFacto)
;
/**
* @ngInject
*/
function aFacto(){
// ...
}
● ES5

34.
Dependency injection
// on b.js
angular.module('b', ['a'])
.controller('BbCtrl', BbCtrl)
;
/**
* @ngInject
*/
function BbCtrl(aFacto){
// ...
}
● ES5

35.
Dependency injection
// on a.js
export function aFacto(){
// ...
}
● ES6

36.
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

37.
Utilities
var opts = angular.extend({}, defaults, options);
// to ES6
let opts = Object.assign({}, defaults, options);
// or ES7
let opts = {...defaults, ...options}

38.
Quality
matters

39.
Quality matters
● Well known minimal ES5 quality tests :
○ JSHINT / ESLint
○ Karma unit tests
○ Karma coverage

40.
● JSHINT / ESLint :
[ "esnext" option ]
[ "ecmaFeatures" options ]
● Karma unit tests :
Karma babel preprocessor
Karma jspm
● Karma coverage :
Karma coverage
1 2 3
Quality matters

41.
peerDependency
Istanbul
Karma
preprocessor
Gulp

42.
peerDependency
Isparta
Karma-babel-
preprocessor
Gulp-babel

43.
Isparta !

44.
Isparta !

45.
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

46.
Isparta !

47.
Conclusion

48.
Ghetto Coding

49.
Ispartaaaaa...
Need to be merged to Istanbul

50.
Thanks

51.
Merry

52.
Xmascript
Merry

53.
Xmascript
Merry

54.
Q & A
Douglas Duteil
@douglasduteil