Tweet
Tweet

Slide 1

Slide 1 text

What’s new in Angular V9 & Deep dive into the new Renderer Injector eliraneliassy

Slide 2

Slide 2 text

e-square.io — Founder & CEO @ e-square.io — GDE for Angular & Web Technologies — Writer for AngularInDepth — Community leader About mySelf

Slide 3

Slide 3 text

e-square.io 1. Bundle size 2. Testing 3. Debugging 4. CSS Binding 5. Build Errors 6. Build speed What’s new In Angular 9 7. Improve CD 8. Strict Templates 9. providedIn 10.Harnesses 11. New Components 12. TypeScript 3.7 13. Universal

Slide 4

Slide 4 text

e-square.io 1. Bundle size 2. Testing 3. Debugging 4. CSS Binding 5. Build Errors 6. Build speed What’s new In Angular 9 7. Improve CD 8. Strict Templates 9. providedIn 10.Harnesses 11. New Components 12. TypeScript 3.7 13. Universal

Slide 5

Slide 5 text

e-square.io Hello, Angular Ivy! 1. Smaller Bundle size 2. Faster Compilations 3. Simpler Debugging 4. Improve type checking 5. Backwards compatible

Slide 6

Slide 6 text

e-square.io Ivy is enabler

Slide 7

Slide 7 text

Bundle Size e-square.io

Slide 8

Slide 8 text

e-square.io http://bit.ly/all-you-need-to-know- angular-ivy http://bit.ly/the-future-of-angular- components

Slide 9

Slide 9 text

Faster Unit test e-square.io • 40-50% faster • Don’t recompile between tests

Slide 10

Slide 10 text

Debugging e-square.io ng object available in the code!

Slide 11

Slide 11 text

Build Errors e-square.io

Slide 12

Slide 12 text

Strict Template e-square.io • fullTemplateTypeCheck — Old behaviour that type checks most things • strictTemplates — New Option: Check everything with the strictest rules

Slide 13

Slide 13 text

Component Harness e-square.io • Test API for components and directives • Faster & safer • Less boilerplate

Slide 14

Slide 14 text

e-square.io Improve CD - NgZone Event Coalescing

Slide 15

Slide 15 text

e-square.io R3Injector

Slide 16

Slide 16 text

e-square.io ProvidedIn - new options

Slide 17

Slide 17 text

e-square.io What are Injectors? • Injector is a Key-Value map of Token -> Provider

Slide 18

Slide 18 text

e-square.io Injector - get and register

Slide 19

Slide 19 text

e-square.io Creating providers

Slide 20

Slide 20 text

e-square.io Injecting the provider

Slide 21

Slide 21 text

e-square.io Resolve the Provider - component level

Slide 22

Slide 22 text

e-square.io Resolve the Provider

Slide 23

Slide 23 text

e-square.io providedIn levels • ‘root’: The application-level injector in most apps. • ‘any’: Provides a unique instance in every module 
 (including lazy modules) that injects the token. • ‘platform’: A special singleton platform injector shared by all applications on the page.

Slide 24

Slide 24 text

e-square.io Resolve the Provider - Module level

Slide 25

Slide 25 text

e-square.io Resolve the Provider - special decorators • @Optional() • @Host() • @SkipSelf() • @Self()

Slide 26

Slide 26 text

e-square.io How it work behind the scenes • Injector is a Key-Value map of Token -> Provider

Slide 27

Slide 27 text

e-square.io The magic - @Injectable

Slide 28

Slide 28 text

e-square.io The magic - defineInjectable

Slide 29

Slide 29 text

e-square.io R3Injector

Slide 30

Slide 30 text

e-square.io Micro-Front end? Not yet…

Slide 31

Slide 31 text

e-square.io Where else then?

Slide 32

Slide 32 text

We’re here to help you!

Slide 33

Slide 33 text

Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev https://e-square.io