The Future of Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
Matias Niemelä
- Angular Core Team
- 7 Years of NG
- Finland / Canada / USA
- San Francisco
- @yearofmoo
![](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)
Back in my day...
![](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/6219713/image2.03ef37e3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6222930/ezgif-1-d4cf803892c1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6224735/IMG_20190312_103855.jpg)
What is Angular?
Is it a framework?
Does it run on JavaScript?
Is it used for Web Apps?
Does Google own it?
It is Open-Source?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
More than a frame
work...
- A framework includes tools and technologies
- For building websites and web applications
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)
Platform
equals
Framework plus more
- Platforms connect technologies together
- Provide powerful tooling
- Used to build higher-level technology
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214759/390-3901105_super-nintendo-controller-png.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214746/nintendo_09.jpg)
Angular === Platform
- Used for building rich web applications
- well tested tools and utilities
- Build on top of the platform!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6228365/Screen_Shot_2019-06-07_at_00.59.54.png)
What's it for?
- Web Applications
- Static websites
- Mobile Apps
- Desktop
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6214587/new-google-favicon-512.png)
A Collection of Robust APIs...
- Stable versioning
- Frictionless updates
- Consistent APIs
- Well tested
- Powered by Google
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221702/typescript.png)
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)
v8.0.0 (stable)
v8.1.0 (beta)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/5444968/angular.png)
Current Status (June 2019)
Version 8.0
- Differential Loading
- Smaller Bundles
- Router Improvements
- CLI Upgrades
- Improved Integration with Bazel
- And more...
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
The Future of the Angular...
v9.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6219713/image2.03ef37e3.png)
What are we working on?
- The Ivy Renderer
- Server-Side Rendering
- Better Tooling
The Ivy Renderer
- Compiler Redesign
- Runtime Refactor
- Backwards compatible
- Faster boot up time
- Faster builds
- Tree-shakeable
- Lazy Loading
- Smaller bundle size
- Improved debugging
Smaller bundle sizes...
- Understanding how JS code is packaged
- Making decisions on the framework level
class UserClass {
state = "...";
method1() {...}
method2() {...}
method3() {...}
}
// or?
user = ["..."];
function fn1(array) {...}
function fn2(array) {...}
function fn3(array) {...}
function fn4(array) {...}
function fn5(array) {...}
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
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...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6228277/Screen_Shot_2019-06-07_at_00.20.43.png)
ES6 will makes things better...
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 Code at a later point...
- The framework is designed with this in mind
// 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() {...}
Framework Code (lazily)
Application code (lazily)
- Code from Routes
- Components, Directives, Application Code
- Only load what you need
- Styling
- Animations
- Other modules when needed (forms, http, etc...)
Better Tooling & Builds
- Designed to load quickly
- Development mode vs production mode
# Separate Components
component_one.js
component_two.js
component_three.js
directive_one.js
directive_two.js
directive_three.js
# Better Debugging
window.ng.debugElement();
window.ng.debugStyles();
window.ng.debugClasses();
# Better Tooling
bazel build //...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6221704/bazel.png)
Improved Debugging
Build Upgrades
- Component-by-component compilation
- code shipped to NPM
- Bazel only compiles what it needs to
- Simplified callstacks
- Template-level breakpoints
- global debugging utilities
Going Forward
- Better support for Animations
- Advanced Styling
- State Management
- Improved Server-Side Rendering
- Forms
- And More...
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?
97%
Passing within Google
Coming this fall...
v9.0
![](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/6225585/Photo_20180414_124252.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6225588/IMG_20190426_184803.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6225589/IMG_20190606_142741_218.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6225587/IMG_20190606_142303.jpg)
![](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/6224750/220px-NativeScript_logo.png)
NativeScript
RxJS
Danke!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49854/images/6215414/IMG_20190316_214421_665.jpg)
Thank you everyone for attending ... Please enjoy the rest of the conference! :)
- Matias
We Are Devs - The Future of Angular
By Matias Niemelä
We Are Devs - The Future of Angular
- 514