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

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