This is Angular

The Angular v12 was just released.

Here I am talking about the modern Angular. The list of things I am covering in this presentation:

Quick introduction to Angular
Angular feature set
Angular tooling
Angular ecosystem
Stability and support
Awesome community

Transcript

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

   View Slide

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

   View Slide

7. 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

8. kuncevic.dev
   What Angular is well known for?
   

   View Slide

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

   View Slide

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

    View Slide

11. 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

12. kuncevic.dev
    Components
    Component-based Architecture
    

    View Slide

13. kuncevic.dev
    Angular Component
    A
    B
    

    View Slide

14. kuncevic.dev
    How Angular works? 🤖
    

    View Slide

15. kuncevic.dev
    A
    C
    B
    

    View Slide

16. kuncevic.dev
    Complexity 🤖
    

    View Slide

17. kuncevic.dev
    Angular 12 is here!
    

    View Slide

18. 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
    

    View Slide

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

    View Slide

20. kuncevic.dev
    Angular Ecosystem 😎
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. kuncevic.dev
    RxJS
    

    View Slide

27. kuncevic.dev
    Angular Release Cycles 🌀
    

    View Slide

28. 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

29. 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

30. kuncevic.dev
    Support policy and schedule
    

    View Slide

31. kuncevic.dev
    How to keep up with updates? 🤔
    

    View Slide

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

    View Slide

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

    View Slide

34. kuncevic.dev
    Update guide
    

    View Slide

35. kuncevic.dev
    update.angular.io
    

    View Slide

36. kuncevic.dev
    Tooling 🏗
    

    View Slide

37. kuncevic.dev
    

    View Slide

38. kuncevic.dev
    

    View Slide

39. kuncevic.dev
    Angular CLI 🚀
    

    View Slide

40. 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

41. kuncevic.dev
    Multiple projects?
    Multiple teams?
    

    View Slide

42. kuncevic.dev
    Scale 🚀
    2
    1 3
    

    View Slide

43. kuncevic.dev
    Enterprise Solution 💡
    

    View Slide

44. kuncevic.dev
    👀 frontendwatch.com
    🎙 angularrocks.com
    📧 kuncevic.dev
    

    View Slide

45. kuncevic.dev
    Th nk you!
    @kuncevic
    

    View Slide

46. kuncevic.dev
    NY
    QUESTIONS?
    @kuncevic
    

    View Slide