Angular 12 in Depth

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Protractor

    E2E test framework for Angular apps

  • As explained in the announcement, back in 2013 when Protractor was created, WebDriver was not a standard, and end-to-end (e2e) tests were hard to write, and a nightmare to maintain. Protractor brought an innovative solution by wrapping selenium-webdriver, and provided a way to control the execution flow.

  • Angular

    Deliver web apps with confidence 🚀

  • At this point, library authors can still rely on View Engine thanks to ngcc (the compatibility compiler of Angular), but it's really time for them to evaluate whether they can migrate their libraries to Ivy or not. A few weeks ago, Minko Gechev has published an article to explain that in detail. Also, check out the related RFC.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • Improvements for uncalled function checks: TypeScript can now detect more cases where functions aren't being called. For instance when writing foo instead of foo(). More details and examples can be found here.

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  • If you haven't looked at Webpack 5, you're going to be amazed. Webpack 5 was released back in October 2020, so it's quite stable by now. Webpack is currently at version 5.37 (released a few days ago).

  • Cypress

    Fast, easy and reliable testing for anything that runs in a browser.

  • Of course, a lot of things have evolved since then. We now have the WebDriver API, async and await (even top-level await, woah). Also, the ecosystem has also evolved. Solutions like Cypress, Playwright, Puppeteer have gained a lot of (well-deserved) popularity. Tools like Cypress for example provide a much better developer experience than Protractor, leverage the modern standards, and even support cross-browser testing (among other powerful capabilities). Another benefit of the current de-facto e2e testing tools is that they're framework-agnostic, which is very valuable.

  • WebdriverIO

    Next-gen browser and mobile automation test framework for Node.js

  • As of Angular 12, Protractor won't be included by default in new projects. Instead, the Angular CLI will provide options to use other solutions like Cypress, WebdriverIO, or TestCafe. This means that the ng e2e command should continue to be supported in the future.

  • TestCafe

    A Node.js tool to automate end-to-end web testing.

  • As of Angular 12, Protractor won't be included by default in new projects. Instead, the Angular CLI will provide options to use other solutions like Cypress, WebdriverIO, or TestCafe. This means that the ng e2e command should continue to be supported in the future.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • Tailwind is now officially supported by Angular. Actually, support was introduced in the Angular CLI in v11.2.

  • puppeteer

    Node.js API for Chrome

  • Of course, a lot of things have evolved since then. We now have the WebDriver API, async and await (even top-level await, woah). Also, the ecosystem has also evolved. Solutions like Cypress, Playwright, Puppeteer have gained a lot of (well-deserved) popularity. Tools like Cypress for example provide a much better developer experience than Protractor, leverage the modern standards, and even support cross-browser testing (among other powerful capabilities). Another benefit of the current de-facto e2e testing tools is that they're framework-agnostic, which is very valuable.

  • Playwright

    Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

  • Of course, a lot of things have evolved since then. We now have the WebDriver API, async and await (even top-level await, woah). Also, the ecosystem has also evolved. Solutions like Cypress, Playwright, Puppeteer have gained a lot of (well-deserved) popularity. Tools like Cypress for example provide a much better developer experience than Protractor, leverage the modern standards, and even support cross-browser testing (among other powerful capabilities). Another benefit of the current de-facto e2e testing tools is that they're framework-agnostic, which is very valuable.

  • nx

    Smart Monorepos · Fast CI

  • Anyways; give Cypress a try if you haven't already, you won't be disappointed! By the way, I keep recommending everyone to start using Nrwl NX, a wonderful solution that includes support for Angular, React, Next.js, Cypress, and a lot more ;-)

  • components

    Component infrastructure and Material Design components for Angular

  • You can find more information about these changes in the new theming guide: https://github.com/angular/components/blob/master/guides/theming.md. In addition, note that the guides on https://material.angular.io have been rewritten to showcase the new API, and include explanations.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts