ngManila - Codename: Fireball - Hello World in Angular

HELLO WORLD
IN ANGULAR
Angular 2 Apps for Production

ABOUT ME
Iris Grace Endozo

Software Engineer, Mobile Web

Freelancer.com

irise@freelancer.com

@IrisEndozo

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

What’s the plan?
Bundling and Miniﬁcation

Tree-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.ts
import { platformBrowserDynamic } from
‘@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

// app.module.ts
import { 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.ts
import { Component } from '@angular/core';
@Component({
selector: ‘hello-world-app',
template: 'Hello world!'
})
export class AppComponent {}

What’s the plan?
Browserify and UglifyJS

Tree-shaking

AoT 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?

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
dist/bundle.min.js

$ tsc -t ES2015
$ tsc --target es5 --allowJs dist/bundle.es2015.js --out
dist/bundle.js
# Minify
dist/bundle.min.js

What’s the plan?

Tree-shaking

AoT 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 stuﬀ 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
dist/bundle.js
# Minify
dist/bundle.min.js

Reduced it by 65%!

All of these are in Angular CLI!
https://github.com/angular/angular-cli
# Build app with production config
ng build --prod --env=prod

Thanks and Qs?
Related stuﬀ:

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

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

ngManila - Codename: Fireball - Hello World in Angular

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Viewers also liked

Viewers also liked (9)

Similar to ngManila - Codename: Fireball - Hello World in Angular

Similar to ngManila - Codename: Fireball - Hello World in Angular (20)

Recently uploaded

Recently uploaded (20)

ngManila - Codename: Fireball - Hello World in Angular