Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of Angular

Minko Gechev
July 08, 2020
230

The State of Angular

Minko Gechev

July 08, 2020
Tweet

Transcript

  1. • Compile-time optimizations • Excellent IDE/text editor support • Strict

    type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast (no) builds Static Dynamic
  2. • Compile-time optimizations • Excellent IDE/text editor support • Strict

    type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast (no) builds Static Dynamic
  3. • Compile-time optimizations • Excellent IDE/text editor support • Strict

    type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast (no) builds Static Dynamic 2.0 4.0
  4. • Compile-time optimizations • Excellent IDE/text editor support • Strict

    type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast (no) builds Static Dynamic 4.0 9.0
  5. • Compile-time optimizations • Excellent IDE/text editor support • Strict

    type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast (no) builds Static Dynamic 9.0
  6. @mgechev Strict Mode " Strict TypeScript type checking strictTemplates in

    Angular Opt-in ES5 support Opt-in CommonJS support Reduced side-effects
  7. @mgechev !// index.js import { add } from './utils'; console.log(add(1,

    2)); !// utils.js module.exports.add = (a, b) !=> a + b, module.exports.subtract = (a, b) !=> a - b, module.exports.multiply = (a, b) !=> a * b, module.exports.divide = (a, b) !=> a / b, const { maxBy } = require('lodash-es'); module.exports.max = arr !=> maxBy(arr)
  8. @mgechev !// output.js !!... (() !=> { "use strict"; !/*

    harmony import !*/ var _utils!__WEBPACK_IMPORTED_MODULE_0!__ = !__webpack_require!__(288); const subtract = (a, b) !=> a - b; console.log((0,_utils!__WEBPACK_IMPORTED_MODULE_0!__!/* .add !*/ .IH)(1, 2)); })();
  9. @mgechev !// utils.js export const add = (a, b) !=>

    a + b; export const subtract = (a, b) !=> a - b; export const multiply = (a, b) !=> a * b; export const divide = (a, b) !=> a / b; import { maxBy } from 'lodash-es'; export const max = arr !=> maxBy(arr); !// index.js import { add } from './utils'; console.log(add(1, 2));
  10. @mgechev !// utils.js module.exports.add = (a, b) !=> a +

    b, module.exports.subtract = (a, b) !=> a - b, module.exports.multiply = (a, b) !=> a * b, module.exports.divide = (a, b) !=> a / b, const { maxBy } = require('lodash-es'); module.exports.max = arr !=> maxBy(arr)
  11. @mgechev !// utils.js export const add = (a, b) !=>

    a + b; export const subtract = (a, b) !=> a - b; export const multiply = (a, b) !=> a * b; export const divide = (a, b) !=> a / b; import { maxBy } from 'lodash-es'; export const max = arr !=> maxBy(arr);
  12. @mgechev !// output.js /******/ (() !=> { !// webpackBootstrap /******/

    "use strict"; !// CONCATENATED MODULE: ./utils.js!** const add = (a, b) !=> a + b; const subtract = (a, b) !=> a - b; !// CONCATENATED MODULE: ./index.js!** const index_subtract = (a, b) !=> a - b;!** console.log(add(1, 2));!** /******/ })();