mantendo desempenho e integridade em uma aplicação angular … · - aplicações angular...

Mantendo desempenho e integridade em uma aplicação Angular real-time

- Questrade:- Aplicações angular híbrida: - AngularJS vs Angular:

Melhores práticas: Angular, React, Vue

Lucas MendonçaSenior Front-end Engineer at Questrade Financial Group

Real-time and Change-detection-heavy appHigh performance necessityFinancial criticalFull responsive

03countries

>90%unit testscoverage

e2e automationmanual tests

web socket

SPAAngularJS and Angular components

WEB SERVERNode.js

VS

Upgrading and downgrading concepts

import { HeroDetailComponent } from './hero-detail.component';import { downgradeComponent } from '@angular/upgrade/static';

angular.module('heroApp', []).directive(

'heroDetail',

downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory

);

12

34

5

6

import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({ selector: 'hero-detail-upgraded' })export class HeroDetailDirective extends UpgradeComponent {

constructor(elementRef: ElementRef, injector: Injector){ super('heroDetail', elementRef, injector);

}

}

2

34

56

(2)

(3)

(4)

(1)

(5)

(2)

(3)

(4)

(1)

(5)

(1)

(2)

(1)

(1)

(2)

(2)

(1)

(3)

(2)

(1)

VS

angular digest cycle

$scope.$apply() / $scope.$digest()

dirty-checking

change detection

zone.js (ngZone)

better performance

async functions, XHR requests, user events (mouse, click, input)

VS

angular digest cycle

$scope.$apply() / $scope.$digest()

dirty-checking

change detection

zone.js (ngZone)

better performance

async functions, XHR requests, user events (mouse, click, input)

UpgradeModule downgradeModule

UpgradeModule:

downgradeModule:

Pros:

Cons:

Pros:

Cons:

Why?

- ChangeDetectionStrategy

- Up to date libraries-

- AOT

- Lazy loading

- Hybrid apps- no emulation- all code is running exclusively in its own scope- Good hybrid apps architecture can keep performance - Services and components are shareable

- Change detection- Angular provides good "magic" strategies to detect changes

- ngZone, Zone.js- You can define and control how Angular should detect changes

- Upgrade soon as possible

- No silver bullet- but think more about downgradeModule

?

lucasmmendoncalmendonca@questrade.com

lucasnix@gmail.com