Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 0bdda1d

Browse files
authored
docs: convert AoT/JiT to approved spelling, AOT/JIT (#2969)
1 parent 0d5073e commit 0bdda1d

File tree

11 files changed

+101
-101
lines changed

11 files changed

+101
-101
lines changed

public/docs/ts/_cache/glossary.jade

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ block includes
2525

2626
a#aot
2727
:marked
28-
## Ahead-of-Time (AoT) compilation
28+
## Ahead-of-time (AOT) compilation
2929
.l-sub-section
3030
:marked
3131
You can compile Angular applications at build-time.
@@ -393,7 +393,7 @@ a#H
393393

394394
a#jit
395395
:marked
396-
## Just-in-Time (JiT) compilation
396+
## Just-in-time (JIT) compilation
397397
.l-sub-section
398398
:marked
399399
With Angular _just-in-time_ bootstrapping you compile your components<span if-docs="ts"> and modules</span> in the browser

public/docs/ts/_cache/guide/setup.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ table(width="100%")
113113
td <ngio-ex>main.ts</ngio-ex>
114114
td
115115
:marked
116-
Compiles the application with the [JiT compiler](../glossary.html#jit)
116+
Compiles the application with the [JIT compiler](../glossary.html#jit)
117117
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
118118
That's a reasonable choice for the development of most projects and
119119
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.

public/docs/ts/latest/cookbook/aot-compiler.jade

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
include ../_util-fns
22

33
:marked
4-
This cookbook describes how to radically improve performance by compiling _Ahead of Time_ (AoT)
4+
This cookbook describes how to radically improve performance by compiling _Ahead of Time_ (AOT)
55
during a build process.
66

77
a#toc
88
:marked
99
## Table of Contents
1010
* [Overview](#overview)
1111
* [_Ahead-of-Time_ vs _Just-in-Time_](#aot-jit)
12-
* [Compile with AoT](#compile)
12+
* [Compile with AOT](#compile)
1313
* [Bootstrap](#bootstrap)
1414
* [Tree Shaking](#tree-shaking)
1515
* [Load the bundle](#load)
@@ -29,37 +29,37 @@ a#overview
2929
:marked
3030
<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo" target="_blank">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
3131
:marked
32-
You can compile the app in the browser, at runtime, as the application loads, using the **_Just-in-Time_ (JiT) compiler**.
32+
You can compile the app in the browser, at runtime, as the application loads, using the **_Just-in-Time_ (JIT) compiler**.
3333
This is the standard development approach shown throughout the documentation.
3434
It's great .. but it has shortcomings.
3535

36-
JiT compilation incurs a runtime performance penalty.
36+
JIT compilation incurs a runtime performance penalty.
3737
Views take longer to render because of the in-browser compilation step.
3838
The application is bigger because it includes the Angular compiler
3939
and a lot of library code that the application won't actually need.
4040
Bigger apps take longer to transmit and are slower to load.
4141

4242
Compilation can uncover many component-template binding errors.
43-
JiT compilation discovers them at runtime which is later than we'd like.
43+
JIT compilation discovers them at runtime which is later than we'd like.
4444

45-
The **_Ahead-of-Time_ (AoT) compiler** can catch template errors early and improve performance
45+
The **_Ahead-of-Time_ (AOT) compiler** can catch template errors early and improve performance
4646
by compiling at build time as you'll learn in this chapter.
4747

4848

4949
a#aot-jit
5050
.l-main-section
5151
:marked
52-
## _Ahead-of-time_ (AoT) vs _Just-in-time_ (JiT)
52+
## _Ahead-of-time_ (AOT) vs _Just-in-time_ (JIT)
5353

54-
There is actually only one Angular compiler. The difference between AoT and JiT is a matter of timing and tooling.
55-
With AoT, the compiler runs once at build time using one set of libraries;
56-
With JiT it runs every time for every user at runtime using a different set of libraries.
54+
There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling.
55+
With AOT, the compiler runs once at build time using one set of libraries;
56+
With JIT it runs every time for every user at runtime using a different set of libraries.
5757

58-
### Why do AoT compilation?
58+
### Why do AOT compilation?
5959

6060
*Faster rendering*
6161

62-
With AoT, the browser downloads a pre-compiled version of the application.
62+
With AOT, the browser downloads a pre-compiled version of the application.
6363
The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
6464

6565
*Fewer asynchronous requests*
@@ -75,20 +75,20 @@ a#aot-jit
7575

7676
*Detect template errors earlier*
7777

78-
The AoT compiler detects and reports template binding errors during the build step
78+
The AOT compiler detects and reports template binding errors during the build step
7979
before users can see them.
8080

8181

8282
*Better security*
8383

84-
AoT compiles HTML templates and components into JavaScript files long before they are served to the client.
84+
AOT compiles HTML templates and components into JavaScript files long before they are served to the client.
8585
With no templates to read and no risky client-side HTML or JavaScript evaluation,
8686
there are fewer opportunities for injection attacks.
8787

8888
a#compile
8989
.l-main-section
9090
:marked
91-
## Compile with AoT
91+
## Compile with AOT
9292

9393
### Prepare for offline compilation
9494
Take the <a href='../guide/setup.html'>Setup</a> as a starting point.
@@ -112,7 +112,7 @@ code-example(format='.').
112112

113113
`ngc` is a drop-in replacement for `tsc` and is configured much the same way.
114114

115-
`ngc` requires its own `tsconfig.json` with AoT-oriented settings.
115+
`ngc` requires its own `tsconfig.json` with AOT-oriented settings.
116116
Copy the original `tsconfig.json` to a file called `tsconfig-aot.json`, then modify it to look as follows.
117117

118118
+makeExample('cb-aot-compiler/ts/tsconfig-aot.json', null, 'tsconfig-aot.json')(format='.')
@@ -132,14 +132,14 @@ code-example(format='.').
132132
:marked
133133
***Component-relative Template URLS***
134134

135-
The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
135+
The AOT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
136136
That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file.
137137
For example, an `'app.component.html'` URL means that the template file is a sibling of its companion `app.component.ts` file.
138138

139-
While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation.
139+
While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation.
140140

141-
JiT-compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
142-
The `module` object is undefined when an AoT-compiled app runs.
141+
JIT-compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
142+
The `module` object is undefined when an AOT-compiled app runs.
143143
The app fails with a null reference error unless you assign a global `module` value in the `index.html` like this:
144144
+makeExample('cb-aot-compiler/ts/index.html','moduleId')(format='.')
145145
.l-sub-section
@@ -149,7 +149,7 @@ code-example(format='.').
149149
:marked
150150
### Compiling the application
151151

152-
Initiate AoT compilation from the command line using the previously installed `ngc` compiler by executing:
152+
Initiate AOT compilation from the command line using the previously installed `ngc` compiler by executing:
153153
code-example(format='.').
154154
node_modules/.bin/ngc -p tsconfig-aot.json
155155
.l-sub-section
@@ -171,8 +171,8 @@ code-example(format='.').
171171
The curious can open the `aot/app.component.ngfactory.ts` to see the original Angular template syntax
172172
in its intermediate, compiled-to-TypeScript form.
173173

174-
JiT compilation generates these same _NgFactories_ in memory where they are largely invisible.
175-
AoT compilation reveals them as separate, physical files.
174+
JIT compilation generates these same _NgFactories_ in memory where they are largely invisible.
175+
AOT compilation reveals them as separate, physical files.
176176

177177
:marked
178178
.alert.is-important
@@ -184,21 +184,21 @@ a#bootstrap
184184
:marked
185185
## Bootstrap
186186

187-
The AoT path changes application bootstrapping.
187+
The AOT path changes application bootstrapping.
188188

189189
Instead of bootstrapping `AppModule`, you bootstrap the application with the generated module factory, `AppModuleNgFactory`.
190190

191-
Switch from the `platformBrowserDynamic.bootstrap` used in JiT compilation to
191+
Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to
192192
`platformBrowser().bootstrapModuleFactory` and pass in the `AppModuleNgFactory`.
193193

194-
Here is AoT bootstrap in `main.ts` next to the familiar JiT version:
194+
Here is AOT bootstrap in `main.ts` next to the familiar JIT version:
195195

196196
+makeTabs(
197197
`cb-aot-compiler/ts/app/main.ts,
198198
cb-aot-compiler/ts/app/main-jit.ts`,
199199
null,
200-
`app/main.ts (AoT),
201-
app/main.ts (JiT)`
200+
`app/main.ts (AOT),
201+
app/main.ts (JIT)`
202202
)
203203

204204
:marked
@@ -208,7 +208,7 @@ a#tree-shaking
208208
:marked
209209
## Tree Shaking
210210

211-
AoT compilation sets the stage for further optimization through a process called _Tree Shaking_.
211+
AOT compilation sets the stage for further optimization through a process called _Tree Shaking_.
212212
A Tree Shaker walks the dependency graph, top to bottom, and _shakes out_ unused code like
213213
dead needles in a Christmas tree.
214214

@@ -219,9 +219,9 @@ a#tree-shaking
219219
For example, this demo application doesn't use anything from the `@angular/forms` library.
220220
There is no reason to download Forms-related Angular code and tree shaking ensures that you don't.
221221

222-
Tree Shaking and AoT compilation are separate steps.
222+
Tree Shaking and AOT compilation are separate steps.
223223
Tree Shaking can only target JavaScript code.
224-
AoT compilation converts more of the application to JavaScript,
224+
AOT compilation converts more of the application to JavaScript,
225225
which in turn makes more of the application "Tree Shakable".
226226

227227
### Rollup
@@ -323,7 +323,7 @@ code-example(format='.').
323323
a#source-code
324324
.l-main-section
325325
:marked
326-
## AoT QuickStart Source Code
326+
## AOT QuickStart Source Code
327327

328328
Here's the pertinent source code:
329329
+makeTabs(
@@ -348,67 +348,67 @@ a#toh
348348
## Tour of Heroes
349349

350350
The sample above is a trivial variation of the QuickStart app.
351-
In this section you apply what you've learned about AoT compilation and Tree Shaking
351+
In this section you apply what you've learned about AOT compilation and Tree Shaking
352352
to an app with more substance, the tutorial [_Tour of Heroes_](../tutorial/toh-pt6.html).
353353

354-
### JiT in development, AoT in production
354+
### JIT in development, AOT in production
355355

356-
Today AoT compilation and Tree Shaking take more time than is practical for development. That will change soon.
357-
For now, it's best to JiT compile in development and switch to AoT compilation before deploying to production.
356+
Today AOT compilation and Tree Shaking take more time than is practical for development. That will change soon.
357+
For now, it's best to JIT compile in development and switch to AOT compilation before deploying to production.
358358

359359
Fortunately, the source code can be compiled either way without change _if_ you account for a few key differences.
360360

361361
***index.html***
362362

363-
The JiT and AoT apps require their own `index.html` files because they setup and launch so differently.
364-
**Put the AoT version in the `/aot` folder** because two `index.html` files can't be in the same folder.
363+
The JIT and AOT apps require their own `index.html` files because they setup and launch so differently.
364+
**Put the AOT version in the `/aot` folder** because two `index.html` files can't be in the same folder.
365365

366366
Here they are for comparison:
367367

368368
+makeTabs(
369369
`toh-6/ts/aot/index.html,
370370
toh-6/ts/index.html`,
371371
null,
372-
`aot/index.html (AoT),
373-
index.html (JiT)`
372+
`aot/index.html (AOT),
373+
index.html (JIT)`
374374
)
375375

376376
:marked
377-
The JiT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim.
377+
The JIT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim.
378378
Both scripts appear in its `index.html`.
379379

380-
The AoT version loads the entire application in a single script, `aot/dist/build.js`.
380+
The AOT version loads the entire application in a single script, `aot/dist/build.js`.
381381
It does not need `SystemJS` or the `reflect-metadata` shim; those scripts are absent from its `index.html`
382382

383383
***main.ts***
384384

385-
JiT and AoT applications boot in much the same way but require different Angular libraries to do so.
385+
JIT and AOT applications boot in much the same way but require different Angular libraries to do so.
386386
The key differences, covered in the [Bootstrap](#bootstrap) section above,
387387
are evident in these `main` files which can and should reside in the same folder:
388388

389389
+makeTabs(
390390
`toh-6/ts/app/main-aot.ts,
391391
toh-6/ts/app/main.ts`,
392392
null,
393-
`app/main-aot.ts (AoT),
394-
app/main.ts (JiT)`
393+
`app/main-aot.ts (AOT),
394+
app/main.ts (JIT)`
395395
)
396396

397397
:marked
398398
***TypeScript configuration***
399399

400-
JiT-compiled applications transpile to `commonjs` modules.
401-
AoT-compiled applications transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking.
402-
AoT requires its own TypeScript configuration settings as well.
400+
JIT-compiled applications transpile to `commonjs` modules.
401+
AOT-compiled applications transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking.
402+
AOT requires its own TypeScript configuration settings as well.
403403

404404
You'll need separate TypeScript configuration files such as these:
405405

406406
+makeTabs(
407407
`toh-6/ts/tsconfig-aot.json,
408408
toh-6/ts/tsconfig.json`,
409409
null,
410-
`tsconfig-aot.json (AoT),
411-
tsconfig.json (JiT)`
410+
`tsconfig-aot.json (AOT),
411+
tsconfig.json (JIT)`
412412
)
413413

414414
.callout.is-helpful
@@ -434,17 +434,17 @@ a#toh
434434

435435
.alert.is-important
436436
:marked
437-
The general audience instructions for running the AoT build of the Tour of Heroes app are not ready.
437+
The general audience instructions for running the AOT build of the Tour of Heroes app are not ready.
438438

439439
The following instructions presuppose that you have cloned the
440440
<a href="https://github.com/angular/angular.io" target="_blank">angular.io</a>
441441
github repository and prepared it for development as explained in the repo's README.md.
442442

443443
The _Tour of Heroes_ source code is in the `public/docs/_examples/toh-6/ts` folder.
444444
:marked
445-
Run the JiT-compiled app with `npm start` as for all other JiT examples.
445+
Run the JIT-compiled app with `npm start` as for all other JIT examples.
446446

447-
Compiling with AoT presupposes certain supporting files, most of them discussed above.
447+
Compiling with AOT presupposes certain supporting files, most of them discussed above.
448448
+makeTabs(
449449
`toh-6/ts/aot/index.html,
450450
toh-6/ts/aot/bs-config.json,
@@ -463,14 +463,14 @@ code-example(format='.').
463463
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
464464
"lite:aot": "lite-server -c aot/bs-config.json",
465465
:marked
466-
Copy the AoT distribution files into the `/aot` folder with the node script:
466+
Copy the AOT distribution files into the `/aot` folder with the node script:
467467
code-example(format='.').
468468
node copy-dist-files
469469
.l-sub-section
470470
:marked
471471
You won't do that again until there are updates to `zone.js` or the `core-js` shim for old browsers.
472472
:marked
473-
Now AoT-compile the app and launch it with the `lite` server:
473+
Now AOT-compile the app and launch it with the `lite` server:
474474
code-example(format='.').
475475
npm run build:aot && npm run lite:aot
476476

0 commit comments

Comments
 (0)