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ΞIR
Membre de Angular UI
Cofounder 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...)
●...
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...
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, ...
Bootstrapping
<script
src="https://github.jspm.io/systemjs/systemjs@0.16.9/dist/system.js">
</script>
<script>
// import '...
...
System.config({
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js"
}
});
System.config({
"map": {
"angula...
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/up...
Simple plz
# Create / validate project configuration file
jspm init
# Install and config your dependencies
jspm install an...
Simple plz
$ tree -L 4 jspm_packages
jspm_packages
├── github
│ └── angular
│ ├── bower-angular@1.3.7
│ │ ├── angular.js
│...
Simple plz
$ tree -L 4 jspm_packages
jspm_packages
├── github
│ └── angular
│ ├── bower-angular@1.3.7
│ │ ├── angular.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', [
aM...
Dependency injection
// on a.js
angular.module('a', [])
.factory('aFacto', aFacto)
;
/**
* @ngInject
*/
function aFacto(){...
Dependency injection
// on b.js
angular.module('b', ['a'])
.controller('BbCtrl', BbCtrl)
;
/**
* @ngInject
*/
function BbC...
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('...
Utilities
var opts = angular.extend({}, defaults, options);
// to ES6
let opts = Object.assign({}, 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 preprocessor
Karma jsp...
peerDependency
Istanbul
Karma
preprocessor
Gulp
peerDependency
Isparta
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
● P...
Isparta !
Conclusion
Ghetto Coding
Ispartaaaaa...
Need to be merged to Istanbul
Thanks
Merry
Xmascript
Merry
Xmascript
Merry
Q & A
Douglas Duteil
@douglasduteil
Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015
Prochain SlideShare
Chargement dans…5
×

Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015

1 431 vues

Publié le

Retrouvez les slides de la présentation "Es2015 ready angular web stack" de Douglas Duteil lors de la première édition de BestofWeb le 05 juin 2015.

Publié dans : Logiciels
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 431
Sur SlideShare
0
Issues des intégrations
0
Intégrations
76
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Es2015 ready angular web stack par Douglas Duteil à Best Of Web 2015

  1. 1. ES2015 ready Angular web stack ? Douglas Duteil @douglasduteil
  2. 2. Angular 1.x Douglas Duteil @douglasduteil ….…. Dec 18, 2014
  3. 3. Angular 1.x Douglas Duteil @douglasduteil Since Feb 15, 2015
  4. 4. ES2015 ready Angular web stack ? Douglas Duteil @douglasduteil
  5. 5. Me, Myself and I Douglas Duteil @douglasduteil Front End Dev at SFΞIR Membre de Angular UI Cofounder of OneDoes
  6. 6. Once upon a time…
  7. 7. ES6 conf
  8. 8. Fail often
  9. 9. The winning stack
  10. 10. ES2015 ?
  11. 11. ECMAScript 2015 ● ECMAScript the spec of JavaScript ● Last version : ES5 => ES2009 ● New one : ES6 => ES2015
  12. 12. ES2015 aka ES6 ● In Browser Modularity System (import/export) ● Enhanced browser api (Object, Array, Promise, Loader...) ● Syntaxic sugar (spreading, destructuring, fat arrows...)
  13. 13. ES6 is not ES5...
  14. 14. Learn it !
  15. 15. Target attitude
  16. 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. 17. Critical path first Page Critical Resources SystemJS Bootstrapping
  18. 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. 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. 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. 21. JSPM GANG
  22. 22. JSPM JSPM Stargate
  23. 23. 6 PACK MANAGA JESUS SUPA
  24. 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. 25. Simple plz # Create / validate project configuration file jspm init # Install and config your dependencies jspm install angular angular-mocks
  26. 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. 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. 28. The win ? Page Critical Resources SystemJS Bootstrapping System.config JSPM Vendors Sources
  29. 29. ngColloc
  30. 30. Conflicts ? ● Module system ● Dependency injection ● Utilities
  31. 31. Module system // on b.js angular.module('b', [ 'a' ]); // on a.js angular.module('a', []); ● ES5
  32. 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. 33. Dependency injection // on a.js angular.module('a', []) .factory('aFacto', aFacto) ; /** * @ngInject */ function aFacto(){ // ... } ● ES5
  34. 34. Dependency injection // on b.js angular.module('b', ['a']) .controller('BbCtrl', BbCtrl) ; /** * @ngInject */ function BbCtrl(aFacto){ // ... } ● ES5
  35. 35. Dependency injection // on a.js export function aFacto(){ // ... } ● ES6
  36. 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. 37. Utilities var opts = angular.extend({}, defaults, options); // to ES6 let opts = Object.assign({}, defaults, options); // or ES7 let opts = {...defaults, ...options}
  38. 38. Quality matters
  39. 39. Quality matters ● Well known minimal ES5 quality tests : ○ JSHINT / ESLint ○ Karma unit tests ○ Karma coverage
  40. 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. 41. peerDependency Istanbul Karma preprocessor Gulp
  42. 42. peerDependency Isparta Karma-babel- preprocessor Gulp-babel
  43. 43. Isparta !
  44. 44. Isparta !
  45. 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. 46. Isparta !
  47. 47. Conclusion
  48. 48. Ghetto Coding
  49. 49. Ispartaaaaa... Need to be merged to Istanbul
  50. 50. Thanks
  51. 51. Merry
  52. 52. Xmascript Merry
  53. 53. Xmascript Merry
  54. 54. Q & A Douglas Duteil @douglasduteil

×