This is Angular - Speaker Deck

Slide 1

Slide 1 text

kuncevic.dev This is Angular by ALIAKSEI KUNCEVIČ talk #40 v 2.2 (24/05/2021)

Slide 2

Slide 2 text

kuncevic.dev TOC ✅ Angular introduction ✅ 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 vs AngularJS v2+ v1.x

Slide 7

Slide 7 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 8

Slide 8 text

kuncevic.dev What Angular is well known for?

Slide 9

Slide 9 text

kuncevic.dev Angular is well known for 👍 Comprehensive feature set 👍 Excellent tooling 👍 Mature ecosystem 👍 Stability and support 👍 Awesome community

Slide 10

Slide 10 text

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

Slide 11

Slide 11 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 12

Slide 12 text

kuncevic.dev Components Component-based Architecture

Slide 13

Slide 13 text

kuncevic.dev Angular Component A B

Slide 14

Slide 14 text

kuncevic.dev How Angular works? 🤖

Slide 15

Slide 15 text

kuncevic.dev A C B

Slide 16

Slide 16 text

kuncevic.dev Complexity 🤖

Slide 17

Slide 17 text

kuncevic.dev Angular 12 is here!

Slide 18

Slide 18 text

kuncevic.dev What is 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 ✅ Angular DevTools ✅ Feature requests process

Slide 19

Slide 19 text

kuncevic.dev angular.io/guide/roadmap

Slide 20

Slide 20 text

kuncevic.dev Angular Ecosystem 😎

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

kuncevic.dev Community 💡 Patterns Libraries Tools Style Guide

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

kuncevic.dev RxJS

Slide 27

Slide 27 text

kuncevic.dev Angular Release Cycles 🌀

Slide 28

Slide 28 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 29

Slide 29 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 30

Slide 30 text

kuncevic.dev Support policy and schedule

Slide 31

Slide 31 text

kuncevic.dev How to keep up with updates? 🤔

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

kuncevic.dev Update guide

Slide 35

Slide 35 text

kuncevic.dev update.angular.io

Slide 36

Slide 36 text

kuncevic.dev Tooling 🏗

Slide 37

Slide 37 text

kuncevic.dev

Slide 38

Slide 38 text

kuncevic.dev

Slide 39

Slide 39 text

kuncevic.dev Angular CLI 🚀

Slide 40

Slide 40 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)