Recommended
More Related Content
What's hot
What's hot (20)
Similar to Rethinking Angular Architecture & Performance
Similar to Rethinking Angular Architecture & Performance (20)
Recently uploaded
Recently uploaded (20)
Rethinking Angular Architecture & Performance
- 1. RETHINKING ANGULAR ARCHITECTURE & PERFORMANCE MarkPieszak
- 2. MarkPieszak Mark Pieszak CO-FOUNDER TRILON.IO Angular Universal Team NestJS Core Team Open Source ASP.NET Core + Angular Universal starter ASP.NET Core + Vue starter Angular Azure Application Insights MarkPieszak
- 7. MarkPieszak APP MODULE Main.ts platformBrowser() MODULE MODULE MODULE Request Response Bundle & Deploy
- 8. HOW DO USERS SEE OUR APP? MarkPieszak
- 12. IMPROVING THE USER EXPERIENCE MarkPieszak
- 13. PERFORMANCE MATTERS MarkPieszak Walmart saw a 1% increase in revenue for every 100ms improvement in performance.
- 14. WHERE DO WE BEGIN? MarkPieszak
- 16. MarkPieszak > ANALYZE > EXPERIMENT > AUDIT
- 20. WHAT TOOLS CAN WE USE? MarkPieszak
- 22. Helps visualize Architecture Vendor / 3rd party libs Main bundle Lazy chunks MarkPieszak > WEBPACK BUNDLE ANALYZER
- 25. Reduce “Main Thread” execution time Objective: Minimize main bundle (wherever possible) - Remove unneeded code & imports from “main” - Remove as many third party libs from “main” MarkPieszak
- 26. MarkPieszak
- 27. MarkPieszak FAST RESPONSIVE INTERACTIVE First Initial Paint Small Bundle payload TTI ( Time-to-interactive )
- 28. TIP: Be careful not to abuse or misuse imports here. >> Import only what you need! MarkPieszak # 1 > LAZY-LOADING (ROUTES) FAST
- 29. @({ imports: [ UiButtonModule, UiModalModule, UiActionModule, CommonModule // ... ] }) export class OrderModule {} FAST # 1 > LAZY-LOADING (ROUTES)
- 30. MarkPieszak ORDER MODULEABOUT MODULE CART MODULE DATA MODULE TABLE MODULE 3rd Party Lib UI-MODAL MODULE AUTH MODULE AUTH MODULE DATA MODULE FAST # 1 > LAZY-LOADING (ROUTES)
- 31. TIP: Use ngx-quicklink (PreloadingStrategy) Preload lazy modules when: they are VISIBLE & the browser is idle. Bonus points: GuessJS MarkPieszak FAST # 2 > PRELOADING STRATEGIES
- 32. TIP: Dynamically Lazy-Loading Modules & Components Use tools like: ngx-loadable MarkPieszak FAST # 3 > LAZY LOADING (NON-ROUTABLE) <ngx-loadable module="lazy" [show]="show"> </ngx-loadable>
- 33. MarkPieszak TIP: Defer loading images until visible Use tools like: ng-lazyload-image FAST # 4 > DEFER IMAGE LOADING <img [defaultImage]=“defaultImage” [lazyLoad]="image">
- 34. MarkPieszak What about Content “Below the Fold” FAST
- 35. MarkPieszak Original Content Can we Lazy Load this entire Module? Or maybe just Lazy Load all of these images? FAST
- 36. TIP: Static Assets on a CDN / edge server delivery ie: Cloudflare File Compression (css, html, js) At a minimum: GZIP Ideally: Brotli Outperforms Gzip JS files ~14% smaller MarkPieszak COMPRESSED Response FAST # 5 > CDN & COMPRESSION
- 37. MarkPieszak PROS • SEO, Social-media previews, non-JS crawl-able • Faster “initial paint” CONS Slower TTI ( Time-to-interactive ) aka: Angular Universal # 6 > SERVER-SIDE RENDERING (SSR) FAST
- 38. MarkPieszak Loadin Time Initial “Paint” Fully Bootstrapped App > CLIENT-SIDE RENDERING (CSR) FAST
- 39. MarkPieszak Time > SERVER-SIDE RENDERING (SSR) Initial “Paint” Fully Bootstrapped App FAST
- 40. MarkPieszak Loading FAST INTERACTIVE Click / Scroll / all functioning ( esp during SSR )
- 41. TIP: Make sure your Initial SSR “User Experience” is still fairly interactive. INTERACTIVE # 1 > SSR - ENSURE INTERACTIVITY
- 42. MarkPieszak > SSR - ENSURE INTERACTIVITY INTERACTIVE Time Initial “Paint” Fully Bootstrapped App Mind the “gap”Can users interact ?
- 43. MarkPieszak > EXPERIMENT Use <a [routerLink]> over (click)=“” events for the most important navigation INTERACTIVE
- 44. MarkPieszak > EXPERIMENT Can we setup a [routerLink] navigation to a menu”-like Route page ? INTERACTIVE
- 45. MarkPieszak > EXPERIMENT Scroll Functionality Can the user still scroll and see at least SOME important information INTERACTIVE
- 46. Two types of SSR Run-time: Dynamic Angular Server-Side Rendering (SSR) # 1 ( continued ) INTERACTIVE /products Request Response Serialize App Hit API
- 47. Two types of SSR Build-time: Pre-rendering Angular Server-Side Rendering (SSR) # 1 ( continued ) INTERACTIVE /products Request Response Products.html
- 48. TIP: Opt for Pre-rendering routes (over Dynamic SSR) wherever possible for faster responses. Cache Pre-Rendered HTML (File Storage / MemCache / Redis) where possible Angular Server-Side Rendering (SSR) # 1 ( continued ) INTERACTIVE
- 49. Angular Server-Side Rendering (SSR) # 1 ( continued ) INTERACTIVE TIPS & TRICKS: You can setup all 3 types of rendering Pre-rendering app.get(SomeRoutes) => res.send( prerenderedHtml ) Dynamic SSR app.get(OtherRoutes) => await renderModuleFactory() Client-Side Rendering (CSR) app.get(*). => res.send( originalIndexHtml )
- 50. # 1 ( continued ) Angular Server-Side Rendering (SSR) MUST HAVE: Transfer (re-use) Http responses between SSR => CSR TransferHttpCacheModule from @NgUniversal/Common TIP: Keep your API calls “lean” to not send too much payload data down with the Html INTERACTIVE
- 51. MarkPieszak Loading FAST RESPONSIVE Fast Web/Tablet/Mobile versions Usable even with slow (or zero) internet
- 52. MarkPieszak TIP: Setup a Service Worker Cache assets (JS/CSS/HTML/images) to speed up subsequent page loads RESPONSIVE # 6 > PWA (PROGRESSIVE WEB APP)
- 53. FIND THE RIGHT BALANCE
- 56. Keep that MAIN bundle small Move whatever functionality you can out of AppModule / main.bundle Try to keep NgModules lean / compact Be intentional with imports MarkPieszak >>> IN CONCLUSION
- 57. Lazy-Load sections of your app - when visible Images Modules Components If you’re doing SSR Remember to maintain some functionality during the first initial paint MarkPieszak >>> IN CONCLUSION
- 58. MarkPieszak Angular Performance Checklist > ADDITIONAL RESOURCES by: Minko Gevchev Why it's tricky to measure Server-side Rendering performance by: David East