Challenges ofAngular in production

Tasos BekosFrontend Architect @ ZuluTrade

Tasos BekosFrontend Architect

ZuluTrade Angular-UI Bootstrapng-lightning

@tbekos@bekos

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

VS

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

ng-lightning (https://github.com/ng-lightning/ng-lightning)

Angular components & directives for Salesforce's Lightning Design System. Stateless functional components Accessibility

Great for collaboration Declarative syntax Designer friendly Typescript Decorators

Application Architecture Maintainability Scalability Performance

“...decisions that are hard to change”

Martin Fowler

Maintainability Testability

Karma Protractor

Automation Build: Webpack / Gulp Deployment: Jenkins

Pair programming / Code reviews

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)

Pure UI Components (onPush)

Container UI components (async pipe)

Services

Store API services (Facade)Reducer

Stream of immutable state slices

ActionState Backend response

Function calls

Parameters

High level action/data flow

@Output@Input

Performance Startup

Download time Parse and compile time

Runtime Javascript / CSS calculations

Startup Performance

1. Measure and inspect2. Reduce size3. Optimize code & delivery4. Lazy loading

Measure & inspect

webpagetest.org

Chrome Timeline

Webpack Bundle Analyzer

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

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

Optimize code & delivery Precompilation

Ahead of Time compilation optimize-js

Treeshaking Webpack 2 Closure

CDN publicPath: `https://mycdn.com/`

Lazy loading Code splitting

Router System.import / import()

Modals, Tabs, ... preload, prefetch

preloadingStrategy: PreloadAllModules GoogleChrome/preload-webpack-plugin

Timing 3rd party dependencies Wrap external libraries, take advantage of

lifecycle hooks

const routes: Routes = [ ... { path: 'trader', loadChildren: './trader/trader.module#ZlTraderModule?chunkName=trader' },];

plugins = [ ... new HtmlWebpackPlugin(), new PreloadWebpackPlugin({ rel: ‘prefetch’, as: ‘script’ include: [‘trader’], })];

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…

Futurei18n during compilation timeService workersServer side rendering

Angular ^4Closure compiler for AoT

Thank you!