es2015 ready angular web stack par douglas duteil à best of web 2015

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…

ES6 conf

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/systemjs@0.16.9/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/bower-angular@1.3.7",

"angular-mocks": "github:angular/bower-angular-mocks@1.3.7"

}

}); NOPE

JSPM

GANG

JSPM

JSPM Stargate

6 PACK MANAGA

JESUS SUPA

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│ ├── 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└── ...

Simple plz$ tree -L 4 jspm_packagesjspm_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└── ...

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 !

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