AngularConnect, 2nd Day Keynote

@yourtwitter 2nd Day Keynote Minko Gechev twitter.com/mgechev  github.com/mgechev  blog.mgechev.com

@yourtwitter @mgechev Agenda • Web platform & standards • Automate
DX • Enable best practices • Enable extensibility • Build at scale

@mgechev

@yourtwitter @mgechev Angular Chrome Collaboration • PWAs • Web Performance
• Web Standards • Testing • Much more!

@mgechev web.dev/angular

@yourtwitter @mgechev web.dev/angular • Fast • Reliable • Installable •
Accessible

twitter.com/ mgechev

@mgechev Performance Optimizations in Angular by Mert Değirmenci How Angular
Works  by Kara Erickson

@mgechev Automating DX schematics++

@mgechev

@yourtwitter Route-level code-splitting const routes: Routes = [ { path:
'about', loadChildren: import('./about/about.module') .then(m => m.AboutModule); },  ... ];

@yourtwitter @mgechev • Define an NgModule • Declare a lazy
route • Declare a default route in the NgModule • Define a component for the default route • (Optional) Introduce a routing module Creating a lazy route

$ ng g module ranking --route ranking --module app.module Angular
CLI version 8.1

Module name $ ng g module ranking --route ranking --module
app.module Angular CLI version 8.1

Path to the lazy route $ ng g module ranking
--route ranking --module app.module Angular CLI version 8.1

Parent module $ ng g module ranking --route ranking --module
app.module Angular CLI version 8.1

@mgechev

@mgechev Intelligent Tooling schematics & constraints

@mgechev

twitter.com/mgechev Step 1: Open https://example.com/ Step 2: Determine JavaScript which
is likely to be required Step 3: Download the chunks Step 4: Store chunks in browser cache Preloading

@mgechev

@mgechev Power in Constraints by Rado Kirov

@mgechev A performance budget is a limit for pages which
the team is not allowed to exceed. Addy Osmani

@yourtwitter Performance Budgets enforces constraints to let you have guarantees
v8.0.0 angular.io/guide/build

@mgechev Component style budgets v8.2.0 github.com/angular/angular-cli/pull/15127

@mgechev Enabling Best Practices schematics & builders API

@mgechev

@mgechev Angular Collaborators Program

@mgechev Angular Collaborators Program Manfred Steyer

twitter.com/ mgechev

@mgechev Improves TTI with over 30%

@mgechev Angular projects without compression >27%

@mgechev >80% Angular projects without CDN

@mgechev ng deploy

@mgechev

@mgechev @angular/fire @azure/ng-deploy @zeit/ng-deploy angular-cli-ghpages @netlify-builder/deploy ngx-deploy-npm

@mgechev Shmuela Jacobs Cloud Developer Advocate, Microsoft

@mgechev @angular/fire @azure/ng-deploy @zeit/ng-deploy angular-cli-ghpages @netlify-builder/deploy ngx-deploy-npm

@mgechev

@mgechev Enabling Extensibility builders API

@yourtwitter @mgechev Builders API • Provides extensibility points to the
CLI • Implement a custom functionality • Introduce builder with ng-add schematic • Update angular.json • Optionally introduce custom config

@mgechev ng run app:builder

@mgechev @BenjaminDobler

@yourtwitter @mgechev • All the deployment builders • @ud-angular-builders/jest -
Jest builder • Nx tooling • ngx-build-plus - custom webpack config • @richapps/ngtron - electron support in the CLI • @richapps/ngnode - build node.js apps with the CLI • Over 60 more Other community builders

@mgechev Learn more about builders angular.io/guide/cli-builder

@mgechev Building at Scale Bazel + builders API

@mgechev Who’s using Bazel

@mgechev Bazel & Angular Layering Bazel Plugins for Node.js &
Angular Builders API & Angular CLI

Bazel 1.0.0 release this month

@mgechev Bazel & Angular Layering Bazel Plugins for Node.js &
Angular Builders API & Angular CLI

@mgechev

@mgechev youtu.be/J1lnp-nU4wM

@mgechev bazel.angular.io

@yourtwitter @mgechev • You don’t need Bazel to use Angular
• It’s worth it to understand Bazel as a software engineer • Teaches good practices • Reusable skills across technologies Should I learn Bazel?

@yourtwitter @mgechev • Moving the web platform forward • Automating
DX • Working on intelligent tooling • Enabling best practices • Building at scale Recap

@mgechev Thank you! twitter.com/mgechev  github.com/mgechev  blog.mgechev.com

AngularConnect, 2nd Day Keynote

AngularConnect, 2nd Day Keynote

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript