Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 12 is Around the Corner

Angular 12 is Around the Corner

This talk is about what happend in the Angular ecosystem for last couple of years, how did Angular and Angular ecosystem evolved and what planned for Angular v12

Bf3acef686273e03fa4fdf125fdad3e9?s=128

Aliaksei Kuncevič

May 10, 2021
Tweet

Transcript

  1. kuncevic.dev Angular 12 is around the corner 🔥 by ALIAKSEI

    KUNCEVIČ talk #39 v 2.1 (10/05/2021)
  2. kuncevic.dev TOC ✅ Angular ✅ Ecosystem ✅ New Features

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

    https://linkedin.com/in/kuncevic
  4. kuncevic.dev @kuncevic COMMUNITY 📢 TEACHING 󰞹 🚀 PODCAST 🎙 OSS

    🤓 󰞵
  5. kuncevic.dev @kuncevic CREATOR 💡 Aurelia vs React vs Vue vs

    Svelte vs Ember vs Elm vs Angular frontendwatch.com
  6. kuncevic.dev Angular 12 is coming soon!

  7. kuncevic.dev Angular vs AngularJS v2+ v1.x

  8. 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
  9. kuncevic.dev What is Angular?

  10. kuncevic.dev What Angular is well known for? 👍 Comprehensive feature

    set 👍 Tooling and ecosystem 👍 Stability and support 👍 Community
  11. kuncevic.dev What Angular offer? ✅ Component-based architecture ✅ Dependency injection

    ✅ Powerful rendering engine ✅ Reactivity powered by RxJS ✅ TypeScript is a first class citizen ✅ Predictable release cycles ✅ Developer productivity (CLI) ✅ Best practices and recipes
  12. kuncevic.dev Facts 💯 ✅ 1.8M+ angular.io hits p/m ✅ 11M+

    NPM downloads p/m ✅ 200K+ answers on StackOverflow ✅ 661 meetup groups in 335 cities in 63 countries
  13. kuncevic.dev Components Component-based Architecture

  14. kuncevic.dev Angular Component A B

  15. kuncevic.dev Rendering Engine (Compiler) 🤖

  16. kuncevic.dev 3rd Generation Engine ✅ ViewEngine (Angular 2) ✅ ViewEngine

    v2 (Angular 4-8) ✅ Ivy (Angular v9+)
  17. kuncevic.dev Ivy Compiler💡 Changing how Angular internals works without changing

    how we write the Angular apps
  18. kuncevic.dev Ivy Compiler Benefits ✅ Improved performance ✅ Better tree-shaking

    ✅ New change detection ✅ Backwards compatibility ✅ Inspecting application in browser (dev mode)
  19. kuncevic.dev Ivy Compiler Pipeline💡 Template HTML Instructions DOM

  20. kuncevic.dev A C B

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

  22. 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
  23. kuncevic.dev angular.io/guide/roadmap

  24. kuncevic.dev Angular Ecosystem 😎

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

  26. kuncevic.dev Angular Platform 🚀 Labs Protractor Forms PWA Language Services

    Router Elements CDK Universal Karma Compiler i18n Http Material Animations CLI
  27. kuncevic.dev Community 💡 Patterns Libraries Tools Style Guide

  28. kuncevic.dev 20+ UI component libraries CDK Material Bootstrap Prime NG

    Clarity Kendo UI Ignite UI NG Lightning Wijmo Materialize Onsen UI
  29. kuncevic.dev State Management NGXS NGRX Akita MobX Angular Redux Redux

    Observable
  30. kuncevic.dev RxJS

  31. kuncevic.dev Angular Release Cycles

  32. 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
  33. 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 fixes and security patches are released.
  34. kuncevic.dev Support policy and schedule

  35. kuncevic.dev How to Keep Up with Updates? 🤔

  36. kuncevic.dev Update to the latest Angular

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

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

  39. kuncevic.dev update.angular.io

  40. kuncevic.dev Multiple projects? Multiple teams?

  41. kuncevic.dev Scale 🚀 2 1 3

  42. kuncevic.dev Enterprise Solution 💡

  43. kuncevic.dev Monorepo 🧱

  44. kuncevic.dev Angular CLI 🏗

  45. 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/Minification ✅ *Monorepo support (libs, apps)
  46. kuncevic.dev Th nk you! @kuncevic

  47. kuncevic.dev 👀 frontendwatch.com

  48. kuncevic.dev 🎙 angularrocks.com

  49. kuncevic.dev NY QUESTIONS? @kuncevic