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

Aliaksei Kuncevič

May 10, 2021
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

Transcript

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

    View Slide

  2. kuncevic.dev
    TOC
    ✅ Angular
    ✅ Ecosystem
    ✅ New Features

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. kuncevic.dev
    Angular 12 is coming soon!

    View Slide

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

    View Slide

  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

    View Slide

  9. kuncevic.dev
    What is Angular?

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  13. kuncevic.dev
    Components
    Component-based Architecture

    View Slide

  14. kuncevic.dev
    Angular Component
    A
    B

    View Slide

  15. kuncevic.dev
    Rendering Engine (Compiler) 🤖

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. kuncevic.dev
    Ivy Compiler Pipeline💡
    Template HTML Instructions DOM

    View Slide

  20. kuncevic.dev
    A
    C
    B

    View Slide

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

    View Slide

  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

    View Slide

  23. kuncevic.dev
    angular.io/guide/roadmap

    View Slide

  24. kuncevic.dev
    Angular Ecosystem 😎

    View Slide

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

    View Slide

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

    View Slide

  27. kuncevic.dev
    Community 💡
    Patterns Libraries Tools
    Style
    Guide

    View Slide

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

    View Slide

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

    View Slide

  30. kuncevic.dev
    RxJS

    View Slide

  31. kuncevic.dev
    Angular Release Cycles

    View Slide

  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

    View Slide

  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.

    View Slide

  34. kuncevic.dev
    Support policy and schedule

    View Slide

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

    View Slide

  36. kuncevic.dev
    Update to the latest Angular

    View Slide

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

    View Slide

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

    View Slide

  39. kuncevic.dev
    update.angular.io

    View Slide

  40. kuncevic.dev
    Multiple projects?
    Multiple teams?

    View Slide

  41. kuncevic.dev
    Scale 🚀
    2
    1 3

    View Slide

  42. kuncevic.dev
    Enterprise Solution 💡

    View Slide

  43. kuncevic.dev
    Monorepo 🧱

    View Slide

  44. kuncevic.dev
    Angular CLI 🏗

    View Slide

  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)

    View Slide

  46. kuncevic.dev
    Th nk you!
    @kuncevic

    View Slide

  47. kuncevic.dev
    👀 frontendwatch.com

    View Slide

  48. kuncevic.dev
    🎙 angularrocks.com

    View Slide

  49. kuncevic.dev
    NY
    QUESTIONS?
    @kuncevic

    View Slide