Discovering Angular, Angular Material, and RxJS

In the first half of this book, we covered the crucial aspects of TypeScript, from its powerful type system to its support for modules. Even if you haven't realized it yet, you've actually learned the most important parts of TypeScript already! With that done, we can finally step up our game and start having fun with the language.

We still have a ton to learn together, though, but isn't that where all the fun is?

In the previous chapters, we didn't put a lot of effort into our user interfaces (to say the least). Of course, it wasn't our main focus, but we have to face the truth—it would be hard to reach an acceptable level of quality without having enough CSS experience. Notably, we didn't have any reusable user interface components at our disposal, nor the time to create our own.

The fact is that you'll rarely have the opportunity to dedicate a lot of time to the creation of basic user interface components for real-world projects. To make matters worse, given that we live in a mobile world, our applications are supposed to function/render nicely on a wide variety of devices and displays. Supporting this growingly complex ecosystem is insanely difficult.

Moreover, we have seen how tedious it was for us to get data in and out of the Document Object Model (DOM) by hand. Even if TypeScript offers an easy-to-use API to query it and make changes, we ended up writing a lot of code just to add or remove elements. If you multiply this hindrance tenfold, then you can imagine how cumbersome and error-prone it quickly becomes.

Finally, structuring our application has also proved to be challenging. Modules have helped us to improve code organization, but it remains for us to stay consistent in maintaining a well-structured code base.

The conclusion is obvious—we need help to make things easier, better structured, better-looking, and more efficient!

The good news is that we are not alone. Tens of thousands of organizations and developers worldwide face the same challenges. Luckily for us, we can stand on the shoulders of giants who have spent many man-years developing world-class solutions that are available for free under open source licenses.

The net result is that, in today's ecosystem, there are literally thousands of libraries and frameworks that we can pick and choose from to develop modern web applications.

In this book, we have chosen to present three different solutions: Angular (https://angular.io), React (https://reactjs.org), and Vue.js (https://vuejs.org), which are all tremendously popular nowadays. This is an arbitrary selection, of course, simply based on our own experience and the current trends in our industry.

Sadly, we won't be able to do much more than scratch the surface here. Entire books have been written on each of those powerful solutions and we simply don't have enough space to go into them in depth. Still, we intend to present enough for you to gain a clear idea about what they are and how they work so that you can make up your mind about which one you like the most.

In this chapter, we will first take a look at what modern web applications actually are. Then, we'll begin our overview with the Angular framework (https://angular.io) and the Angular Material (https://material.angular.io) user interface component library, which implements the Material Design specification (https://material.io/design).

We will explore how they can be combined with TypeScript, and we'll continue to introduce you to additional TypeScript features.

We will also discover Reactive Programming (RP) and RxJS (https://rxjs-dev.firebaseapp.com), which are heavily used with Angular but can be applied in many situations, frameworks, and even technology stacks (for example, Java, .NET, and more).

To sum it up, we will cover the following topics in this chapter: