Angular Ivy

What's Ivy?

• "ngiv"

  • Isomorphic View engine (maybe)

• The 3th generation view engine

  • v2: Renderer

  • v4-v6: Renderer2 

Angular Ivy

ng-conf 2018 keynote

ng-conf 2018 keynote

ng-conf 2018 keynote

ng-conf 2018 keynote

ng-conf 2018 keynote

• Tree-Shakable Renderer

  • Remove unused features

• Hard-tuned runtime

  • V8 friendly JavaScript code

Smaller

ng-conf 2018 keynote

ng-conf 2018 keynote

• Faster compilation

  • Improve incremental compilation

  • Project scalability

Faster

"Locality"

• Easy to understand generated code

• Easy to debug

Simpler

Human-readable codegen

Angular Elements

Angular Elements

Angular for www

• Angular components everywhere

• ng-conf 2018 update

• Documentation

Angular Elements

Angular component as a Custom Elements

With Ivy

Small Core Runtime

Angular i18n

Angular i18n

• Ivy-style i18n engine

  • Easy to read

Decorator-less Component

Disclaimer: This is a dream, not real yet.

Component Decorator

Ivy Template Instructions

=> ngTemplate

BTW...

Imagine React-ish component definition

=> jsxToIvy

=> render()

=> Final Form

How do you feel?

Conclusion

• Next-generation Angular View engine

• Focus on ...

  • Small runtime (Tree-Shake-ability)

  • Fast compilation (Locality)

  • Simple API (Debug-ability)

• Big possibility

  • Meta-programming dream!!

Angular Ivy