What's New, What's Next in Angular?

Slide 1

Slide 1 text

What's New, What's Next in Angular? Siwat Kaolueng https://perjerz.me

Slide 2

Slide 2 text

Siwat Kaolueng (Jame) Independent Web & Angular Consultant - Organize Angular Thailand

Slide 3

Slide 3 text

What you will learn - Overview - What’s new? - What’s next? - Deprecations

Slide 4

Slide 4 text

Overview

Slide 5

Slide 5 text

4th year anniversary https://twitter.com/angular/status/1305565655811457024

Slide 6

Slide 6 text

billions Billion user apps Enterprise apps Small-medium apps Demos Edu apps Number of users 0 Number of apps millions Angular Ivy (planned for v9) ng-conf 2019 Day 1 Keynote - https://youtu.be/JX5GGu_7JKc?t=41

Slide 7

Slide 7 text

Metrics User Experience (UX) Developer Experience (DX) Performance Learning Curve Runtime Load Time Maintainability Deliverability

Slide 8

Slide 8 text

Opinionated vs Unopinionated https://awesomeopensource.com/project/sulco/angular-developer-roadmap https://roadmap.sh/react

Slide 9

Slide 9 text

SOFTWARE BELOW THE POVERTY LINE https://staltz.com/software-below-the-poverty-line.html

Slide 10

Slide 10 text

Angular Overview Angular Protractor Forms PWA Augury Language Services Router Elements CDK Universal Karma Labs Compiler i18n Http Material Animations CLI

Slide 11

Slide 11 text

2600+ Angular Projects @ Google ng-conf enterprise 2020 - https://www.youtube.com/watch?v=FsNTuzBfLxU Google use Angular

Slide 12

Slide 12 text

Who use Angular? more...

Slide 13

Slide 13 text

Who use Angular in Thailand? more...

Slide 14

Slide 14 text

What’s new?

Slide 15

Slide 15 text

TypeScript@4.0 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html

Slide 16

Slide 16 text

Angular CLI

Slide 17

Slide 17 text

ngcc 2–4x faster Faster compilation with TypeScript 4.0

Slide 18

Slide 18 text

https://twitter.com/manekinekko/status/1327733156838043648/photo/1

Slide 19

Slide 19 text

Easy logs and reports

Slide 20

Slide 20 text

Linting

Slide 21

Slide 21 text

https://github.com/palantir/tslint/issues/4534

Slide 22

Slide 22 text

https://github.com/angular/angular-cli/issues/13732#issuecomment-719724640

Slide 23

Slide 23 text

Hot Module Replacement (HMR)

Slide 24

Slide 24 text

Hot Module Replacement (HMR)

Slide 25

Slide 25 text

https://medium.com/echohub/implementation-of-hmr-hot-module-replacement-to-angular-project-f7bca523bd16

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Trusted Type https://web.dev/trusted-types/

Slide 28

Slide 28 text

https://github.com/angular/angular/pull/39222

Slide 29

Slide 29 text

Remove support IE9/IE10 & IE mobile Support IE11 only

Slide 30

Slide 30 text

What’s next in Angular?

Slide 31

Slide 31 text

Angular Dev Tools

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Experimental Webpack 5 Support

Slide 34

Slide 34 text

Module Federation

Slide 35

Slide 35 text

https://github.com/angular-architects/module-federation-plugin/blob/main/packages/mf/README.md

Slide 36

Slide 36 text

Strictly typed reactive forms

Slide 37

Slide 37 text

https://github.com/angular/angular/pull/38406

Slide 38

Slide 38 text

Optional NgModules https://github.com/angular/angular/issues/37904#issuecomment-731351748

Slide 39

Slide 39 text

Zoneless https://github.com/angular/angular/issues/38782 https://github.com/angular/angular/issues/31730

Slide 40

Slide 40 text

Deprecations https://angular.io/guide/deprecations

Slide 41

Slide 41 text

- Rename async to waitForAsync - loadChildren string syntax - ngModel with reactive forms - ViewEncapsulation.Native - entryComponents & ANALYZE_FOR_ENTRY_COMPONENTS - preserveQueryParams replace with queryParamsHandling - esm5 and fesm5 entry-points in @angular/* npm packages - /deep/, >>>, and ::ng-deep - @angular/bazel - ... https://angular.io/guide/deprecations

Slide 42

Slide 42 text

https://angular.io/api/core/testing/waitForAsync DEPRECATED USE

Slide 43

Slide 43 text

https://angular.io/guide/deprecations#ngmodel-with-reactive-forms DEPRECATED USE

Slide 44

Slide 44 text

https://angular.io/guide/deprecations#ngmodel-with-reactive-forms DEPRECATED USE USE

Slide 45

Slide 45 text

https://angular.io/api/core/ViewEncapsulation DEPRECATED USE

Slide 46

Slide 46 text

https://angular.io/guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required DEPRECATED

Slide 47

Slide 47 text

https://angular.io/guide/deprecations#deep-component-style-selector DEPRECATED DEPRECATED DEPRECATED

Slide 48

Slide 48 text

https://angular.io/guide/deprecations#bazel-builder-and-schematics

Slide 49

Slide 49 text

https://update.angular.io/

Slide 50

Slide 50 text

discord.gg/angular Angular Thailand Angular Developers Thailand

Slide 51

Slide 51 text

Contact me fb.me/siwat.kaolueng https://bit.ly/35pwuN6 Slide siwat.kaolueng@gmail.com