Internals of the Angular CLI

Transcript

1. @yourtwitter Internals of the Angular CLI Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
2. twitter.com/mgechev
3. @mgechev
4. @mgechev Framework
5. @mgechev Framework CLI Components
6. @mgechev Framework CLI Components I18n Language service Router Animations Forms PWA HTTP More!
7. @mgechev Framework CLI Components I18n Language service Router Animations Forms PWA HTTP More!
9. @mgechev Disclaimer You don’t need to know any of the following content to use the Angular CLI
10. @mgechev Framework CLI Components I18n Language service Router Animations Forms PWA HTTP More!
11. @mgechev Framework CLI Components I18n Language service Router Animations Forms PWA HTTP More!
12. @mgechev @angular/cli
13. @mgechev @angular/cli Builders Schematics
14. @mgechev @angular/cli Builders Schematics Jobs Footprints ng add ng update
15. @mgechev @angular/cli Builders Schematics Jobs Footprints ng add ng update webpack
16. @mgechev @angular/cli Builders Schematics Jobs Footprints ng add ng update webpack TypeScript terser
17. @mgechev @angular/cli Builders Schematics Jobs Footprints ng add ng update ngc webpack TypeScript terser
18. @mgechev @angular/cli Builders Schematics Jobs Footprints ng add ng update ngc webpack TypeScript terser
19. twitter.com/ mgechev
20. @yourtwitter $ ng new sample --collection=custom Creating a project
21. @mgechev Creating a project • Reading schematics collection from disk • Creating an in-memory file system • Transformation of the files (placeholder replacement) • Committing files to disk
22. @mgechev
23. @mgechev
24. @mgechev
25. @mgechev Schematics could be used for… Scaffolding Updates NgAdd
26. @mgechev Scaffolding Updates NgAdd Code transform
27. @mgechev Scaffolding Updates NgAdd Code transform
28. @mgechev Code transformation • Direct string replacements • Regular expressions • AST transformation
29. String replacements @Component({ selector: '<%= selector %>' })
30. String replacements @Component({ selector: '<%= selector %>' }) fileContent.replace('<%= selector %>', 'selector');
31. String replacements @Component({ selector: '<%= selector %>' }) fileContent.replace('<%= selector %>', 'selector'); @Component({ selector: 'selector' })
32. String replacements @Component({ selector: '<%= selector %>' }) fileContent.replace('<%= selector %>', 'selector'); @Component({ selector: 'selector' })
33. Regex replacements @Component({ selector: '<%= selector %>' })
34. Regex replacements @Component({ selector: '<%= selector %>' }) const data = {selector: 'app-component'}; fileContent.replace(/<%= (\w+) %>/, function(a, m) { return data[m]; });
35. Regex replacements @Component({ selector: '<%= selector %>' }) @Component({ selector: 'app-component' }) const data = {selector: 'app-component'}; fileContent.replace(/<%= (\w+) %>/, function(a, m) { return data[m]; });
36. Regex replacements @Component({ selector: '<%= selector %>' }) @Component({ selector: 'app-component' }) const data = {selector: 'app-component'}; fileContent.replace(/<%= (\w+) %>/, function(a, m) { return data[m]; });
37. Regex replacements @ViewChild('foo') foo; @ViewChild('foo', { static: true }) foo; ❓
38. @mgechev Conditions • Should be a property decorator • The class should be a component • * Should be a symbol from Angular
39. Regex replacements @ViewChild('foo') foo; @ViewChild('foo', { static: true }) foo; ❌
40. @mgechev Source code + Grammar
41. @mgechev Source code + Grammar
42. twitter.com/mgechev
43. twitter.com/mgechev
44. twitter.com/mgechev
45. @mgechev
46. twitter.com/mgechev
47. @mgechev Introduction to compilers
48. @mgechev Introduction to compilers …in 2-ish minutes
49. @mgechev Disclaimer You don’t need to understand compilers to use the Angular CLI
50. @mgechev COMPILER Input Output
51. @mgechev COMPILER FRONT-END BACK-END Input Output
52. @mgechev Input Output FRONT-END
53. @mgechev FRONT-END LEXICAL ANALYSIS SYNTAX ANALYSIS … Input Output …
54. @mgechev const product = a * b;
55. @mgechev tokenize('const product = a * b;')
56. @mgechev tokenize('const product = a * b;') [ { lexeme: 'const', type: 'keyword' }, { lexeme: 'product', type: 'identifier' }, { lexeme: '=', type: 'operator' }, ... ]
57. @mgechev parse(tokenize('...'))
58. @mgechev parse(tokenize('...')) CONST PRODUCT * A B
59. @mgechev AST CONST PRODUCT * A B parse(tokenize('...'))
60. @Component({ selector: 'app-component', template: '...' }) class AppComponent { ... } CLASS DECORATOR OBJ LITERAL SELECTOR APP- COMPONENT TEMPLATE ‘…’ PROPERTY[0] PROPERTY[1]
61. @mgechev Conditions • Should be a property decorator • The class should be a component • * Should be a symbol from Angular
62. visitClass(node) { node.decorators.forEach(visitDecorator); } visitDecorator(node) { if (node.name === 'Component') { visitComponent(node.parent) } } visitComponent(class) { class.properties.forEach(prop => { if (prop.decorator && prop.decorator.name === 'ViewChild') { // } }); } AST visitor
63. visitClass(node) { node.decorators.forEach(visitDecorator); } visitDecorator(node) { if (node.name === 'Component') { visitComponent(node.parent) } } visitComponent(class) { class.properties.forEach(prop => { if (prop.decorator && prop.decorator.name === 'ViewChild') { // } }); } Property decorator Should be inside a component AST visitor
64. visitClass(node) { node.decorators.forEach(visitDecorator); } visitDecorator(node) { if (node.name === 'Component') { visitComponent(node.parent) } } visitComponent(class) { class.properties.forEach(prop => { if (prop.decorator && prop.decorator.name === 'ViewChild') { // } }); } Property decorator Should be inside a component AST visitor
65. Property decorator Should be inside a component visitClass(node) { node.decorators.forEach(visitDecorator); } visitDecorator(node) { if (node.name === 'Component') { visitComponent(node.parent) } } visitComponent(class) { class.properties.forEach(prop => { if (prop.decorator && prop.decorator.name === 'ViewChild') { // } }); } AST visitor
66. @mgechev Conditions • Should be a property decorator • The class should be a component • * Should be a symbol from Angular
67. @mgechev Source code + Grammar + Type checker
68. @mgechev Source code + Grammar + Type checker
69. @yourtwitter // Get the type checker from the program const typeChecker = program.getTypeChecker(); // Get the type of the symbol const type = typeChecker.getTypeAtLocation(node);
70. @mgechev v10 focus • Opt-in strict flag • Increase visibility
71. @mgechev v10 focus • Opt-in strict flag • Increase visibility
72. @mgechev Strict Mode Strict TypeScript type checking strictTemplates in Angular Opt-in ES5 support Opt-in CommonJS support Reduced side-effects
73. @mgechev
74. twitter.com/mgechev >15% of bugs detectable at build time
75. @yourtwitter Strictness helps in Automated updates Compile-time optimizations Angular Universal Efficient prefetching Optimized i18n pipeline …
76. @mgechev Scaffolding Updates NgAdd Code transform
77. @mgechev Developer facing APIs
78. @mgechev Scaffolding Updates NgAdd Code transform
79. { "name": "my-package", "version": "1.0.0", "schematics": "./collection.json" } { "name": "my-package", "schematics": { "ng-add": { "factory": "./ng-add/index.js”, "schema": "ng-add/schema.json", "description": " ..." }, "ng-new": { "factory": "./ng-new/index.js", "schema": "./ng-new/schema.json", "description": " ..." } } } package.json collection.json
80. ng-add / ng-new import {Tree} from '@angular-devkit/schematics'; export default function MySchematic(options: any) { return (tree: Tree) => { tree.create(options.path + '/hi', 'Hello world!'); return tree; }; }
81. @mgechev Scaffolding Updates NgAdd Code transform
82. { "name": "my-package", "version": "1.0.0", "ng-update": { "migrations": "migrations.json" } } { "schematics": { "v1": { "factory": "./v1", "version": "1.0", "description": " ..." }, "v2": { "factory": "./v2", "version": "2.0", "description": " ..." } } } package.json migrations.json
83. @mgechev Mid-recap • Schematics used for code transform • Agnostic to the Angular CLI • Widely adopted in the open source community • Use semantic replacements using: • Language grammar • Language type system
84. @mgechev Building Angular
85. @mgechev @angular/cli Builders Schematics Jobs Footprints ng add ng update ngc webpack TypeScript terser
86. @mgechev Angular CLI builders @angular/cli $ ng run [app]:[cmd] angular.json require(builder) builder execute ✨
87. @yourtwitter $ ng run app:serve # ng serve $ ng run app:build # ng build Creating a project
88. @mgechev Browser builder
89. @mgechev Aggregate js file size in KB for angular.io builds Is --prod worth it? 5000 4000 3000 2000 1000 0 658 KB 5072 KB Production Development Almost 10x smaller!
90. @mgechev ngc tsc opt wp terser tsc ngcc i18n ng-xi18n
91. @mgechev ngc tsc opt wp terser tsc
92. @mgechev // utils.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; /******/ (() => { // 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)); /******/ })(); // index.js import { add } from './utils'; const subtract = (a, b) => a - b; console.log(add(1, 2)); webpack bundling
93. @mgechev // utils.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; /******/ (() => { // 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)); /******/ })(); // index.js import { add } from './utils'; const subtract = (a, b) => a - b; console.log(add(1, 2)); webpack bundling
94. @mgechev ngc tsc opt wp terser tsc
95. @filipematossilv @mgechev Terser • ES2015 version of UglifyJS • DCE using static analysis • Annotations for side-effect free function calls • Also does name mangling, inlining, whitespace removal • Does not understand module loading!
96. @mgechev Dead Code Elimination
97. @filipematossilv (() =>{"use strict";console.log(3)}) () input output /******/ (() => { // 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)); /******/ })();
98. @mgechev Purity
99. @filipematossilv input output const getData = (a) => localStorage.get(a); getData(2, 3); (o =>localStorage.get(2))() const getData = (a) => localStorage.get(a); /*@ __PURE __ */getData(2, 3); Empty
100. @mgechev ngc tsc opt wp terser tsc
101. @mgechev Ivy @Component({ selector: 'app', template: ' ...' }) class AppComponent { ... } app.component.js app.component.d.ts
102. @Component({ selector: 'cmp', template: ` <span *ngIf="foo"> </span>` }) export class Cmp {} ... Cmp.ɵcmp = defineComponent({ type: Cmp, selectors: [['cmp']], template: function(fs, ctx) { if (fs & RenderFlags.Create) ...; if (fs & RenderFlags.Update) ...; }, directives: [NgIf] }); ngc
103. @mgechev
104. @mgechev ngc tsc opt wp terser tsc
105. @filipematossilv @mgechev Build Optimizer • Part of Angular Devkit • Post processor for TS and Angular AOT code • Enable Terser DCE through refactoring • Adds side-effect free annotations
106. @filipematossilv class MyClass {}; MyClass.prop = 42; // terser output (class{}).prop=42; const MyClass = /*@ __PURE __ */(() => { class MyClass { } MyClass.prop = 42; return MyClass; })(); // terser output // nothing! input output
107. @mgechev ngc tsc opt wp terser tsc
108. twitter.com/mgechev
109. @yourtwitter @mgechev Differential loading • Produce ES5 bundles for newer browsers • Do not send polyfills to modern browsers • Smaller payload • Do not downlevel modern features • Faster execution • Smaller payload
110. @mgechev -65KB polyfills ~2-10% smaller bundles
111. @mgechev Step 1: Load HTML Step 2: Look at script tags Step 2: Download right version Differential loading
112. @yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading </title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
113. @yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading </title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
114. @filipematossilv @mgechev Putting it all together • ngc ◦ Compiles templates to efficient instructions • Webpack ◦ only includes used modules in side-effect free libraries ◦ makes large modules from many small modules • Build Optimizer ◦ refactors TS and AOT code for DCE ◦ adds side-effect free annotations for terser • Terser ◦ takes large annotated modules and removes all unused code • TypeScript ◦ downlevels ES2015 to ES5
115. @mgechev Debugging your build
116. @yourtwitter $ NG_BUILD_PROFILING=true ng build --prod Profile your build
117. @mgechev
118. @mgechev
119. @mgechev Developer facing APIs
120. @yourtwitter $ ng build --prod Building a project
121. @mgechev
122. @mgechev
123. @mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk