AngularConnect, 2nd Day Keynote

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@mgechev

Slide 4

Slide 4 text

@mgechev

Slide 5

Slide 5 text

@mgechev

Slide 6

Slide 6 text

@mgechev

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@mgechev web.dev/angular

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

twitter.com/ mgechev

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

@mgechev Automating DX schematics++

Slide 13

Slide 13 text

@mgechev

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@mgechev

Slide 21

Slide 21 text

@mgechev

Slide 22

Slide 22 text

@mgechev

Slide 23

Slide 23 text

@mgechev

Slide 24

Slide 24 text

@mgechev

Slide 25

Slide 25 text

@mgechev

Slide 26

Slide 26 text

@mgechev Intelligent Tooling schematics & constraints

Slide 27

Slide 27 text

@mgechev

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

@mgechev

Slide 30

Slide 30 text

@mgechev

Slide 31

Slide 31 text

@mgechev

Slide 32

Slide 32 text

@mgechev

Slide 33

Slide 33 text

@mgechev

Slide 34

Slide 34 text

@mgechev

Slide 35

Slide 35 text

@mgechev

Slide 36

Slide 36 text

@mgechev

Slide 37

Slide 37 text

@mgechev

Slide 38

Slide 38 text

@mgechev

Slide 39

Slide 39 text

@mgechev

Slide 40

Slide 40 text

@mgechev Power in Constraints by Rado Kirov

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@mgechev Enabling Best Practices schematics & builders API

Slide 45

Slide 45 text

@mgechev

Slide 46

Slide 46 text

@mgechev

Slide 47

Slide 47 text

@mgechev Angular Collaborators Program

Slide 48

Slide 48 text

@mgechev Angular Collaborators Program Manfred Steyer

Slide 49

Slide 49 text

twitter.com/ mgechev

Slide 50

Slide 50 text

@mgechev Improves TTI with over 30%

Slide 51

Slide 51 text

@mgechev Angular projects without compression >27%

Slide 52

Slide 52 text

@mgechev >80% Angular projects without CDN

Slide 53

Slide 53 text

@mgechev ng deploy

Slide 54

Slide 54 text

@mgechev

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@mgechev Shmuela Jacobs Cloud Developer Advocate, Microsoft

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

@mgechev

Slide 59

Slide 59 text

@mgechev Enabling Extensibility builders API

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

@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

Slide 62

Slide 62 text

@mgechev ng run app:builder

Slide 63

Slide 63 text

@mgechev @BenjaminDobler

Slide 64

Slide 64 text

@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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

@mgechev Building at Scale Bazel + builders API

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

@mgechev Who’s using Bazel

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Bazel 1.0.0 release this month

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

@mgechev

Slide 76

Slide 76 text

@mgechev

Slide 77

Slide 77 text

@mgechev youtu.be/J1lnp-nU4wM

Slide 78

Slide 78 text

@mgechev bazel.angular.io

Slide 79

Slide 79 text

@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?

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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