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
860
Building a Pixel Art Editor with Elm
shuhei
1
760
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
160
Draw Animated Chart on React Native
shuhei
0
8.8k
Weird Attractors
shuhei
0
840
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
150
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
iOSでQRコード生成奮闘記
ktcryomm
2
110
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
19
4.1k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
Jakarta EE meets AI
ivargrimstad
0
490
良いコードレビューとは
danimal141
7
1.5k
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
220
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
GoとPHPのインターフェイスの違い
shimabox
2
210
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Scaling GitHub
holman
459
140k
Rails Girls Zürich Keynote
gr2m
94
13k
Making Projects Easy
brettharned
116
6k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
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