Performance Angular - Speaker Deck

Slide 1

Slide 1 text

Performance Angular app  Harder, Better, Faster, Stronger 2016.10.09 #wbkyoto #ng_kyoto

Slide 2

Slide 2 text

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. 

Slide 3

Slide 3 text

Are you tackling Angular?

Slide 4

Slide 4 text

Angular • One framework • TypeScript • Future specs: • Observable, Shadow-DOM, Fetch API, etc…

Slide 5

Slide 5 text

But wait

Slide 6

Slide 6 text

Remember: AngularJS is not fast https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout

Slide 7

Slide 7 text

“Compilation” in Angular • Angular has “template compiler”: • creates functions optimized for manipulating DOM, to defeat VDOM.

Slide 8

Slide 8 text

Compilation is too heavy

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

Demonstration of AoT

Slide 13

Slide 13 text

Beyond the AoT

Slide 14

Slide 14 text

bundle.js, it’s too large

Slide 15

Slide 15 text

Limitation of JavaScript miniﬁer • Static types allow more optimization • TypeScript(statically type language) • Google Closure Compiler has annotated- based miniﬁer • So, TypeScript + AoT + Closure Compiler..?  https://github.com/angular/tsickle