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

This is Angular

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

Aliaksei Kuncevič

May 25, 2021
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  12. kuncevic.dev
    Components
    Component-based Architecture

    View full-size slide

  13. kuncevic.dev
    Angular Component
    A
    B

    View full-size slide

  14. kuncevic.dev
    How Angular works? 🤖

    View full-size slide

  15. kuncevic.dev
    A
    C
    B

    View full-size slide

  16. kuncevic.dev
    Complexity 🤖

    View full-size slide

  17. kuncevic.dev
    Angular 12 is here!

    View full-size 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 full-size slide

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

    View full-size slide

  20. kuncevic.dev
    Angular Ecosystem 😎

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  26. kuncevic.dev
    RxJS

    View full-size slide

  27. kuncevic.dev
    Angular Release Cycles 🌀

    View full-size 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 full-size 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 full-size slide

  30. kuncevic.dev
    Support policy and schedule

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. kuncevic.dev
    Update guide

    View full-size slide

  35. kuncevic.dev
    update.angular.io

    View full-size slide

  36. kuncevic.dev
    Tooling 🏗

    View full-size slide

  37. kuncevic.dev

    View full-size slide

  38. kuncevic.dev

    View full-size slide

  39. kuncevic.dev
    Angular CLI 🚀

    View full-size 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 full-size slide

  41. kuncevic.dev
    Multiple projects?
    Multiple teams?

    View full-size slide

  42. kuncevic.dev
    Scale 🚀
    2
    1 3

    View full-size slide

  43. kuncevic.dev
    Enterprise Solution 💡

    View full-size slide

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

    View full-size slide

  45. kuncevic.dev
    Th nk you!
    @kuncevic

    View full-size slide

  46. kuncevic.dev
    NY
    QUESTIONS?
    @kuncevic

    View full-size slide