Performance Angular

Transcript

1. Performance Angular app
 Harder, Better, Faster, Stronger 2016.10.09 #wbkyoto #ng_kyoto
2. About me • @Quramy (Yosuke Kurami) • Frontend Web Developer at WACUL INC. • develop SPA with Angular(1 and 2) • Maintaining a Vim plugin for TypeScript • http://vimawesome.com/plugin/tsuquyomi • I don’t use nor know Wordpress.

3. Are you tackling Angular?
4. Angular • One framework • TypeScript • Future specs: • Observable, Shadow-DOM, Fetch API, etc…
5. But wait
6. Remember: AngularJS is not fast https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout
7. “Compilation” in Angular • Angular has “template compiler”: • creates functions optimized for manipulating DOM, to defeat VDOM.
8. Compilation is too heavy
11. JiT v.s. AoT • JiT(Just in Time) Compilation [Default]: • Linking functions generated at run-time. • AoT(Ahead of Time) Compilation: • Linking functions generated at your build. • You can use compiler-cli(ngc)
12. Demonstration of AoT
13. Beyond the AoT
14. bundle.js, it’s too large
15. Limitation of JavaScript minifier • Static types allow more optimization • TypeScript(statically type language) • Google Closure Compiler has annotated- based minifier • So, TypeScript + AoT + Closure Compiler..?
 https://github.com/angular/tsickle