Opening Keynote
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6427260/ngrome-red.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6619931/matias.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6614211/Flag-Italy.jpg)
Matias Niemelä
- SWE @ Google
- Angular Core Team
- Finland / Canada / USA
- San Francisco
- @yearofmoo
- 7 Years of Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214543/IMG_20180305_132509_780.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214587/new-google-favicon-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6620535/sf.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6215414/IMG_20190316_214421_665.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6224735/IMG_20190312_103855.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214587/new-google-favicon-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214587/new-google-favicon-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6620532/matias2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219713/image2.03ef37e3.png)
13 Sessions + Panel
350 Attendees
NgRome
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6427260/ngrome-red.png)
v8.2.9 (stable)
v9.0.0 (next)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
Current Status (Oct 2019)
More new Angular Events each Year
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621311/Screen_Shot_2019-10-06_at_17.00.19.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621320/Screen_Shot_2019-10-06_at_17.06.12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6427260/ngrome-red.png)
- 7 Years of Angular
- Angular Today
- Ivy: Angular for Tomorrow
Keynote
----
What we will discuss?
Closing Keynote - Angular Architecture Concepts and Considerations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6619929/closing-keynote-dan-john.png)
Dan Wahlin
John Papa
@DanWahlin
@John_Papa
More than 7 years ago...
- AngularJS 1.1
- No TypeScript
- No Build System
- index.html
- More like a library than a framework
Why use a framework in 2019?
It's 2019 ... Can't web HTML/CSS/JS just do everything for us?
- Matias
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221702/typescript.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221704/bazel.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221705/rx.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221706/pwa.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221760/logo-vertical.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221765/download.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221767/Cr2LYGuW8AAelYt.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221780/download-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221789/download-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6224750/220px-NativeScript_logo.png)
Angular ===
A Collection of Robust APIs...
- Stable versioning
- Frictionless updates
- Consistent APIs
- Well tested
- Powered by Google
A Platform of Tools
- Components, Routing, Forms, etc...
- Internationalization
- Testing & Debugging
- Animations & Design
- Server-side Rendering
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219713/image2.03ef37e3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219714/image15.1c00c64f.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219717/image5.c2da7784.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219720/image1.9b59611f.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219726/image12.c1d23bc8.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219728/image6.a8af6cdc.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219729/image4.28ae2cb2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219732/image7.a1c05b94.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219738/image13.c0421ebb.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219739/image10.142e524e.png)
Tensorflow.js and Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621395/Maurizio.png)
Maurizio Vitale
@mauriziovitale_
Angular @ Google
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214587/new-google-favicon-512.png)
Over 1500+ Applications!
lessons learned?
7 Years of NG
building the Angular framework
- Many ways to build things
- Proper design
- The API is king!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214759/390-3901105_super-nintendo-controller-png.jpg)
Many ways...
- How are the inputs handled?
- What APIs do we expose?
- Hidden features?
- How fast should it be?
- Error handling
- Structure of the code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214746/nintendo_09.jpg)
The API is the most important thing...
- For tools
- For libraries
- For frameworks
- For Angular...
<div [ngClass]="myClassExp"
[ngStyle]="myStyleExp">
...
</div>
@Directive({
selector: '[ngStyle]'
})
class NgStyleDirective {
@Input('ngStyle')
ngStyleVal: string;
@Input('style')
styleVal: string;
}
The API is King!
- Expose the minimal set of controls
- Atomic and independent controls
- Good API design
Architecting Angular Applications with Angular Libraries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6620629/fabian.png)
Fabian Gosebrink
@FabianGosebrink
What is currently in Angular version 8?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
Version 8.0
- Differential Loading
- Easier Deployments
- Router Improvements
- CLI Upgrades
- Dynamic Imports
- Custom Builders
- Documentation
- And more...
What is currently in Angular version 8?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
Angular CLI
- New hello world landing page
- Command line `update` tools
Updating Angular...
- Express update with just a few commands
- All dependencies and tooling updated automatically
# update the CLI tool
ng update @angular/cli
# update the core
ng update @angular/core
# start your app
ng serve
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6222672/Screen_Shot_2019-06-05_at_22.38.48.png)
Update Guide
Docs on Version 8
Differential Loading
- Load one set of code for older browsers
- More advanced code for newer browsers
<!-- older browsers get this -->
<script type="my-app-es5.js"
nomodule>
</script>
<!-- newer browsers get this -->
<script type="my-app-es2015.js"
type="module">
</script>
// tsconfig.json
{
"compilerOptions": {
// ...
"target": "es2015",
// ...
}
}
State Management w/ NGRX & GraphQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621369/samantha-bonnie.png)
Bonnie & Samantha Brennan
@bonnster75
@thelittlestdev
Build You an NgRx Component For Great Good
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621381/mike.png)
Mike Ryan
@MikeRyanDev
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6622404/Rx_Logo-512-512.png)
RxJS: Mastering the asynchronous nature of JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621385/juan.png)
Juan Herrera
@jdjuan
What about v9?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
- Maintain Compatibility
- New Features and Improvements
- Allow Angular to be ready for tomorrow
Ivy: Refactoring the Framework
Angular Ivy
- Smaller bundle sizes
- Improved Performance
- Portability
- Tooling
- Debugging
- Styling
- And More...
Smaller bundle sizes...
- Better JS Code Compression
- Better Generated Code
class UserClass {
state = "...";
method1() {...}
method2() {...}
method3() {...}
}
// or?
user = ["..."];
function fn1(array) {...}
function fn2(array) {...}
function fn3(array) {...}
function fn4(array) {...}
function fn5(array) {...}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621564/File_-_Js-512.png)
Use Less Code?
- Reduce the applications you use
- Break up your application into chunks?
- What about the framework?
JS Bundle Size Optimizations...
class User {
private _first: string;
private _last: string;
private _age: number;
getFullName() {
return this._first + ' ' + this._last;
}
isOlderThan(age) {
return this._age > age;
}
}
var User = function() {
function t() {}
t.prototype.getFullName = function() {
return this._first + " " + this._last
};
t.prototype.isOlderThan = function(t) {
return this._age > t
};
return t;
}();
const enum UserIndex {
FirstNamePosition = 0,
LastNamePosition = 1,
AgePosition = 2
}
interface User extends Array<number|string> {
[UserIndex.FirstNamePosition]: string;
[UserIndex.LastNamePosition]: string;
[UserIndex.AgePosition]: number;
}
function getFullName(user: User) {
return user[UserIndex.FirstNamePosition] +
user[UserIndex.LastNamePosition];
}
function isOlderThan(user: User, age: number) {
return user[UserIndex.AgePosition] > age;
}
function g(u) {
return u[0] + u[1]
}
function i(u, n) {
return u[2] > n
}
Average reduction of 30% in bundle size...
Framework JS Optimization
- No maps
- No JS/TS classes
- No global knowledge
- No global state
- No boolean vars (only bits)
- No extra arrays
- No closures
- Nothing beyond o(n)
- Lots of Caching
- Lots of bit shifting
Tree-Shaking Away Unused Code...
- Not everything is required
- Why can't the framework figure this out for you?
// this code is used!
element(0, 'div');
select(0);
attribute('title', 'my elm');
styleProp('color', 'red');
classProp('ready', true);
listener(0, 'click', () => {...});
// unused code
function styleMap() {...}
function classMap() {...}
function query() {...}
<video controls poster="poster.png">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
@Component({
selector: 'video'
})
class VideoComponent {
@Input('poster')
posterUrl: string;
@Input('controls')
hasControls: any;
@ContentChildren(VideoSourceComponent)
sources: QueryList<VideoSourceComponent>;
}
function AppTemplate(ctx, rf) {
if (rf & CREATE) {
elementStart(0, 'video');
attribute('controls', true);
attribute('poster', 'poster.jpg');
element(1, 'source',
['src', 'movie.mp4', 'type', 'video/mp4']);
element(2, 'source',
['src', 'movie.ogg', 'type', 'video/ogg']);
elementEnd();
}
}
element() | styleMap() | container() |
attribute() | listener() | pipe() |
styleProp() | property() | projection() |
classProp() | select() | i18n() |
classMap() | text() | sanitize() |
All unused instructions are thrown away...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221767/Cr2LYGuW8AAelYt.jpg)
Smaller, portable web components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219724/image3.cf19556e.png)
<body>
<!-- custom element -->
<calendar-widget></calendar-widget>
<!-- custom element -->
<chat-widget></chat-widget>
</body>
Lazy Loading on Steroids (with Angular Elements)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621360/juri.png)
Juri Strumpflohner
@FabianGosebrink
New Features
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6225561/dew-fresh-garden-207355.jpg)
Improved Styling...
- All styles/classes are now handled predictably
- Better foundation for styling and animations!
<div
[style.width]="myWidth"
[style]="myStyles"
[class.active]="myActiveClass"
[class]="myClasses">
...
</div>
<!-- CSS classes -->
<!-- style values too -->
<header
[class]="headerClasses"
[class.ready]="isReady"
[style]="headerStyles"
my-style-directive>
...
</header>
@Directive({
selector: '[my-styled-dir]'
})
class MyStyledDir {
@HostBinding('style')
styles = {
border: '10px solid red'
}
}
Debugging Tools
- Console level debugging access is now supported!
ng.getComponent();
ng.getDebugNode();
ng.getHostElement();
ng.markDirty();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6622334/Screen_Shot_2019-10-07_at_00.48.32.png)
How can I use it?
# when creating a new app
ng new my-app --enable-ivy
# or update tsconfig.json
"angularCompilerOptions": {
"enableIvy": true
}
How far along is it?
98%
Passing within Google
v9.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219713/image2.03ef37e3.png)
Only a few weeks away...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219713/image2.03ef37e3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621460/Horacio.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621459/aysegul.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621458/leonardo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621467/marta__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621477/pamela.png)
Angular Migration /
Change Detection
Performance / Monitoring
Mixed reality / 3D data in a 2D world
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621460/Horacio.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621467/marta__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621467/marta__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621460/Horacio.png)
PWAs => Native Mobile Apps
Developing a mixed 3d reality
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6427260/ngrome-red.png)
Grazie!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6621480/5d02ebbc-e74f-4979-88c3-e0d0b4a955ea.jpg)
Enjoy the rest of the conference! :)
- Matias
NgRome 2019
By Matias Niemelä
NgRome 2019
- 650