What technologies are present in the ecosystem?
The Angular team, when creating the solution for the growing complexity of web application development, decided to unite the best tools and libraries in an opinionated package with the maximum number of configurations made by default.
We then have the following libraries that make up the core of Angular.
TypeScript
TypeScript is a superset of the JavaScript language that adds type checking and other features to the language, ensuring a better developer experience and security for web development.
It has been present in Angular since its first version and is the cornerstone of the framework that enables several features such as dependency injection, typed forms and Angular’s tooling.
TypeScript is currently the preferred tool for backend development in Node.js and is encouraged by communities of other frameworks such as React and Vue.js.
RXJS
RXJS is a library that implements the reactive paradigm (https://www.reactivemanifesto.org/) in the JavaScript language.
Since the first version of Angular, reactivity was a core theme that the framework wanted to achieve and so it uses the RXJS library to help with it.
HTTP requests, routes, forms, and other Angular elements use the concepts of observables and their operators to provide Angular developers with the tools to create more fluid and dynamic applications with less boilerplate code.
RXJS also provides mechanisms for state management in a frontend application without the need to use more complex patterns such as Redux.
Karma and Jasmine
Quality should be the top priority in any application and this is especially important in frontend applications as for the user, it is the application.
One of the ways to attest to quality is through testing, and with that in mind, Angular already comes by default with the tool duo of Jasmine and Karma.
Jasmine is a framework for unit-testing JavaScript and TypeScript applications with several functions for assertion and test assembly.
Karma is the test runner, that is, the environment where the unit test setup is executed with the help of Jasmine. This environment, configured in its configuration file, runs in browsers, making the test more realistic in comparison to customers’ daily lives.
Many people in the community switch these tools for the Jest framework due to performance in the execution of the tests, which is totally fine and even facilitated by the Angular CLI; however, it should be noted that this tool does not run in a browser, which really improves the performance of the test execution but may hide some particularity that only testing in a browser would provide.
Webpack
After the development of an application, it is necessary to create the bundle to send it to production, and Webpack is the tool that the Angular team chose for this task.
Webpack is a very powerful and versatile bundler, and it is thanks to it that the framework manages to make some interesting optimizations such as tree shaking and lazy loading of bundles.
However, Webpack is complex in its configuration, and with that in mind, the Angular team has already set up and created some abstractions for fine-tuning the tool, such as the angular.json file.
We understand what pieces make up the framework and how they relate to delivering rich and fluid interfaces. We will now set up our development environment.