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
790
Building a Pixel Art Editor with Elm
shuhei
1
720
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
150
Draw Animated Chart on React Native
shuhei
0
8.7k
Weird Attractors
shuhei
0
810
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
140
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
160
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
800
What is Parser
yui_knk
9
4.1k
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
110
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
900
What you can do with Ruby on WebAssembly
kateinoigakukun
0
160
2024 컴포즈 정원사
jisungbin
0
150
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
760
Rustではじめる負荷試験
skanehira
5
1.2k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Documentation Writing (for coders)
carmenintech
65
4.3k
A Tale of Four Properties
chriscoyier
155
22k
Writing Fast Ruby
sferik
623
60k
Optimizing for Happiness
mojombo
375
69k
Docker and Python
trallard
39
3k
The Invisible Side of Design
smashingmag
295
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How STYLIGHT went responsive
nonsquared
93
5.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Statistics for Hackers
jakevdp
793
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
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