"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "I have been writing Angular at Windward for almost two years now, pretty much all of it on Store, our browser based document generation tool. Store is a heavy app. Users upload templates, edit them inline, preview the output, wrangle data sources, and do all of it without a page refresh. Making it feel snappy is a real engineering problem, not a branding problem." }), "\n", _jsx(_components.p, { children: "I have broken performance in Store in every way I think you reasonably can. Tanked a page with a misused pipe. Imported all of rxjs by accident and watched our bundle balloon past 5MB. Shipped a subscription leak that took three days to track down. Angular is a good framework and it will absolutely let you shoot yourself in the foot with style." }), "\n", _jsx(_components.p, { children: "Here is the stuff I wish someone had hammered into my head before I opened my first app.module.ts." }), "\n", _jsx(_components.h2, { children: "Change Detection Is The Whole Game" }), "\n", _jsx(_components.p, { children: "If you read one thing here, read this. Angular's default change detection runs on every event the browser fires. Click a button and Angular walks your whole component tree. Get an HTTP response back, same thing. Timer fires, same thing. Fine for a small app. A disaster for a big one." }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// The default, aka \"why is my app slow\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "Component" })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" selector", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'app-template-list'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" templateUrl", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'./template-list.component.html'" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), " ", _jsx(_components.span, { className: "token class-name", children: "TemplateListComponent" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* ... */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token comment", children: "// What you want for most components" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "Component" })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" selector", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'app-template-list'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" templateUrl", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'./template-list.component.html'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" changeDetection", _jsx(_components.span, { className: "token operator", children: ":" }), " ChangeDetectionStrategy", _jsx(_components.span, { className: "token punctuation", children: "." }), "OnPush\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), " ", _jsx(_components.span, { className: "token class-name", children: "TemplateListComponent" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* ... */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "OnPush says, only re-check this component when an input reference changes, or an event fires inside it, or I explicitly mark it dirty. One line change. The first time I turned it on for our template list, our render time dropped from about 200ms to under 40ms. Yes, it forces you to think about immutability. Yes, you will break stuff the first few times you try. Worth it." }), "\n", _jsx(_components.h2, { children: "Methods In Templates Will Eat You Alive" }), "\n", _jsx(_components.p, { children: "Found this one the painful way. A teammate grepped our templates and pulled up dozens of these:" }), "\n", _jsx(_components.pre, { className: "language-html line-numbers", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "*ngFor" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "let item of getFilteredItems()", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " {{ formatDate(item.createdAt) }}\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Every method call inside a template runs on every change detection cycle. If you are not using OnPush, that is nearly constant. Click a button somewhere else on the page, getFilteredItems runs. Resize the window, it runs again. Tiny deaths, everywhere." }), "\n", _jsx(_components.p, { children: "The fix is to memoize the property or use a pure pipe." }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Option 1: compute once, store on the component" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: ["filteredItems", _jsx(_components.span, { className: "token operator", children: ":" }), " Item", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token function", children: "ngOnChanges" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "changes", _jsx(_components.span, { className: "token operator", children: ":" }), " SimpleChanges", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "changes", _jsx(_components.span, { className: "token punctuation", children: "." }), "items ", _jsx(_components.span, { className: "token operator", children: "||" }), " changes", _jsx(_components.span, { className: "token punctuation", children: "." }), "filter", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "filteredItems ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "computeFilteredItems" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Option 2: pure pipe (only re-runs when input changes)" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "Pipe" })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'filterItems'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " pure", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), " ", _jsx(_components.span, { className: "token class-name", children: "FilterItemsPipe" }), " ", _jsx(_components.span, { className: "token keyword", children: "implements" }), " ", _jsx(_components.span, { className: "token class-name", children: "PipeTransform" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token function", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "items", _jsx(_components.span, { className: "token operator", children: ":" }), " Item", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " filter", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " Item", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " items", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "i ", _jsx(_components.span, { className: "token operator", children: "=>" }), " i", _jsx(_components.span, { className: "token punctuation", children: "." }), "name", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "filter", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "I lean on pure pipes more and more. Angular caches the result by input reference, so same inputs means no recompute. Any time the template needs more than a property access, I reach for one." }), "\n", _jsx(_components.h2, { children: "TrackBy Or Suffer" }), "\n", _jsx(_components.p, { children: "Similar problem, different place. ngFor without a trackBy function will rebuild the entire DOM subtree every time the array reference changes, even when 99% of the items are the same. Our template picker can have hundreds of rows, and it felt laggy every time a user refreshed the list." }), "\n", _jsx(_components.pre, { className: "language-html line-numbers", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "*ngFor" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "let template of templates; trackBy: trackById", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "app-template-row"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "[template]" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "template", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token function", children: "trackById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "index", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " template", _jsx(_components.span, { className: "token operator", children: ":" }), " Template", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " template", _jsx(_components.span, { className: "token punctuation", children: "." }), "id", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Now Angular only touches the rows that moved. On a 500 item list the difference is striking. I do not think I have ever seen a good reason to skip trackBy in our codebase." }), "\n", _jsx(_components.h2, { children: "Unsubscribe Or Leak" }), "\n", _jsx(_components.p, { children: "Every Angular dev gets bitten by a subscription that never gets cleaned up. In an app like Store, where users stay on the same tab for an entire workday without refreshing, those leaks pile up and silently chew through memory." }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// The leak" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), " ", _jsx(_components.span, { className: "token class-name", children: "TemplateEditorComponent" }), " ", _jsx(_components.span, { className: "token keyword", children: "implements" }), " ", _jsx(_components.span, { className: "token class-name", children: "OnInit" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token function", children: "ngOnInit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "templateService", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getTemplate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "id", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "subscribe" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "t ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "template ", _jsx(_components.span, { className: "token operator", children: "=" }), " t", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token comment", children: "// The fix (I prefer takeUntil, but async pipe is even better)" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), " ", _jsx(_components.span, { className: "token class-name", children: "TemplateEditorComponent" }), " ", _jsx(_components.span, { className: "token keyword", children: "implements" }), " ", _jsx(_components.span, { className: "token class-name", children: "OnInit" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " OnDestroy ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token keyword", children: "private" }), " destroy$ ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["Subject", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token keyword", children: "void" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "13", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token function", children: "ngOnInit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "templateService", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getTemplate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "id", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "pipe" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "takeUntil" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "destroy$", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "subscribe" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "t ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "template ", _jsx(_components.span, { className: "token operator", children: "=" }), " t", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "19", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token function", children: "ngOnDestroy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "destroy$", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "next" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "destroy$", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "complete" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Honestly, if you can use the async pipe, use it. It subscribes and unsubscribes for you. It plays well with OnPush. Less code, less rope." }), "\n", _jsx(_components.pre, { className: "language-html line-numbers", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ng-container"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "*ngIf" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "template$ | async as template", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "app-template-preview"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "[template]" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "template", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Fewer chances to ship the bug where the browser ends up at 3GB of memory at the end of a workday." }), "\n", _jsx(_components.h2, { children: "Lazy Load What You Can" }), "\n", _jsx(_components.p, { children: "The biggest reason first load tanks on Angular apps is that everything gets imported into AppModule and you ship one brick of a bundle. Route level lazy loading has been easy for a few versions now, and it is an absolute win." }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " routes", _jsx(_components.span, { className: "token operator", children: ":" }), " Routes ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" path", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'templates'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "loadChildren" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./templates/templates.module'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "m ", _jsx(_components.span, { className: "token operator", children: "=>" }), " m", _jsx(_components.span, { className: "token punctuation", children: "." }), "TemplatesModule", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" path", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'data-sources'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "loadChildren" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./data-sources/data-sources.module'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "m ", _jsx(_components.span, { className: "token operator", children: "=>" }), " m", _jsx(_components.span, { className: "token punctuation", children: "." }), "DataSourcesModule", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "When we split Store into feature modules and lazy loaded them, our initial bundle dropped by around 40%. Users hitting the landing page no longer pay the cost of the template editor they might not open at all. Add PreloadAllModules on top and first load stays quick while navigation to other routes feels instant after the first screen." }), "\n", _jsx(_components.h2, { children: "Ivy Mostly Delivered" }), "\n", _jsx(_components.p, { children: "When our team was looking at the Ivy rollout, I was skeptical. Rewrites of core compiler tech tend to bring subtle regressions. Ivy has been a quiet win though. Better tree shaking, smaller generated output, stack traces that actually tell you something when things blow up." }), "\n", _jsxs(_components.p, { children: ["One thing that surprised me: a handful of utility directives that used to get pulled into every bundle under the old View Engine renderer just fell out under Ivy. A few hundred KB gone from the main bundle without changing any application code. ", _jsx(_components.a, { href: "https://angular.io/guide/ivy", children: "The Ivy docs" }), " are worth reading if you have not."] }), "\n", _jsx(_components.h2, { children: "Bundle Analyzer Is Your Friend" }), "\n", _jsx(_components.p, { children: "Every time the app starts feeling heavier I run source-map-explorer or webpack-bundle-analyzer, and I always find something embarrassing. An icon library imported for one icon. The full lodash instead of lodash-es with tree shaking. A dev tool that snuck into a production build." }), "\n", _jsx(_components.pre, { className: "language-bash line-numbers", children: _jsxs(_components.code, { className: "language-bash code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: ["ng build ", _jsx(_components.span, { className: "token parameter variable", children: "--prod" }), " --source-map\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "npx source-map-explorer dist/**/*.js\n" })] }) }), "\n", _jsx(_components.p, { children: "Do this once a quarter. You will find something ugly. That is kind of the point." }), "\n", _jsx(_components.h2, { children: "Virtual Scrolling When Lists Get Big" }), "\n", _jsx(_components.p, { children: "We were late to the CDK virtual scrolling party, but once we turned it on for our large data source previews the difference was immediate. Rendering 10,000 rows in the DOM is always going to feel slow. Rendering the 20 rows that fit in the viewport plus a small buffer is nearly free." }), "\n", _jsx(_components.pre, { className: "language-html line-numbers", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "cdk-virtual-scroll-viewport"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "itemSize" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "40", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "viewport", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "*cdkVirtualFor" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "let row of rows; trackBy: trackByRowId", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "row", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " {{ row.name }}\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Watch out for itemSize though. If your rows have variable heights and you guess wrong, the scrollbar behaves weirdly. For uniform rows it is magic." }), "\n", _jsx(_components.h2, { children: "The Takeaway" }), "\n", _jsx(_components.p, { children: "Angular is not a slow framework. Angular written carelessly is very slow. Most of the performance issues I have chased in Store come down to a handful of patterns." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Default change detection running everywhere by default" }), "\n", _jsx(_components.li, { children: "Template expressions recomputing every cycle" }), "\n", _jsx(_components.li, { children: "Subscriptions piling up across a long session" }), "\n", _jsx(_components.li, { children: "One giant bundle when three smaller ones would do" }), "\n", _jsx(_components.li, { children: "Lists tearing themselves down and rebuilding on every data update" }), "\n"] }), "\n", _jsx(_components.p, { children: "Fix those five and your app will stay fast as it grows. None of this is exotic. It is mostly discipline applied over time. That is how most of engineering feels once you are out of school." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Building Performant Angular Applications: Lessons from Windward's Store