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
180
The State of Angular
Minko Gechev
July 08, 2020
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
58
Fast Angular Apps from End to End
mgechev
0
79
The State of Angular
mgechev
1
110
Software Engineering as a Superpower
mgechev
1
56
Introduction to Angular
mgechev
1
88
Internals of the Angular CLI
mgechev
2
920
The State of Angular
mgechev
1
100
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.5k
The Future of the Front-End Frameworks
mgechev
2
250
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
221
17k
The Invisible Side of Design
smashingmag
292
48k
Debugging Ruby Performance
tmm1
67
11k
Infographics Made Easy
chrislema
235
17k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Raft: Consensus for Rubyists
vanstee
130
5.7k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Scaling GitHub
holman
453
140k
Web development in the modern age
philhawksworth
197
9.6k
What the flash - Photography Introduction
edds
64
10k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
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