mantendo desempenho e integridade em uma aplicação angular … · - aplicações angular...
TRANSCRIPT
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
?
