Fortunately for us all, a new generation of web frameworks has emerged to alleviate the recurring pains that arise when developing web applications. Angular and React are among the top contenders, but there are dozens of others such as Aurelia (https://aurelia.io), Ember (https://www.emberjs.com), Dojo (https://dojo.io), Meteor (https://www.meteor.com), and more.
Before we go any further, keep in mind that nobody has to use a framework, but there are very compelling arguments for doing so nowadays. Frameworks provide reference architectures, high-level designs, naming conventions, formatting rules, skeletons for new applications, tooling to easily scaffold new projects, components, and so much more.
Of course, there are also arguments against using frameworks, but as soon as you're part of a team, then the value they bring to the table is quickly visible. You can read an interesting argument on this subject at https://www.sitepen.com/blog/2017/11/10/web-frameworks-conclusions.
Each framework has its own peculiarities and provides more or less built-in support for certain features; for example, dependency management, dependency injection (DI), internationalization, HTTP call handling, routing/navigation, animation, and much more. Some also have varying degrees of support for PWAs, SSR, and many others.
Many of them provide ways to create and reuse user interface components and thus avoid code duplication, which increases safety and reduces maintenance costs. Many of them also support web components (https://www.webcomponents.org), which are very promising for the future of web development.
Modern web frameworks take advantage of powerful tools such as the module loaders and bundlers we discussed earlier. It slowly becomes trivial to automate the build of large/complex web applications and to create production-grade deliverables that are fully optimized. For instance, the Angular tooling (currently) uses webpack to create minified/uglified bundles and supports lazy loading and code splitting to load only parts of the application when they're accessed.
Most of these frameworks also make it much easier to test your frontend applications. For example, Angular applications can easily be unit-tested using any of the tools we've covered earlier. End-to-end tests can also be created easily using tools such as Protractor (https://www.protractortest.org).
There is also a lot of variety around what is included out of the box or supported through extensions/modules. For example, Angular is a framework that tries to come with the batteries included; it provides a lot of functionality as part of its core. React, on the other hand, is closer to a library and tries to be more minimalist.
Once again, there is value at both ends of the spectrum. Frameworks are more opinionated, which can help teams avoid wasting time making choices for many low-level details. Libraries, on the other hand, tend to be less opinionated, provide more freedom, and try to stay out of the way as much as possible. There are many shades of gray and there is no better or worse choice.
To a large extent, choosing between both depends on many factors, including personal taste, team maturity, background, skills, project budget, and timing.
Last but not least, more and more modern web frameworks support TypeScript to some extent, which, of course, brings many more benefits to the table.
Before we start our excursion into the Angular universe, we need to take a brief detour to discover TypeScript decorators. We have already mentioned and used them in Chapter 4, Leveraging Generics and Enums to Build a Media Management Web Application, but we haven't yet taken the time to understand what they actually are.