Challenges of angular in production (Tasos Bekos) - GreeceJS #17

Modern web applications have constantly growing requirements and their API and complexity grows exponentially. In this session we'll look at a practical example of how to optimize solutions, like bundling, tree shaking, ahead of time compilation​, ​lazy loading, etc. Also, we will get a glimpse of what it takes to switch a complex product to a modern stack, with Angular in its heart, and how the company's commitment is making it possible.

1. Challenges of Angular in production Tasos Bekos Frontend Architect @ ZuluTrade

2. Tasos Bekos Frontend Architect ZuluTrade Angular-UI Bootstrap ng-lightning @ tbekos @ bekos

3. Why Angular? Dependency Injection (DI) Template syntax Universal (SSR) Google Team/AngularJS

4. VS

5. Problems we faced Learning curve Training / Recruiting Breaking changes Missing libraries / resources

6. ng-lightning (https://github.com/ng-lightning/ng-lightning) Angular components & directives for Salesforce's Lightning Design System . S tateless functional components Accessibility

7. Great for collaboration Declarative syntax Designer friendly Typescript Decorators

8. Application Architecture Maintainability Scalability Performance “...decisions that are hard to change” Martin Fowler

9. Maintainability Testability Karma Protractor Automation Build: Webpack / Gulp Deployment: Jenkins Pair programming / Code reviews

10. Scalability Redux ( ngrx /store) Explicit update DevTools plugin Vertical separation of concerns Modules Typescript / Templates Horizontal separation of concerns Components Services API layer (Facade to backend services) Store layer (Reducers)

11. Pure UI Components ( onPush ) Container UI components ( async pipe) Services Store API services (Facade) Reducer Stream of immutable state slices Action State Backend response Function calls Parameters High level action/data flow @Output @Input

12. Performance Startup Download time Parse and compile time Runtime Javascript / CSS calculations

13. Startup Performance Measure and inspect Reduce size Optimize code & delivery Lazy loading

14. Measure & inspect webpagetest.org Chrome Timeline Webpack Bundle Analyzer

15. Reduce size Do not overuse libraries You don't (may not) need Lodash Make use of native Replicate small stuff Reward good behaviour Polyfill.io Don’t overuse components Can we achieve the same result with HTML/CSS ? Typescript helpers -- importHelpers   with -- noEmitHelpers

16. import { Observable } from ‘ rxjs /Rx' ; import { find } from ‘ lodash ' ; import { Observable } from ‘ rxjs /Observable' ; import find from ‘ lodash-es /find' ; // Just use ES6 find!! Modular libraries

17. Optimize code & delivery Precompilation Ahead of Time compilation optimize- js Treeshaking Webpack 2 Closure CDN publicPath : `https://mycdn.com/`

18. Lazy loading Code splitting Router System.import / import() Modals, Tabs, ... preload, prefetch preloadingStrategy : PreloadAllModules GoogleChrome /preload- webpack -plugin Timing 3 rd party dependencies Wrap external libraries, take advantage of lifecycle hooks

19. const routes : Routes = [ ... { path : 'trader' , loadChildren : './trader/ trader.module#ZlTraderModule?chunkName =trader' }, ]; plugins = [ ... new HtmlWebpackPlugin () , new PreloadWebpackPlugin ({ rel : ‘ prefetch ’, as: ‘ script ’ include: [‘ trader’ ], }) ];

20. Runtime Performance enableProdMode Ahead of Time compilation ( AoT ) Change detection OnPush detach/reattach Τake advantage of Router Reduce DOM size NgZone : runOutsideAngular Pure pipes, trackBy …

21. Future i18n during compilation time Service workers Server side rendering Angular ^4 Closure compiler for AoT

22. Thank you!