The State of Angular

Transcript

1. @yourtwitter
   The State of Angular
   Minko Gechev
   twitter.com/mgechev

   github.com/mgechev

   blog.mgechev.com
   

   View Slide

2. @mgechev
   100
   
   

   View Slide

3. @mgechev
   

   View Slide

4. @mgechev
   2,000+
   Projects at Google
   

   View Slide

5. @yourtwitter
   https://unsplash.com/photos/rafblRbne3o
   

   View Slide

6. @mgechev
   v10 RC is out
   

   View Slide

7. @mgechev
   

   View Slide

8. Predictability vs Flexibility trade-offs
   Predictable Flexible
   

   View Slide

9. Static vs Dynamic trade-offs
   Static Dynamic
   

   View Slide

10. Static vs Dynamic trade-offs
    Static Dynamic
    Rust
    Haskell
    Idris
    C# / Java Go
    JavaScript
    TypeScript
    Ruby
    

    View Slide

11. Static vs Dynamic trade-offs
    Static Dynamic
    

    View Slide

12. • 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
    

    View Slide

13. twitter.com/mgechev
    

    View Slide

14. twitter.com/mgechev
    15%
    of bugs detectable
    at build time
    

    View Slide

15. twitter.com/mgechev
    

    View Slide

16. twitter.com/mgechev
    

    View Slide

17. • 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
    

    View Slide

18. • 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
    

    View Slide

19. • 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
    

    View Slide

20. • 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
    

    View Slide

21. @mgechev
    What’s in v10?
    

    View Slide

22. @mgechev
    v10 focus
    • Opt-in strict flag
    • Increase visibility
    

    View Slide

23. @mgechev
    v10 focus
    • Opt-in strict flag
    • Increase visibility
    

    View Slide

24. @mgechev
    Strict Mode "
    Strict TypeScript type checking
    strictTemplates in Angular
    Opt-in ES5 support
    Opt-in CommonJS support
    Reduced side-effects
    

    View Slide

25. @mgechev
    

    View Slide

26. twitter.com/mgechev
    >15%
    of bugs detectable
    at build time
    

    View Slide

27. @mgechev
    Opt-in CommonJS
    

    View Slide

28. twitter.com/mgechev
    https://web.dev/commonjs-larger-bundles/
    

    View Slide

29. @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)
    

    View Slide

30. @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));
    })();
    

    View Slide

31. @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));
    

    View Slide

32. @mgechev
    !// output.js
    (()!=>{"use strict";console.log(1+2)})();
    

    View Slide

33. @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)
    

    View Slide

34. @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);
    

    View Slide

35. @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));!**
    /******/ })();
    

    View Slide

36. @mgechev
    !// example.js
    module.exports[localStorage.getItem(Math.random())] = () !=> { … };
    

    View Slide

37. @yourtwitter
    Examples
    Automated updates
    Optimized i18n pipeline
    Angular Universal
    Compile-time optimizations
    Efficient prefetching
    

    View Slide

38. @mgechev
    Zero-overhead i18n
    

    View Slide

39. Angular compile-time i18n (Ivy)
    src
    lib
    Link &
    optimize l10n
    repeat
    ngc
    

    View Slide

40. twitter.com/mgechev @mgechev
    

    View Slide

41. @mgechev
    Thank you!
    twitter.com/mgechev

    github.com/mgechev

    blog.mgechev.com
    Survey: mgv.io/talk
    

    View Slide