What is new in Angular ?

Transcript

1. What is new in Angular S M Asad Rahman CTO, Monstar Lab Bangladesh
2. Schematics • @angular-devkit/schematics released on Nov 2017 • Generates template based boilerplate code • Hooks for ng cli command • Smooth version update
3. • https://angular.io/guide/schematics • https://www.youtube.com/watch?v=usRrkAzZ108 • Write your own schematics https://www.youtube.com/watch?v=_l-gTk4IoBc • https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2
4. Angular Element • @angular/elements • export Angular component as Web component • Can be used any where; other frameworks, html • Can be used in any CMS like word press • Best fit for micro-front-end eco system
6. • https://angular.io/guide/elements • https://developer.mozilla.org/en- US/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events
7. Differential Loading • Till Angular 7 • compiler used to compile all ts files to js files • app bundle contains javascript for both modern & old browsers • With differential loading • compiler generates separate file for es5 and es2015 • Modern browsers only load less size faster es2015
8. Ivy Renderer
9. Template engine View Engine Ivy Rendered Angular 2 Angular 8 Angular 4 Render engines
10. challenges • load faster in slow internet mobile devices ? • How to build faster ? • Less application memory footprint ? • More cleaner debugging ?
11. Cake threshold challenge @bradlygreen
12. Tree shaking • Previous render engine only could tree shakes application code • Ivy keeps track of directives used in each component • Tree shakes framework codes that not used in component
13. Bye bye NgModule • Earlier angular component must be part of NgModule • NgModule controls dependency injection & component definition • NgModule contains ngZone, which controls dirtyChecking
14. Bye bye NgModule • With Ivy component can be lazy loaded like module • Component can be dynamically declared and use injector onFly
15. Virtual Dom
16. Incremental Dom
17. Incremental Dom • Every component gets compiled into a series of instructions. • These instructions create DOM trees and update them in-place when the data changes.
19. Why Incremental DOM Better ? • Interpreter does not interpret component actual code, rather instruction reference • Since it is not actual command instructions from Interpreter itself tree shakable • Since at the time of rendering no actual instructions executed no memory needed to find the difference • Only change related instructions would be executed.
20. Build faster ? • Only change related codes will recompile • Angular gives way for third party modules to keep cache
21. Status of Ivy renderer • Try ivy with angular 8 https://next.angular.io/guide/ivy • Ivy render made default in angular 9 • Angular 9 rcc version released
22. • https://blog.nrwl.io/understanding-angular-ivy-incremental-dom- and-virtual-dom-243be844bf36