Angular Ivy and beyond

Suguru Inatomi

@laco2net

2018-06-19

about me

  • laco / Suguru Inatomi
  • Work@Kaizen Platform
    • Frontend Dev.
  • ng-japan Organizer
  • Angular Contributor

Angular Ivy

What's Ivy?

  • "ngiv"

    • Isomorphic View engine (maybe)

  • The 3th generation view engine

    • v2: Renderer

    • v4-v6: Renderer2 

Angular Ivy

Runtime (AoT compile)

Runtime (JIT compile)

Build (AoT compile)

Runtime (AoT)

Runtime (JIT)

Build (AoT)

  • Tree-Shakable Renderer

    • Remove unused features

  • Hard-tuned runtime

    • V8 friendly JavaScript code

Smaller

  • Faster compilation

    • Improve incremental compilation

    • Project scalability

Faster

"Locality"

  • Easy to understand generated code

  • Easy to debug

Simpler

Human-readable codegen

Beyond Ivy

Angular Elements

Angular Elements

Angular for www

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

Thanks!

Suguru Inatomi

@laco2net

Angular Ivyとその先

By Suguru Inatomi

More from Suguru Inatomi