Production Capable Angular Apps

Production-capableAngular apps

Oussama Zaki - @OusTensai

Angular is cool and fast

Angular is cool and fastbut

Angular is cool and fastbutAngular is heavy

“ Although deploying directly from the development environment works, it's far from optimal ”

- Angular official documentation

But why?

But why ?

Angular is modular

But why ?

Angular is modularAngular needs Pollyfils

But why ?

Angular is modularAngular needs Pollyfils

Browsers’ loading process

But why ?

Angular is modularAngular needs Pollyfils

Browsers’ loading processDevelopment files are for devs

Does it matter?

I got your back

I got your back

Bundling

I got your back

BundlingInlining

I got your back

BundlingInliningMinification

I got your back

BundlingInliningMinificationUglification

I got your back

BundlingInliningMinificationUglification

AOT Compilation

AOT Compilation

Faster rendering

AOT Compilation

Faster renderingFewer asynchronous requests

AOT Compilation

Faster renderingFewer asynchronous requestsSmaller Angular framework download size

AOT Compilation

Faster renderingFewer asynchronous requestsSmaller Angular framework download sizeDetect template errors earlier

AOT Compilation

Faster renderingFewer asynchronous requestsSmaller Angular framework download sizeDetect template errors earlierBetter security

I got your back

BundlingInliningMinificationUglification

AOT Compilation

I got your back

BundlingInliningMinificationUglification

AOT CompilationTree shaking

I got your back

BundlingInliningMinificationUglification

AOT CompilationTree shakingPruned libraries

I got your back

BundlingInliningMinificationUglification

AOT CompilationTree shakingPruned libraries

Cool Demo

Thank you Ques t i ons ?

Demo Code: - https://github.com/mrtensai/angular-for-production

Sources and inspiration: - Minko Gechev’s blog: http://blog.mgechev.com/ - Angular official doc: https://angular.io/docs/ts/latest/

Illustration: - @kraphix: http://www.freepik.com/kraphix