Bye bye NgModules

Zones? Injectors? Modules? Haven’t you always wanted to create just 1 simple component without being worried about those massive buzzwords? Now you can finally get it!

Angular is changing, and with the upcoming release of Ivy, it becomes much leaner and dynamic than before. In this talk, I will demonstrate why Angular Ivy is truly a game changer. We will understand how we can leverage the Ivy renderer to create independent components, without zones, and without the need of modules. We will learn how to import non-routable components dynamically and even to create higher order components decorators!

Transcript

1. Bye Bye NgModules @eliraneliassy
2. About mySelf • Founder & developer @ • Angular-IL & AngularUP conf CO-organiser • Writer for AngularInDepth
3. Angular Ivy
5. Flashback V2 Template Compiler V4 View Engine V8 Ivy
6. Why Ivy? Faster Compilation Simpler Debugging Improve type checking Backwards Compatible
7. Reduce the bundle!
9. 63% of all US online traffic comes from smartphones and tablets.
10. Nearly 80% of internet usage is expected to have been mobile in 2019
11. What’s next?
16. “A component must belong to an NgModule” angular.io
17. ״NgModules represent applications״ Rob Wormald, Angular Core
18. I’ve only wanted a component…
19. Applications ≠ Components
21. But!
22. But! NgModules defines injectors, zones, directives, pipes, providers
23. Demo 1 Standalone Component Use the ɵrenderComponent, ɵdetectChanges() and ɵɵdirectiveInject() functions
24. Demo 2 Async Pipe Push pipe
28. Demo 3 OnPush components ɵmarkDirty(this)
31. Demo 4 Dynamic Import import()
33. HOC A function which gets a component and returns a component And also affecting the component in between…
34. Demo 5 Experimental HOC The unsubscriber HOC
37. • Ivy - 3rd generation of Angular complier is around the corner! • Future of Angular: • Standalone components • Smarter change detection • Easier dynamic loading of modules & components • HOC • Angular Elements Summary Give it a try!
38. http://bit.ly/all-you-need-to-know-angular-ivy @eliraneliassy
40. Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy