ngmanila - codename: fireball - hello world in angular

HELLO WORLD IN ANGULAR

Angular 2 Apps for Production

ABOUT ME

Iris Grace EndozoSoftware Engineer, Mobile WebFreelancer.com

[email protected] @IrisEndozo

A simple, unoptimized “Hello World” app bundle in Angular 2 is ~1.9MB!

What’s the plan?

Bundling and MinificationTree-shaking

AoT compilation

Hello World!

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <hello-world-app></hello-world—app> <script src=“/node_modules/zone.js/dist/zone.js"> </script> <script src="dist/bundle.js"></script></body></html>

// main.tsimport { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic';import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

// app.module.tsimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({ imports: [BrowserModule], bootstrap: [AppComponent], declarations: [AppComponent],})export class AppModule {}

// app.component.tsimport { Component } from '@angular/core';

@Component({ selector: ‘hello-world-app', template: 'Hello world!'})export class AppComponent {}

What’s the plan?

Bundling and Minification Browserify and UglifyJS

Tree-shakingAoT compilation

# Compile TS files using Typescript compiler to JS and # Build a bundle using Browserify

$ tsc && browserify -s main dist/main.js > dist/bundle.js

# Minify using Uglify

$ uglifyjs dist/bundle.js --compress —mangle --output dist/bundle.min.js

$ ls -lah dist/bundle.js-rw-r--r-- 1 Nesiri staff 1.9M Feb 19 02:47 dist/bundle.js

# Compile TS files using Typescript compiler to JS and # Build a bundle using Browserify

$ tsc && browserify -s main dist/main.js > dist/bundle.js

# Minify using Uglify

$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js

$ ls -lah dist/bundle.min.js-rw-r--r-- 1 Nesiri staff 582K Feb 19 03:01 dist/bundle.min.js

What’s the plan?Bundling and Minification

Tree-shaking Rollup.js

AoT compilation

Tree-shaking with Rollup.js

➤ supports ES2015 modules➤ excludes unused exports from bundles

import {Form} from './forms';import {Users} from './users';

const rl = readline.createInterface({ input: process.stdin, output: process.stdout});

rl.question(‘What is the type of user you want to get?’, answer => { const type = Users[answer]; type([1, 2, 3]); });

# Transpile TS files to ES2015

$ tsc -t ES2015

# Rollup to bundle the ES2015 modules, use config file at # rollup.config.js and output at bundle.es2015.js

$ rollup -c rollup.config.js -o dist/bundle.es2015.js

# Transpile resulting bundle to ES5

$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js

# Minify



$ tsc -t ES2015




$ tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js

# Minify


What’s the plan?Bundling and Minification

Tree-shakingAoT compilation

ngc

Ahead of Time Compilation

➤ Why?➤ Faster rendering - no need to wait for the app to be compiled

before executing code➤ Smaller NG framework download - no need for the NG

compiler as the stuff is already compiled, drastically reducing the size of NG needed

➤ Template error detection - template binding errors are determined during build steps

# Compile application (including HTML templates) to TS

$ ngc -p tsconfig.json && cp app/* compiled


$ tsc -p tsconfig-tsc.json --rootDir compiled

# Treeshaking with Rollup.js




# Minify




Reduced it by 65%!

All of these are in Angular CLI!

https://github.com/angular/angular-cli

# Build app with production configng build --prod --env=prod

https://github.com/angular/angular-cli

Thanks and Qs?Related stuff:

https://angular.io/docs/ts/latest/cookbook/aot-compiler.htmlhttps://www.typescriptlang.org/docs/handbook/compiler-options.html

https://github.com/angular/angular-cli#usagehttps://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-

elimination-d3765df85c80#.p47uwmwevhttp://rollupjs.org/guide/#what-is-rollup

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

https://www.typescriptlang.org/docs/handbook/compiler-options.html

https://github.com/angular/angular-cli#usage

https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.p47uwmwev

https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.p47uwmwev

http://rollupjs.org/guide/#what-is-rollup

ngmanila - codename: fireball - hello world in angular

Technology