Why is this difference important? How does it leverage Angular’s robustness? and how does it impact the quality of your code?
Framework vs. Library
Let’s start by pointing out the major leveraging point that Angular has — it is a framework. What this means is that it is a collection of libraries, cherry-picked and coordinated in a way that works together in the most seamless manner possible. It is unified through Angular’s structural requirements, so that the libraries are imported and consumed in a way that is standardized.
Libraries, however, are the basic building blocks. They exist solely to perform a task or solve a particular problem. React is a library. jQuery is a library. Redux is a library. Angular is much more powerful because it is created to utilize the collective power of libraries rather than exist as a stand-alone piece of software.
Standardized Method For Frontend Development
So what does Angular’s standardized structure look like?
When you first boot up the barebones project, it is populated with modules. These modules use imports to link up with other modules to form a connected web. The component module allows you to tap into your service and factory layers. Services and factories are written as standalone modules or exported as libraries to be shared across different projects.
These services and factories can also be imported into the component module for consumption and remain dormant until it is called. Unused modules are not bundled into the build process, eliminating unnecessary code from the release. This automated tree shaking process is built into Angular and final bundle size limits, called budgets, can be configured in angular.json under the production section of configurations.
Setting budgets inside angular.json
How is this significant and different from stand-alone UI libraries?
Angular enforces a structure for the developer to follow. While you can combine the UI and logic into the same file, the CLI is configured to generate components and modules in a way that supports future code growth. When it comes to Angular, it’s not about the number of lines inside a file, rather it’s to do with how modular you’ve packaged each feature.
Each component can be seen as a cohesive collection of libraries, pulled together under Angular’s enforced umbrella that ensures that all the code ‘speaks’ to each other correctly. This prevents conflicts and clashes, which can lead to bugs and various potential application vulnerabilities.
Supported Cross-Platform Development
Angular was created for frontend web applications. Over the years, complementary frameworks have been developed as extensions for Angular. For example, electron is a framework that allows Angular apps to be turned into a downloadable and packaged native desktop app. For a long time native desktop applications were regulated to programming languages like C#, C++, and Java. However, Electron makes it possible to extend your knowledge of Angular into something that was once considered an exclusive space for developers.
Another cross-platform development framework that pairs nicely with Angular is Ionic. This complementary framework allows your Angular app to transform into a native mobile application that can be uploaded to the app store and downloaded by users as legitimate apps on their phones. The reusability of Angular code on multiple platforms also allows businesses to cut down on development costs and increase code reusability.
Both Electron and Ionic are open-source, with large, mature, and active communities making the task of seeking support easier and less stressful when issues arise.
Testing And Testability
When you create a project via Angular’s CLI, it comes with testing already integrated. The purpose of testing is to ensure that your application is working as expected from a data perspective. Angular uses Jasmine as its testing framework and tests are executed by Karma. Running the tests can be as easy as running the following command:
For example, here is a example of what a Jasmine testing unit can look like:
The above test syntax is easy to understand — it’s testing the cart and checks if it has items in it. The expected outcome is to be true and will throw an error if the application returns false instead.
When you run the test command, a chrome browser will open and output a “Jasmine HTML Reporter” that cycles through all the tests and updates the status as either true for a passed test, or false for a failed test.
The visual outputs of each passed and failed tests are highlighted in green and red respectively. This makes it much easier to visually scan the Chrome webpage for errors than on a console, where everything is in two-toned colors.
So how good is Angular, really?
Angular is robust enough to be employed and deployed into the production space by enterprises like YouTube, Netflix, Upwork, Lego, JetBlue, IBM, Vevo, and PayPal to name a few. While many of these organizations do not use Angular exclusively and go for a micro-frontend approach, the framework is still being used.
There’s a misconception that Angular is an all or nothing kind of framework — where you need to have your entire frontend within the framework or else it won’t work. Micro-frontend is something that is highly supported by Angular through Angular Elements. This allows for true UI modularization and allows developers to integrate packaged Angular code into other established systems without interrupting the flow.
Overall, Angular is a solid framework, transformed from the original Angular.js and its pitfalls. It is one of the reasons why Angular and Angular.js look so different from each other and can be considered as completely different frameworks. While Angular.js was originally focused on the UI, data management was something that is always secondary. In contrast, Angular brings within a highly structured way of creating code that prevents the easy spaghetti code that can occur in Angular.js.