Angular to the rescue
Angular was initially released by Google in 2010, with the goal of simplifying the development of front-end web applications by bringing MVC to the client-side. Unlike jQuery, Angular was an opinionated framework rather than a library. By dictating the structure of the application using IoC (Inversion of Control), Angular prevented the spaghetti code that was so common in jQuery applications.
Angular also brought a variety of other benefits, like easy two-way data binding, and the ability to create custom elements and attributes. In 2016, a ground-up rewrite brought improvements, including a cleaner syntax, increased modularity, and TypeScript.
Why you should be using Angular
Angular has gained a lot of popularity since its release due to a variety of features that allow the developer to create complex yet maintainable web applications quickly and easily:
- Clean code, made easy. Angular is designed to encourage clean code through separation of concerns. For example, the MVC pattern allows us to separate data structures, UI behaviors, and UI templates. Similarly, Components allow us to break up the UI into reusable chunks, and Services allow us to sepaqrate logic from the UI. Finally, dependency injection allows us to bring it all together without introducing tight coupling.
- The end of manual DOM manipulation. One of Angular’s most innovative features has always been its two way data binding: any changes in the controller state are automatically updated in the view, and vice-versa. This eliminates the need for manually moving data to and from the DOM, which is usually the most error-prone part of a jQuery application.
- A wealth of built-in features. Angular comes with many built-in modules that streamline the development of some of the most common front-end features. For example, the CommonModule creates dynamic templates using directives like ngIf and ngFor, the HttpClientModule creates HTTP requests, the FormsModule creates and validates forms, the RouterModule maps different components to URLs, and RxJS uses Observables to compose asynchronous code.
- Web and desktop and mobile (oh my!) With Angular, your web app can also be a PWA (Progressive Web App), native mobile app, or a native desktop app. This allows your app to have features that regular web apps can’t, like offline access and push notifications.
- Blistering speed. Angular is built with performance in mind. Minification, bundling, tree shaking, ahead-of-time compilation, and modular dependencies are all included in the build pipeline by default. You can also add code splitting and server-side rendering with minimal effort.
- The best tooling. There are many development tools that make life as an Angular developer easier. For example, the Angular CLI allows you to easily generate, configure, run, test, lint, and build your app. If you need an editor, you can use Visual Studio Code, which has code completion, linting, error correction, and code formatting for TypeScript built in, with no extensions required. And if you are looking for a debugging tool, take a look at Augury, a Chrome Dev Tools extension for debugging and profiling Angular applications.
- Built with testing in mind. With its modularity and dependency injection, an Angular app is inherently easy to test. And if you set it up using the Angular CLI, then Karma (for unit testing) and Protractor (for end-to-end testing) will be automatically integrated, along with the corresponding test stubs.
- A perfect match for microservices. In a traditional web application, the server was responsible for rendering a page for every request. In an Angular application, pages are rendered on the client-side, so only raw data is passed between client and server rather than entire pages. This allows an Angular application to consume data from multiple microservices, without any of the services having to know how that data is being combined into a single page.
- Great community. Angular has a huge userbase. As of 2018, it has over two million downloads a week from NPM, and hundreds of thousands of questions asked and answered on Stack Overflow. If you have a question, chances are you’re not alone, and the answer is just a search away.
- There’s an app for that. With a large userbase comes a large catalog of third party libraries. Whether you’re looking for a CSS framework (Material, Bootstrap), authentication (Okta, Keycloak), or just about anything else, there’s an app for that.
- The best things in life are free. Angular, and all of the associated tools and libraries mentioned here, are free and open-source.
- Always getting better. Angular is under active development, and every new release brings new and exciting features. For example, recent versions of Angular have brought support for PWAs and a variety of tooling and performance improvements.