JavaScript frameworks have recently exploded in popularity, and Angular is one of the most used. It’s not hard to see why: “Angular is what HTML would have been, had it been designed for building web apps,” according to the Angular team.
The rise of JavaScript on the web
In the early days of the web, websites were mostly static HTML. It meant that any user interaction would require a refresh of the entire page, even for the smallest changes. But in the mid-2000s, AJAX (Asynchronous JavaScript and XML) provided a better approach: a webpage could use JavaScript to send and retrieve data from a server in the background, without having to reload the page. This approach was popularized by web applications such as Gmail, which delivered a much faster and more interactive experience that its non-AJAX competitors.
As the use of JavaScript in web applications grew more and more popular, several libraries were created to help streamline common tasks like AJAX requests and DOM (Document Object Model) manipulation. The most popular of these libraries was jQuery. Today, jQuery is used on over three-quarters of the top one million websites. Despite its popularity, jQuery isn’t always the best tool for the job. As web applications get more complex, they often become tangled and difficult to maintain, especially if they are not carefully designed. This scenario is where full-fledged front-end frameworks, like Angular, can help.
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:
- Like JavaScript, but better. Since 2016, Angular has been built with TypeScript, a superset of JavaScript. In addition to the features of JavaScript, TypeScript also allows you to take advantage of static typing, as well as of all the improvements from ES6 (ECMAScript 6). You can then transpile it back to JavaScript, allowing it to run on any JavaScript engine that supports ES3 (ECMAScript 3) or above.
- 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.
With all these benefits, it’s easy to understand why JavaScript frameworks in general, and Angular in particular, have become so popular. Stay tuned for a deeper dive into implementing an Angular application.