Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
The State of Angular
Minko Gechev
July 08, 2020
1
140
The State of Angular
Minko Gechev
July 08, 2020
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
mgechev
0
23
mgechev
1
45
mgechev
1
21
mgechev
1
47
mgechev
2
590
mgechev
1
71
mgechev
2
2k
mgechev
1
220
mgechev
0
36
Featured
See All Featured
phodgson
87
3.9k
pauljervisheath
196
15k
iamctodd
17
1.9k
samlambert
237
9.9k
mojombo
358
62k
akmur
252
19k
roundedbygravity
84
7.8k
lynnandtonic
271
16k
samanthasiow
56
6.3k
lara
172
9.5k
jeffersonlam
328
15k
orderedlist
PRO
329
35k
Transcript
@yourtwitter The State of Angular Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
@mgechev 100
@mgechev
@mgechev 2,000+ Projects at Google
@yourtwitter https://unsplash.com/photos/rafblRbne3o
@mgechev v10 RC is out
@mgechev
Predictability vs Flexibility trade-offs Predictable Flexible
Static vs Dynamic trade-offs Static Dynamic
Static vs Dynamic trade-offs Static Dynamic Rust Haskell Idris C#
/ Java Go JavaScript TypeScript Ruby
Static vs Dynamic trade-offs Static Dynamic
• 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
twitter.com/mgechev
twitter.com/mgechev 15% of bugs detectable at build time
twitter.com/mgechev
twitter.com/mgechev
• 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
• 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
• 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
• 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
@mgechev What’s in v10?
@mgechev v10 focus • Opt-in strict flag • Increase visibility
@mgechev v10 focus • Opt-in strict flag • Increase visibility
@mgechev Strict Mode " Strict TypeScript type checking strictTemplates in
Angular Opt-in ES5 support Opt-in CommonJS support Reduced side-effects
@mgechev
twitter.com/mgechev >15% of bugs detectable at build time
@mgechev Opt-in CommonJS
twitter.com/mgechev https://web.dev/commonjs-larger-bundles/
@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)
@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)); })();
@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));
@mgechev !// output.js (()!=>{"use strict";console.log(1+2)})();
@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)
@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);
@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));!** /******/ })();
@mgechev !// example.js module.exports[localStorage.getItem(Math.random())] = () !=> { … };
@yourtwitter Examples Automated updates Optimized i18n pipeline Angular Universal Compile-time
optimizations Efficient prefetching
@mgechev Zero-overhead i18n
Angular compile-time i18n (Ivy) src lib Link & optimize l10n
repeat ngc
twitter.com/mgechev @mgechev
@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk