Challenges of angular in production (Tasos Bekos) - GreeceJS #17
-
Upload
greecejs -
Category
Technology
-
view
223 -
download
0
Transcript of Challenges of angular in production (Tasos Bekos) - GreeceJS #17
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
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
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