Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS Toronto: Ng babel+webpack


Published on

Porting angularJS 1.x applications to es2015 with webpack and babel.

Published in: Software
  • Be the first to comment

AngularJS Toronto: Ng babel+webpack

  2. 2. TEXT ABOUT ME ▸ Alan Hietala - Frontend Lead at ▸ 6 mobile apps, 3 web portals all in angular 1.x ▸ Moved 75k CLOC to ES2015 across these projects
  3. 3. TEXT MOTIVATION FOR MOVING TO ES2015 + WEBPACK ▸ The Javascript world is changing rapidly. ▸ Want to create options for what to do (Angular 1 + ES2015? Angular2 + Typescript? Redux? React?) ▸ More and more tools will be written in ES2015 and ES5 transpilation will become the path of least support.
  4. 4. TEXT WHATS BABEL? ▸ Transpiles ES2015 to ES5 ▸ Start using features now and stop worrying about which browsers support what.
  5. 5. TEXT WHY ES2015? ▸ const and let block scoping ▸ lexically scoped arrow functions () => { lexical} ▸ spread operator … (technically ES2016 but awesome) ▸ Generators, Destructuring, Iterators ▸ module system import variable from “file”; How do we support ES2015 Modules?
  6. 6. TEXT ES5 HAS REQUIRE.JS AND OTHERS ▸ RequireJS built a module system around ES5 ▸ ES2015 has a module system defined in the language ▸ Need a different solution that can pack dependencies
  7. 7. TEXT WEBPACK UNDERSTANDS IT ALL ▸ CommonJS, AMD it can resolve them all ▸ Loaders let you require other file types (more on that later)
  8. 8. TEXT PUTTING IT ALL TOGETHER - ES5 CODEBASE angular.module(‘myapp’, [‘ngRoute’]) .config(function ($routeProvider) { $routeProvider .when(‘/login’, { templateUrl: ‘foo/bar.html’, controller: ‘LoginCtrl’, controllerAs: ‘login’ } }) app.js login.ctrl.js angular.module(‘myapp’) .controller(‘LoginCtrl’, function () { this.loginClicked = function () { // do something with login } }) Files concatenated together by grunt / gulp or …
  10. 10. TEXT USING ES2015 MODULES ▸ Webpack needs an entry point ▸ for us it will be app.js ▸ it will traverse the dependency tree and spit out an ES5 file ES5 bundle.js app.js entry
  11. 11. TEXT ANGULAR APP WITH ES2015 MODULES import angular from ‘angular’; import config from ‘./myapp.config’; import loginCtrl from ‘./controllers/login.ctrl’; import ngRoute from ‘angular-route’; angular.module(‘myapp’, [ngRoute]) .controller(loginCtrl) .config(config) app.js Where do angular and ngRoute come from?
  12. 12. TEXT THEY ARE NPM PACKAGES ▸ You can import packages installed with NPM ▸ Quit using bower! (no nested dependency support, just a metadata manager) ▸ Single source of dependency management ▸ npm install - - save angular angular-route
  13. 13. TEXT LOGIN CONTROLLER login.ctrl.js /*@ngInject*/ function loginCtrl(someService) { this.loginClicked = (event) => { // do something with login } }) export default loginCtrl; Directives, Controllers and Services now plain javascript
  14. 14. TEXT LETS INSTALL SOME OTHER DEPENDENCIES WE NEED TOO npm install —save-dev <following packages> babel-loader <— loader for webpack babel-preset-es2015 <— basic es2015 transpilation babel-preset-stage-0 <— more advanced features <sudo> npm install —g webpack
  15. 15. TEXT WEBPACK CONFIGURATION YAY BOILERPLATE: WEBPACK.CONFIG.JS var path = require(‘path’) var webpack = require(‘webpack’); var ngAnnotatePlugin = require(‘ng-annotate-plugin’); module.exports = { entry: ‘bundlename.js’: ‘app.js’, output: { path: __dirname + ‘/dist’, filename: ‘[name]’, sourceMapFilename: ‘maps/[name].map’ }, module: { loaders: [{ loaders: [‘babel’], exclude: /node_modules/ }], devtool: ‘source-map’, plugins: [ new ngAnnotatePlugin({ add: true, enable: true}), new web pack.optimize.UglifyJsPlugin({sourceMap: true, mangle: true}) ] }
  16. 16. TEXT RUNNING WEBPACK ▸ $ webpack will spit out your ES5 module ▸ at dist/bundlename.js ▸ sourcemaps at dist/maps/ ▸ You can tie webpack into Grunt or Gulp easily ▸ you can serve the modules with incremental building using webpack-dev-server as well it will load index.html by default ▸
  17. 17. TEXT LETS GET FANCY You can import anything that has a loader. SCSS for example import color1 from ‘./color1.scss’; import color2 from ‘./color2.scss’; function myDirective() { return { // using es2015 template strings template: `<div class=${color1.mainColor}>Great!</div> <div class=${color2.mainColor}>Great!</div>` } } export default myDirective; .mainColor { color: blue; } .mainColor { color: red; } color1.scss color2.scss mydirective.js Wait, what about the cascade?
  18. 18. TEXT WEBPACK PREFIXES THE CSS RULES TO GUARANTEE UNIQUENESS In a truly modular system we shouldn’t worry about cascading effects between modules. Webpack makes it so. <div class=‘color1_asdf_mainColor’>Great!</div> <div class=‘color2_gehz_mainColor'>Great!</div>
  20. 20. TEXT WEBPACK LETS YOU LIST YOUR CSS DEPENDENCIES IN CODE ▸ You no longer need to remember that myDirective has scss in _main.scss, _directivemaster.scss, _directiveA.scss ▸ Its right in your code, where it should be, not in someone’s brain waiting to get lost. import css from ‘./color1.scss’; function myDirective() { } export default myDirective;
  21. 21. TEXT BECAUSE WEBPACK WALKS THE DEPENDENCY TREE IT WILL ▸ Only include code you directly import - smaller file sizes ▸ Let you split your bundles into chunks to deliver on demand ▸ Webpack 2 will support tree shaking, remove unused imports entirely from your bundle.
  22. 22. QUESTIONS