Angular Ivy and beyond
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/2756726/angular_high.png)
Suguru Inatomi
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4642280/icon-0.png)
2018-06-19
about me
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/3888213/2.png)
- laco / Suguru Inatomi
- Work@Kaizen Platform
- Frontend Dev.
- ng-japan Organizer
- Join our Slack!
- Angular Contributor
Angular Ivy
What's Ivy?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020002/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020006/pasted-from-clipboard.png)
-
"ngiv"
-
Isomorphic View engine (maybe)
-
-
The 3th generation view engine
-
v2: Renderer
-
v4-v6: Renderer2
-
Angular Ivy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020183/pasted-from-clipboard.png)
Runtime (AoT compile)
Runtime (JIT compile)
Build (AoT compile)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020190/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020264/pasted-from-clipboard.png)
Runtime (AoT)
Runtime (JIT)
Build (AoT)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020295/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020118/pasted-from-clipboard.png)
-
Tree-Shakable Renderer
-
Remove unused features
-
-
Hard-tuned runtime
-
V8 friendly JavaScript code
-
Smaller
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020295/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020410/pasted-from-clipboard.png)
-
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 components everywhere
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020588/pasted-from-clipboard.png)
Angular Elements
Angular component as a Custom Elements
With Ivy
Small Core Runtime
Angular i18n
Angular i18n
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020629/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5020641/pasted-from-clipboard.png)
-
Ivy-style i18n engine
-
Easy to read
-
Decorator-less Component
Disclaimer: This is a dream, not real yet.
Component Decorator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5022274/pasted-from-clipboard.png)
Ivy Template Instructions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5026189/pasted-from-clipboard.png)
=> ngTemplate
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5026375/pasted-from-clipboard.png)
BTW...
Imagine React-ish component definition
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5022381/pasted-from-clipboard.png)
![](https://media1.giphy.com/media/2H67VmB5UEBmU/giphy.gif)
![](https://media1.giphy.com/media/pylpD8AoQCf3CQ1oO2/giphy.gif)
=> jsxToIvy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5026379/pasted-from-clipboard.png)
=> render()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5026388/pasted-from-clipboard.png)
=> Final Form
How do you feel?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/5026391/pasted-from-clipboard.png)
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!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4642280/icon-0.png)
Suguru Inatomi
Angular Ivyとその先
By Suguru Inatomi