Performance Lessons from the World's Largest Angular Application

on YouTube ↗19m

" summary

Google Cloud Console is a 100% Angular app with 16 million lines of code, ~2,000 contributors and ~4,000 routes; performance investigation uses client-observed latency percentiles, Zone JS to track async, and Angular DevTools profiling. Fixes include splitting a giant tree grid into tabbed tables, lazy-instantiating tab contents with ng-template mat-tab-content, moving charts into a deferred dynamic import to shrink a page bundle from ~5MB to ~3MB, and replacing 2,000 inputs with a paginated table; a slow page drops from 9s to 2.3s.

AI-written summary · about

" chapters (8)

1. 0:00Performance challenges
2. 1:47Measuring with SLOs and latency
3. 3:13Slow page with tree grid
4. 6:44Tree grid into tabs
5. 8:29Fixing eager initialization
6. 10:58Reducing bundle size
7. 13:47Forms to paginated tables
8. 15:58Key takeaways

" related talks

• 20mBuilding Platforms with AngularJen Bourey · ng-conf 2015
• 23mPerformance optimizations in AngularMert Değirmenci · AngularConnect 2019
• 31mAngular Performance: Your App at the Speed of LightChristian Liebel · NG-DE Conference 2019
• 20mAngular Performance in the EnterpriseMinko Gechev · EnterpriseNG 2020
• 38mIntroduction to AngularJSShyam Seshadri · AngularJS Miniconf 2014
• 40mNon-trivial optimization techniques in AngularMichael Hladky · Armada JS 2023
• 24mGCP: Migrating a 1M+ LOC project from AngularJS to AngularConnie Wan, Jen Bourey · AngularConnect 2017
• 20mTools for Fast Angular ApplicationsMinko Gechev · ng-conf 2019