Theory
इसे Ship करना, और इसे Fast रखना
FestConnect का front end आपकी machine पर काम करता है; अब इसे real users के लिए live जाना है, और event list grow होने के साथ इसे fast रहना है। ये last दो front-end skills हैं: deployment (app build और host करना) और performance optimisation (Angular से कम work कराना)।
यह lesson एक production bundle build करना, per-stage settings के लिए environments इस्तेमाल करना, Firebase Hosting पर deploy करना, और तीन performance techniques cover करता है: trackBy, OnPush change detection, और lazy loading। इनके साथ, FestConnect shipped भी है और snappy भी।
Theory
Build करना और Environments
Development के दौरान आप ng serve run करते हैं, पर ship करने के लिए आप build करते हैं: ng build --configuration production एक optimised bundle produce करता है, minified और tree-shaken (unused code removed), एक dist folder में लिखा हुआ host करने के लिए ready।
Apps को अलग stages में अलग settings भी चाहिए होती हैं, उदाहरण के लिए API URL आपके laptop और live server के बीच अलग होता है। Angular इसे environment files से handle करता है: environment.ts development के लिए और environment.prod.ts production के लिए, और build सही एक को swap करता है। तो आप development API को locally point रखते हैं और production वाले को real backend पर point, बिना code edit किए।
Practical
Build करना और Firebase Hosting पर Deploy करना
# Build an optimised production bundle into dist/
ng build --configuration production
# One-time setup, then deploy the built static files
firebase init hosting # point it at the dist/ output folder
firebase deploy # uploads and serves your app live
# Firebase Hosting serves the built files over HTTPS on a global CDN.Theory
Fast रहने के तीन तरीके
जैसे FestConnect grow करता है, तीन techniques इसे responsive रखती हैं।
एक list में (@for या ngFor) trackBy Angular को बताता है हर item को कैसे identify करना है, तो list change होने पर यह unchanged items के लिए DOM reuse करता है बजाय हर row rebuild करने के। OnPush change detection एक component को बताता है सिर्फ़ तब re-check करे जब इसके @Input values change हों (कहीं और हर छोटे event पर नहीं), needless work काटते हुए। Lazy loading (routing lesson से) एक page का code load होना तब तक defer करता है जब तक इसे visit न किया जाए, तो app तेज़ी से start होता है।
हर एक spirit में same चीज़ करता है: कम work कीजिए, सिर्फ़ वही re-render, re-check, या load कीजिए जिसे actually इसकी ज़रूरत है।
Practical
trackBy और OnPush
// OnPush: this component re-checks only when its @Input changes
@Component({
selector: 'app-events',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
@for (e of events; track e.id) { <!-- 'track' is trackBy: reuse DOM -->
<app-event-card [event]="e" />
}`,
})
export class EventsComponent {
@Input() events: Event[] = [];
}
// track e.id lets Angular reuse rows whose id is unchanged, instead of all.Quiz
Events की एक long list में जो अक्सर update होती है, trackBy (track e.id) add करना क्या achieve करता है?
- यह list को automatically sort करता है
- यह Angular को unchanged items के लिए DOM reuse करने देता है बजाय पूरी list re-render करने के, performance improve करते हुए
- यह list data को encrypt करता है
- यह duplicate ids वाले items delete करता है
Show the answer
यह Angular को unchanged items के लिए DOM reuse करने देता है बजाय पूरी list re-render करने के, performance improve करते हुए
trackBy Angular को बताता है हर item को कैसे identify करना है (e.id से), तो list change होने पर Angular उन items के लिए existing DOM elements REUSE कर सकता है जो still same हैं और सिर्फ़ वही touch करता है जो actually changed हुआ, बजाय हर row destroy और rebuild करने के। Option A wrong है: trackBy sort नहीं करता; यह identity track करता है। Option C invented है; इसका encryption से कोई लेना-देना नहीं है। Option D wrong है: यह duplicates delete नहीं करता; यह id इस्तेमाल करता है updates के across items match करने के लिए। trackBy के बिना, एक list update हर row re-render कर सकता है (long lists के लिए slow); इसके साथ, Angular minimum work करता है। यह एक do-less-work optimisation है, performance tuning का theme।
Think first
OnPush Change Detection एक App को Faster क्यों बनाता है?
Angular components को changes के लिए automatically check करता है। OnPush, जो कम बार check करता है, चीज़ों को तोड़ने की बजाय help क्यों करता है? फिर tap कीजिए।
Show the answer
क्योंकि default से Angular हर COMPONENT को बहुत frequently re-check करता है (app में कहीं भी लगभग हर event के बाद) यह देखने के लिए view को update करने की ज़रूरत है या नहीं, और OnPush safely इसे कम करके सिर्फ़ तब करता है जब एक component के inputs actually change हों, तो app कहीं कम redundant work करता है। Change detection वह तरीका है जिससे Angular screen को आपके data के साथ sync रखता है: events के बाद, यह component tree walk करता है check करते हुए कोई template जो दिखाता है वह change हुआ या नहीं। एक बड़ी app के लिए इसका मतलब हो सकता है हर interaction पर हज़ारों checks, जिनमें से ज़्यादातर को update करने के लिए कुछ नहीं मिलता, wasted effort जो UI को sluggish बना सकता है। OnPush Angular को बताता है: 'इस component का view सिर्फ़ इसके @Input values (और कुछ well-defined triggers) पर depend करता है, तो आपको इसे सिर्फ़ तब re-check करना है जब उनमें से एक input reference change हो।' यह Angular को उन कई change-detection passes के दौरान वह component (और अक्सर इसका subtree) check करना SKIP करने देता है जहाँ इसके inputs change नहीं हुए, work dramatically काटते हुए। यह correctness नहीं तोड़ता जब तक आप pattern follow करते हैं (data नीचे inputs के through pass कीजिए, inputs को immutable treat कीजिए, streams के लिए observables/async pipe इस्तेमाल कीजिए), जिसे smart/dumb structure naturally encourage करता है, clear inputs वाले dumb components ideal OnPush candidates हैं। तो OnPush faster है क्योंकि यह 'सब कुछ, हर समय check कीजिए' को 'सिर्फ़ इसे तब check कीजिए जब इसके inputs change हों' से replace करता है, view सही रखते हुए बहुत सारा pointless recomputation eliminate करते हुए। कम checking, same result, faster app।
Summary
Key takeaways
- Ship करने के लिए, एक production bundle build कीजिए: ng build --configuration production एक optimised (minified, tree-shaken) dist folder create करता है।
- Environment files (environment.ts vs environment.prod.ts) API URL जैसी per-stage settings hold करती हैं, build time पर swapped होती हैं।
- Firebase Hosting built static files serve करता है (firebase init hosting, firebase deploy) HTTPS के over।
- trackBy (track e.id) Angular को unchanged list items के लिए DOM reuse करने देता है बजाय पूरी list re-render करने के।
- OnPush change detection एक component को सिर्फ़ इसके @Input values change होने पर re-check कराता है, needless work काटते हुए।
- Lazy loading एक page का code तब तक defer करता है जब तक इसे visit न किया जाए; तीनों optimisations कम work करने का idea share करते हैं।
- Memory hook: Firebase पर build और deploy कीजिए; trackBy, OnPush, और lazy loading इसे fast रखते हैं।