Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular 2 Offline Compiler
Search
Shuhei Kagawa
May 20, 2016
Programming
0
5.4k
Angular 2 Offline Compiler
ng-sake #3
http://ng-sake.connpass.com/event/30746/
Shuhei Kagawa
May 20, 2016
Tweet
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
Profiling Node.js apps on production
shuhei
0
900
Building a Pixel Art Editor with Elm
shuhei
1
800
Redux Middleware Wars (Japanese)
shuhei
8
1.9k
Redux Middleware Wars (English)
shuhei
0
180
Draw Animated Chart on React Native
shuhei
0
8.8k
Weird Attractors
shuhei
0
880
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
160
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
220
AIでLINEスタンプを作ってみた
eycjur
1
220
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
990
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
testingを眺める
matumoto
1
130
Honoアップデート 2025年夏
yusukebe
1
910
RDoc meets YARD
okuramasafumi
4
160
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
160
Kiroで始めるAI-DLC
kaonash
2
540
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
420
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
17
8.9k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing for humans not robots
tammielis
253
25k
How GitHub (no longer) Works
holman
315
140k
Building an army of robots
kneath
306
46k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Facilitating Awesome Meetings
lara
55
6.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
Angular 2 Offline Compiler @shuheikagawa
→ GitHub/Qiita @shuhei → Twitter @shuheikagawa → Software Engineer @
M3, Inc
Angular 2 & Me TypeScript-ish type annotations and decorators in
ES2015+ → babel-angular2-app → babel-preset-angular2 → babel-plugin-angular2-annotations
Compiler in JavaScript?
Template -> JS
Angular 1 Runtime compilation was the bottleneck
Angular 2 Compiles only once at the boot time
Can we do better?
Offline Compiler → Faster bootstrap → Smaller lib
Let's try!
$ npm i -D @angular/compiler-cli $ ./node_modules/.bin/ngc -p tsconfig.json
$ ls -l src app.css app.css.shim.ts app.ngfactory.ts app.ts main.ts
main.ts
import { coreBootstrap, ReflectiveInjector } from '@angular/core'; import { browserPlatform,
BROWSER_APP_STATIC_PROVIDERS } from '@angular/platform-browser'; import {AppNgFactory} from './app.ngfactory'; const appInjector = ReflectiveInjector.resolveAndCreate( BROWSER_APP_STATIC_PROVIDERS, browserPlatform().injector ); coreBootstrap(appInjector, AppNgFactory);
./node_modules/.bin/tsc -p tsconfig.json
Doesn't Work
→ o compiler_cli/integrationtest → x angular2-seed → x router-deprecated →
x router
None
What's .ngfactory.ts?
app.ts @Component({ selector: 'app', template: 'hello {{name}}' }) class App
{ name: string = 'ng2'; }
app.ngfactory.ts class _View_App0 extends DebugAppView<any> { createInternal() {} detectsChangeInternal() {}
} function viewFactory_App0(...): AppView<any> {} class _View_App_Host0 extends DebugAppView<any> { createInternal() {} } function viewFactory_App_Host0(...): AppView<any> {} export const AppNgFactory: ComponentFactory<App> = new ComponentFactory<App>('app', viewFactory_App_Host0, App);
createInternal
createInternal(rootSelector: string): AppElement { var parentRenderNode =this.renderer .createViewRoot(this.declarationAppElement.nativeElement); this._text_0 =
this.renderer .createText(parentRenderNode,'',this.debug(0,0,0)); this._expr_0 = import3.uninitialized; this.init([],[this._text_0],[],[]); return null; }
createInternal → create elements, texts and directives → set up
listeners → set up subscriptions → call child views
detectChangesInternal
detectChangesInternal(throwOnChange: boolean): void { this.detectContentChildrenChanges(throwOnChange); this.debug(0,0,0); var currVal_0: any =
import4.interpolate(1,'Hello World ',this.context.user,''); if (import4.checkBinding(throwOnChange,this._expr_0,currVal_0)) { this.renderer.setText(this._text_0,currVal_0); this._expr_0 = currVal_0; } this.detectViewChildrenChanges(throwOnChange); }
detectChangesInternal → detect changes → update DOMs → call child
views
Benefits → Shorter bootstrap time → JS size: compiler and
platform-browser-dynamic vs *.ngfactory.ts → Type-check your templates!
Notes → Don't check in generated files → TypeScript 1.8:
generate in src → TypeScript 1.9: use rootDirs → Expect a build system plugin instead of the CLI
Stay tuned!
fin