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

docs: convert AoT/JiT to approved spelling, AOT/JIT #2969

Merged
merged 1 commit into from
Dec 14, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions public/docs/ts/_cache/glossary.jade
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ block includes

a#aot
:marked
## Ahead-of-Time (AoT) compilation
## Ahead-of-time (AOT) compilation
.l-sub-section
:marked
You can compile Angular applications at build-time.
Expand Down Expand Up @@ -393,7 +393,7 @@ a#H

a#jit
:marked
## Just-in-Time (JiT) compilation
## Just-in-time (JIT) compilation
.l-sub-section
:marked
With Angular _just-in-time_ bootstrapping you compile your components<span if-docs="ts"> and modules</span> in the browser
Expand Down
2 changes: 1 addition & 1 deletion public/docs/ts/_cache/guide/setup.jade
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ table(width="100%")
td <ngio-ex>main.ts</ngio-ex>
td
:marked
Compiles the application with the [JiT compiler](../glossary.html#jit)
Compiles the application with the [JIT compiler](../glossary.html#jit)
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
That's a reasonable choice for the development of most projects and
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
Expand Down
110 changes: 55 additions & 55 deletions public/docs/ts/latest/cookbook/aot-compiler.jade
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
include ../_util-fns

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

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

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

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

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


a#aot-jit
.l-main-section
:marked
## _Ahead-of-time_ (AoT) vs _Just-in-time_ (JiT)
## _Ahead-of-time_ (AOT) vs _Just-in-time_ (JIT)

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

### Why do AoT compilation?
### Why do AOT compilation?

*Faster rendering*

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

*Fewer asynchronous requests*
Expand All @@ -75,20 +75,20 @@ a#aot-jit

*Detect template errors earlier*

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


*Better security*

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

a#compile
.l-main-section
:marked
## Compile with AoT
## Compile with AOT

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

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

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

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

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

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

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

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

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

:marked
.alert.is-important
Expand All @@ -184,21 +184,21 @@ a#bootstrap
:marked
## Bootstrap

The AoT path changes application bootstrapping.
The AOT path changes application bootstrapping.

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

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

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

+makeTabs(
`cb-aot-compiler/ts/app/main.ts,
cb-aot-compiler/ts/app/main-jit.ts`,
null,
`app/main.ts (AoT),
app/main.ts (JiT)`
`app/main.ts (AOT),
app/main.ts (JIT)`
)

:marked
Expand All @@ -208,7 +208,7 @@ a#tree-shaking
:marked
## Tree Shaking

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

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

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

### Rollup
Expand Down Expand Up @@ -323,7 +323,7 @@ code-example(format='.').
a#source-code
.l-main-section
:marked
## AoT QuickStart Source Code
## AOT QuickStart Source Code

Here's the pertinent source code:
+makeTabs(
Expand All @@ -348,67 +348,67 @@ a#toh
## Tour of Heroes

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

### JiT in development, AoT in production
### JIT in development, AOT in production

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

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

***index.html***

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

Here they are for comparison:

+makeTabs(
`toh-6/ts/aot/index.html,
toh-6/ts/index.html`,
null,
`aot/index.html (AoT),
index.html (JiT)`
`aot/index.html (AOT),
index.html (JIT)`
)

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

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

***main.ts***

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

+makeTabs(
`toh-6/ts/app/main-aot.ts,
toh-6/ts/app/main.ts`,
null,
`app/main-aot.ts (AoT),
app/main.ts (JiT)`
`app/main-aot.ts (AOT),
app/main.ts (JIT)`
)

:marked
***TypeScript configuration***

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

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

+makeTabs(
`toh-6/ts/tsconfig-aot.json,
toh-6/ts/tsconfig.json`,
null,
`tsconfig-aot.json (AoT),
tsconfig.json (JiT)`
`tsconfig-aot.json (AOT),
tsconfig.json (JIT)`
)

.callout.is-helpful
Expand All @@ -434,17 +434,17 @@ a#toh

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

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

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

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

Expand Down
Loading