Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular...
Transcript of Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular...
![Page 1: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/1.jpg)
Mantendo desempenho e integridade em uma aplicação Angular real-time
![Page 2: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/2.jpg)
- Questrade:- Aplicações angular híbrida: - AngularJS vs Angular:
Melhores práticas: Angular, React, Vue
![Page 3: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/3.jpg)
Lucas MendonçaSenior Front-end Engineer at Questrade Financial Group
![Page 4: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/4.jpg)
![Page 5: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/5.jpg)
![Page 7: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/7.jpg)
![Page 8: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/8.jpg)
Real-time and Change-detection-heavy appHigh performance necessityFinancial criticalFull responsive
03countries
>90%unit testscoverage
e2e automationmanual tests
![Page 9: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/9.jpg)
web socket
SPAAngularJS and Angular components
WEB SERVERNode.js
![Page 10: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/10.jpg)
VS
![Page 11: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/11.jpg)
Upgrading and downgrading concepts
![Page 12: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/12.jpg)
![Page 13: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/13.jpg)
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
![Page 14: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/14.jpg)
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
![Page 15: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/15.jpg)
![Page 16: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/16.jpg)
![Page 17: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/17.jpg)
(2)
(3)
(4)
(1)
(5)
![Page 18: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/18.jpg)
(2)
(3)
(4)
(1)
(5)
![Page 19: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/19.jpg)
![Page 20: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/20.jpg)
(1)
![Page 21: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/21.jpg)
(2)
(1)
![Page 22: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/22.jpg)
![Page 23: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/23.jpg)
![Page 24: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/24.jpg)
![Page 25: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/25.jpg)
![Page 26: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/26.jpg)
(1)
(2)
![Page 27: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/27.jpg)
(2)
(1)
![Page 28: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/28.jpg)
(3)
(2)
(1)
![Page 29: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/29.jpg)
![Page 30: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/30.jpg)
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)
![Page 31: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/31.jpg)
![Page 32: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/32.jpg)
![Page 33: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/33.jpg)
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)
![Page 34: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/34.jpg)
![Page 35: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/35.jpg)
![Page 36: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/36.jpg)
UpgradeModule downgradeModule
![Page 37: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/37.jpg)
UpgradeModule:
![Page 38: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/38.jpg)
downgradeModule:
![Page 39: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/39.jpg)
Pros:
Cons:
Pros:
Cons:
![Page 40: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/40.jpg)
Why?
![Page 41: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/41.jpg)
![Page 43: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/43.jpg)
![Page 44: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/44.jpg)
- ChangeDetectionStrategy
- Up to date libraries-
- AOT
- Lazy loading
![Page 45: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/45.jpg)
- 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
![Page 46: Mantendo desempenho e integridade em uma aplicação Angular … · - Aplicações angular híbrida: - AngularJS vs Angular: Melhores práticas: Angular, React, Vue. Lucas Mendonça](https://reader036.fdocuments.net/reader036/viewer/2022062919/5ee10646ad6a402d666c0ee0/html5/thumbnails/46.jpg)
?