The Good and the Bad of Angular Development
Angular is one of the most popular software development instruments today. It was introduced by Google in 2009 and received warm commendation from the development community. According to the 2017 StackOverflow survey, 44.3 percent of software engineers now apply AngularJS and the new versions Angular 2 and 4 to create user interfaces. Let’s talk about the main features of these tools and explore their benefits and drawbacks in terms of front-end engineering.
What is AngularJS
In 2009, AngularJS’s main benefit was that it let you turn HTML-based documents into dynamic content. Before AngularJS, HTML, the web markup language, was always static meaning that users couldn’t actively interact with interfaces on the HTML pages. There were some ways to build dynamic single-page applications (SPAs) but they were too complex for convenient engineering.
AngularJS architecture reduced development effort aimed at creating dynamic content and the users received web pages with dynamic forms and elements. Let’s briefly recap the main benefits that made original AngularJS shine among other front-end development frameworks as well as describe the main drawbacks of the tool.
Pros of AngularJS
⊕ Two-way data binding. AngularJS was built with Model-View-Controller architecture. And the framework synchronized the Model and the View. As the data in the Model changes, the View does too. Two-way data binding allowed engineers to reduce development time as it didn’t require writing additional code to provide continual View and Model synchronization.
⊕ Directives. This feature actually enabled the HTML extension mentioned above. Directives allowed developers to assign special behaviors to the Document Object Model (DOM), permitting engineers to create dynamic and rich content with HTML.
⊕ Dependency injection. Dependencies define how different pieces of code interact with each other and how the changes in one component impact the other ones. Usually, dependencies are directly defined in components themselves. So that every change in dependency requires changing components as well. With AngularJS, you could use injectors that defined dependencies as external elements decoupling components from their dependencies. Dependency injection made components more reusable, easier to manage and test.
⊕ Community. Right from the beginning, AngularJS became extremely popular among engineers. A strong community provided enough training materials, discussions, and third-party tools to embark on using AngularJS as well as find a solution to nearly every arising issue.
Cons of AngularJS
Θ Performance. Dynamic applications didn’t always perform that well. Complex SPAs could be laggy and inconvenient to use due to their size.
Θ Steep learning curve. As AngularJS is a versatile instrument, there is always more than one way to complete any task. This has produced some confusion among engineers. However, the abundance of tutorials and issue discussions allowed for resolving most of the problems.
After the release of Angular 2 and then the Angular 4 update, the use of the original AngularJS 1.x slowly started to decline. While the new versions still have the same features, described in the benefits section, they were completely rebuilt in the new versions.
Story behind Angular 2 and Angular 4
In September 2016, Google released Angular 2. They rewrote the framework entirely, matching the growing requirements of the modern web. And the difference between AngularJS 1.x and the new Angular was so readical that you couldn’t just update from one to the other. To adopt the new technology, you had to rewrite your applications completely. In 2017, another major update, Angular 4, arrived. It made several significant improvements to version 2, but remains the same product in its core. To avoid terminology confusion, we will be calling the new framework simply Angular, as some community members suggest as opposed to the old AngularJS 1.x version.
Pros of Angular
Let’s have a look at the main benefits that the technology suggests to the engineering community, including the component-based architecture, mobile-oriented philosophy, performance, and some other characteristics that make Angular stand out.
⊕ Component-based architecture that provides a higher quality of code
Components can be thought of as small pieces of an interface that are independent of each other. Imagine that you have a simple application with a list of items and a corresponding search box to retrieve the items by word matches. The box with listed names, the search box, and the main sheet where the other two boxes are placed are all considered separate components in Angular.
Markesheet is a parent component to SearchBox and SearchResults that are respectively child components
While AngularJS was built mainly around the Model-View-Controller (MVC) architecture, starting from version 2 Angular is considered component-based, which is very similar to MVC but ensures higher reusability of components across the app. This allows for building UIs with many moving parts and, at the same time, streamlines the development course for engineers. What are the main benefits of such architecture?
Reusability. Components of a similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application. This is particularly useful in enterprise-scope applications where different systems converge but may have many similar elements like search boxes, date pickers, sorting lists, etc.
Readability. Encapsulation also ensures that new developers – who’ve been recently onboarded to a project – can read code better and eventually reach their plateau of productivity faster.
Unit-test friendly. The independent nature of components simplifies unit tests, quality assurance procedures aimed at verifying the performance of the smallest parts of the application, units.
Maintainability. Components that are easily decoupled from each other can be easily replaced with better implementations. Basically, your engineering team will be more efficient in maintaining and updating the code within the iterative development workflow.
⊕ TypeScript: better tooling, cleaner code, and higher scalability
Currently, TypeScript is considered the base language for Angular and the documentation is also created for TypeScript.
⊕ The platform-agnostic philosophy
Angular was developed with the mobile-first approach in mind. The idea is to share code base and ultimately the engineering skillset across web, iOS, and Android applications.
To make this ambitious positioning happen, in 2015 Angular developers cooperated with the team behind the NativeScript framework (which focuses on building close to native mobile apps). Not only the code itself, but Angular concepts such as dependency injection, data binding, services, and routing are similar both for NativeScript and Angular.
Image source: NativeScript.org
⊕ High Performance
Multiple factors can help in making your application faster. The main boost is ensured by hierarchical dependency injection and Angular Universal support.
Hierarchical dependency injection. Angular uses improved hierarchical dependency injection compared to AngularJS. The technique decouples actual components from their dependencies by running them parallel to each other. Angular builds a separate tree of dependency injectors that can be altered without reconfiguring the components. So, classes don’t have dependencies in themselves but consume them from the external source.
Every component tree has an assigned tree of injectors that contain dependencies information
The approach provides high performance scores for Angular applications. As the Angular team claims, Angular 2 was 5 times as fast as Angular 1.x, and Angular 4 may reach a 10-fold performance boost.
Angular Universal. Angular Universal is a service that allows for rendering applications view on a server instead of client browsers. Google provides a set of tools to either pre-render your application or re-render it for each request by a user. Currently, the toolset is tailored to Node.JS server-side frameworks and supports ASP.NET Core. Google claims that they are going to add support for PHP, Python, and Java.
But we recommend taking any performance claims with a grain of salt. Not only does the underlying architecture contribute to that, but also the quality of code that your engineers produce.
⊕ Google Long-Term Support
Some software engineers consider the mere fact that Angular is supported by Google a major advantage of the technology. While this may sound justified, Google itself is not enough. The good sign though is that Google announced Long-Term Support (LTS) for the technology. Igor Minar and Steven Fuin, the engineers behind Angular, confirmed this commitment in the ng-conf 2017 Keynote. They also said that it won’t be long until Angular receives yet another update and the number 5 in the end.
What this basically means is that Google plans to stick with the Angular ecosystem and further develop it, trying to hold the lead positions among front-end engineering tools.
Cons of Angular
If you’ve been following the hype and discussion around Angular 2 and 4 releases, you may know that the technology generates much criticism around it. Let’s examine the main drawbacks to also be considered.
Θ Divided and churning community
Regardless of the LTS claims, the community around any technology is what makes it powerful in the market. And the Angular community story is quite controversial. According to the 2017 StackOverflow Developer Survey, Angular (both Angular 1.x and Angular) is the second most commonly used technology in the category Frameworks, Libraries, and Other Technologies, which is cool.
But the reality is that the developers that commonly use Angular are likely to churn according to the same survey in the category the Most Loved, Dreaded, and Wanted Frameworks, Libraries and Other Technologies. Currently, React is the most loved technology with 66.9 percent of votes, and 48.3 percent of respondents are considering Angular the most dreaded technology.
This is mostly since AngularJS 1.x users are likely to churn and don’t consider transitioning to modern Angular. As you remember, you can’t directly update from the Angular 1.x.
Θ Angular is verbose and complex
The most frequent complaint that you hear from the Angular development community is the verbosity of the instrument. This problem hasn’t changed since AngularJS.
Although we’ve mentioned the component-based architecture as the major Angular benefit, the way components are managed is too complicated. For instance, you may need up to five files for a single component in Angular, have to inject dependencies, and declare the component lifecycle interfaces. Other points of concern are Angular-specific 3rd party libraries and its syntax. Consequently, much of the development time in Angular is spent doing repetitive things.
Θ Steep learning curve
Another barrier is RxJS, a reactive programming library for asynchronous programming. Learning it, at least on the basic level, is mandatory for using Angular. Engineers complain about error messages that are too cryptic to grasp without additional research followed by trial-and-error manipulations.
TypeScript, as we’ve already mentioned in the benefits section, is also a bone of contention. While TypeScript improves maintainability of code, having to learn it doesn’t make the curve gentler.
Angular is created for enterprise-scale applications
Claiming that new Angular is controversial would be too euphemistic. If you were to read different feedback posts from the development community, it’s likely that you’d stumble over complaints rather than excitement. But we aren’t that pessimistic about Angular.
The use of TypeScript for increasing the maintainability of code, the performance score that improves as you make more complex applications, and a specific ecosystem choices hint that Angular is likely to become the main instrument for long-term and heavy-investment projects where a steep learning curve is compensated for by stability and ongoing tech support.
And this is the major difference between the new Angular and ReactJS that you may also consider. The latter is easy to grasp, deploy, and start working with, but it’s definitely less versatile and maintainable than Angular.
This post is a part of our “The Good and the Bad” series. For more information about the pros and cons of the most popular technologies, see the other articles from the series: