Angular 12 is Around the Corner

Slide 1

Slide 1 text

kuncevic.dev Angular 12 is around the corner 🔥 by ALIAKSEI KUNCEVIČ talk #39 v 2.1 (10/05/2021)

Slide 2

Slide 2 text

kuncevic.dev TOC ✅ Angular ✅ Ecosystem ✅ New Features

Slide 3

Slide 3 text

kuncevic.dev ALIAKSEI KUNCEVIČ GDE | Mentor | Consultant https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic

Slide 4

Slide 4 text

kuncevic.dev @kuncevic COMMUNITY 📢 TEACHING 󰞹 🚀 PODCAST 🎙 OSS 🤓 󰞵

Slide 5

Slide 5 text

kuncevic.dev @kuncevic CREATOR 💡 Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com

Slide 6

Slide 6 text

kuncevic.dev Angular 12 is coming soon!

Slide 7

Slide 7 text

kuncevic.dev Angular vs AngularJS v2+ v1.x

Slide 8

Slide 8 text

kuncevic.dev AngularJS (v1.8) LTS ✅ January 1 — June 30, 2018 AngularJS v1.x Active Development ✅ July 1, 2018 — Dec 31, 2021 AngularJS v1.8 LTS Period

Slide 9

Slide 9 text

kuncevic.dev What is Angular?

Slide 10

Slide 10 text

kuncevic.dev What Angular is well known for? 👍 Comprehensive feature set 👍 Tooling and ecosystem 👍 Stability and support 👍 Community

Slide 11

Slide 11 text

kuncevic.dev What Angular offer? ✅ Component-based architecture ✅ Dependency injection ✅ Powerful rendering engine ✅ Reactivity powered by RxJS ✅ TypeScript is a ﬁrst class citizen ✅ Predictable release cycles ✅ Developer productivity (CLI) ✅ Best practices and recipes

Slide 12

Slide 12 text

kuncevic.dev Facts 💯 ✅ 1.8M+ angular.io hits p/m ✅ 11M+ NPM downloads p/m ✅ 200K+ answers on StackOverﬂow ✅ 661 meetup groups in 335 cities in 63 countries

Slide 13

Slide 13 text

kuncevic.dev Components Component-based Architecture

Slide 14

Slide 14 text

kuncevic.dev Angular Component A B

Slide 15

Slide 15 text

kuncevic.dev Rendering Engine (Compiler) 🤖

Slide 16

Slide 16 text

kuncevic.dev 3rd Generation Engine ✅ ViewEngine (Angular 2) ✅ ViewEngine v2 (Angular 4-8) ✅ Ivy (Angular v9+)

Slide 17

Slide 17 text

kuncevic.dev Ivy Compiler💡 Changing how Angular internals works without changing how we write the Angular apps

Slide 18

Slide 18 text

kuncevic.dev Ivy Compiler Beneﬁts ✅ Improved performance ✅ Better tree-shaking ✅ New change detection ✅ Backwards compatibility ✅ Inspecting application in browser (dev mode)

Slide 19

Slide 19 text

kuncevic.dev Ivy Compiler Pipeline💡 Template HTML Instructions DOM

Slide 20

Slide 20 text

kuncevic.dev A C B

Slide 21

Slide 21 text

kuncevic.dev Roadmap Ecosystem stability New Features Angular v12 Angular v12.x-v13

Slide 22

Slide 22 text

kuncevic.dev What is coming in v12? ✅ SASS support in Single File Components (SFC) ✅ Critical CSS and fonts inlining ✅ TypeScript strict mode by default ✅ Tailwind native Support ✅ Webpack 5 production support ✅ IE 11 depreciation ✅ Standardized errors ✅ Better template errors checking ✅ Better debugging ✅ Feature requests voting

Slide 23

Slide 23 text

kuncevic.dev angular.io/guide/roadmap

Slide 24

Slide 24 text

kuncevic.dev Angular Ecosystem 😎

Slide 25

Slide 25 text

kuncevic.dev Angular Ecosystem 😎 Platform (@angular/*) Community (OSS) +

Slide 26

Slide 26 text

kuncevic.dev Angular Platform 🚀 Labs Protractor Forms PWA Language Services Router Elements CDK Universal Karma Compiler i18n Http Material Animations CLI

Slide 27

Slide 27 text

kuncevic.dev Community 💡 Patterns Libraries Tools Style Guide

Slide 28

Slide 28 text

kuncevic.dev 20+ UI component libraries CDK Material Bootstrap Prime NG Clarity Kendo UI Ignite UI NG Lightning Wijmo Materialize Onsen UI

Slide 29

Slide 29 text

kuncevic.dev State Management NGXS NGRX Akita MobX Angular Redux Redux Observable

Slide 30

Slide 30 text

kuncevic.dev RxJS

Slide 31

Slide 31 text

kuncevic.dev Angular Release Cycles

Slide 32

Slide 32 text

kuncevic.dev Predictable, transparent & incremental evolution Version 2 September 2016 Version 4 March 2017 Version 5 November 2017 Version 6 May 2018 Version 7 October 2018 Version 8 May 2019 Version 9 Feb 2020 ... Version 12 May 2021

Slide 33

Slide 33 text

kuncevic.dev Support policy and schedule ✅ All of major releases are supported for 18 months ✅ 6 months of active support, during which regularly-scheduled updates and patches are released ✅ 12 months of long-term support (LTS), during which only critical ﬁxes and security patches are released.

Slide 34

Slide 34 text

kuncevic.dev Support policy and schedule

Slide 35

Slide 35 text

kuncevic.dev How to Keep Up with Updates? 🤔

Slide 36

Slide 36 text

kuncevic.dev Update to the latest Angular

Slide 37

Slide 37 text

kuncevic.dev ng update ng update @angular/cli @angular/core

Slide 38

Slide 38 text

kuncevic.dev ng update @angular/cli @angular/core

Slide 39

Slide 39 text

kuncevic.dev update.angular.io

Slide 40

Slide 40 text

kuncevic.dev Multiple projects? Multiple teams?

Slide 41

Slide 41 text

kuncevic.dev Scale 🚀 2 1 3

Slide 42

Slide 42 text

kuncevic.dev Enterprise Solution 💡

Slide 43

Slide 43 text

kuncevic.dev Monorepo 🧱

Slide 44

Slide 44 text

kuncevic.dev Angular CLI 🏗

Slide 45

Slide 45 text

kuncevic.dev Angular CLI 💪 ✅ Scaffolding commands ✅ ng add (setup npm package) ✅ Run unit and e2e tests ✅ Linting (eslint, codelyzer) ✅ Transpiling TypeScript ✅ Compiling LESS/SASS ✅ Dev/prod builds, code split (webpack) ✅ Tree-shaking/Miniﬁcation ✅ *Monorepo support (libs, apps)