@laco0416
2016 Dec. 9 ng-japan Meetup
AngularConnect 2016
AngularConnect 2016
AngularConnect 2016
Yay!
ME
AngularConnect 2015
AngularConnect 2016
AngularConnect 2016
Time
...Ahead-of-time (AOT) compilation
is the act of compiling a high-level programming language ...
into a native (system-dependent) machine code ...
@Component({
template: '<h1>Hello {{name}}</h1>'
})
class HelloComponent {
name: string;
}
class HelloComponentFactory extends ComponentFactory<HelloComponent> {
context: HelloComponent;
createInternal() {
this.el_0 = this.renderer.createElement(parentNode, 'hi', null);
}
detectChangesInternal() {
this.renderer.setText(this.el_0, 'Hello ' + this.context.name, '');
}
}
Compile (Code Generation)
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);
class HelloMessage extends React.Component {
render() {
return React.createElement(
"div", null, "Hello ", this.props.name
);
}
}
ReactDOM.render(React.createElement(
HelloMessage, { name: "John" }), mountNode);
Compile
@Component()
renderer.createElement
JSX
React.createElement
AngularConnect 2016
AngularConnect 2016
For templates
AngularConnect 2016
For templates
AngularConnect 2016
JiT compiled
AngularConnect 2016
AoT compiled
No Compiler
AngularConnect 2016
Rob
<router-outlet [foo]="bar">
AngularConnect 2016
Template: Easy to write/read
Less code to ship
Template error detection
$ ngc -p ./tsconfig.json
NgcLoader + AoTPlugin
$ ng build --aot
Ahead-of-Time == Offline == Build step
Compilation is NOT an Angular way
AoT compilation is NOT magic
Let's try Angular-CLI with --aot