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
890
Building a Pixel Art Editor with Elm
shuhei
1
780
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
170
Draw Animated Chart on React Native
shuhei
0
8.8k
Weird Attractors
shuhei
0
870
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
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.3k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
Create a website using Spatial Web
akkeylab
0
310
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
400
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
590
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Scaling GitHub
holman
459
140k
Designing Experiences People Love
moore
142
24k
Building Adaptive Systems
keathley
43
2.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1k
Rails Girls Zürich Keynote
gr2m
94
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
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