The death of AngularJS and why you should care

Article written by Elizabeth Sanger, a software developer at Core10.

Angular Versus AngularJS

Although arguably the most popular and widely understood modern web framework, Angular can still challenge anyone attempting to keep up with its nomenclature, much less make informed business decisions around its various iterations. Even seasoned development teams can stall when determining which version to use or when to update.

For fintech leaders, however, fluency in Angular, whether AngularJS (also known as “Angular1”) or a later version, can be critical. The cornerstones of successful fintech solutions, from scalability and maintainability to industry relevance and ROI, all pertain.

The History of Angular

Google officially announced Angular 1.0 in June of 2012, after three years of beta testing and development. Its hallmark features—two-way data-binding, MVC design, and declarative HTML—were groundbreaking at the time. Developers and industry thought leaders embraced it.

Like most web frameworks, AngularJS’s biggest drawbacks only became evident with use. Chief among them was poor performance. The AngularJS digest cycle and its corresponding watchers, which monitor every data-bound element in scope for state changes, are expensive for UI’s with extensive binding and complex controller or directive logic. Although optimizing performance for an Angular1 application is certainly possible, it generally necessitates expert familiarity with the framework and can potentiate costly architectural restructurings.

Angular1’s application of programmatic versus lexical scope, and the oftentimes convoluted strategies required to manage it in code, pose similar concerns. The distinction between controllers and directives, both of which serve the logic that extends HTML, can be murky; both are prone to bloat.

As AngularJS’s popularity grew, so did industry awareness of its downfalls. Google recognized the need for a more powerful and performant solution, and by 2014, Angular 2.0 was in alpha mode. An intentionally holistic overhaul of the original, Angular2, now known simply as “Angular,” preserved Angular1’s most powerful capacities, including data-binding and declarative HTML, while radically reworking their backing architecture. Directives and controllers were replaced with modular, highly reusable components; the concept of “$scope” was eliminated; and TypeScript was introduced as the preferred development language.

Since the inception of 2.0, the Angular development team has maintained a rapid-fire release cycle, and subsequent versions, most notably 4.x and 6.x, significantly expand the framework’s depth and capacity. As pure technical innovation, Angular was—and remains—great news for the development community. But for business leaders, the transition from AngularJS to Angular can be thorny.

Key Differences

Core10’s developers work extensively with Angular in all its iterations and have compiled the following breakdown of each framework’s pros, cons, and distinguishing features to help you decide when and why to upgrade.

AngularJS

Pros:

• Well-documented: Angular differs so dramatically from its predecessor that its introduction by no means eclipsed the latter’s market prevalence. Seven years is a lifetime in development time, and the community of developers working in AngularJS has produced a robust body of discussion and documentation.

• Easy to resource: The balance is quickly shifting, but tenured front-end developers are still more likely to be proficient in AngularJS than its counterpart. Even those who haven’t worked with Angular1 are almost inevitably more familiar with JavaScript than its class-based, strongly typed superset TypeScript.

• MVC Design: A classic and enduring OOP design pattern, Model/View/Controller partitions code into intuitive, well-delineated categories that resonate with industry veterans and junior developers alike.

Cons:

• Difficult to scale: Ill-equipped to consume large quantities of bound and scoped data, Angular1 fissures with the addition of either data or logic to an existing view, and its scoping mechanisms make it difficult to modularize new features or enhancements.

• Excessively complex: MVC may be easy to understand, but the architecture of AngularJS isn’t. Mastering the distinctions between controllers, directives, factories, and services stymies many developers, and the framework’s dependency injection (DI) mechanisms are problematic. Because it’s possible to build in Angular1 without fully understanding its constitutive elements, poorly designed AngularJS applications are all too easy to produce.

• Low maintainability: AngularJS’s final major release, 1.7, dropped in 2018, and the framework entered a long-term support (LTS) period scheduled for termination in 2021. According to the development team, no breaking changes will be introduced during LTS, and 1.7.x releases will only be developed to address security flaws or JQuery or browser incompatibilities, should they emerge.

Angular:

Pros:

• Performance: Not only is Angular deliberately architected to reduce the strain on controllers by dispersing their load over minimally scoped components, it also offers AOT (ahead-of-time) compilation, an unprecedented advantage for web development. Whereas most frameworks, including Angular1, rely on JIT (just-in-time) compilation, requesting templates from the server at page load and compiling them in the browser, Angular offers developers the ability to pre-compile all scripts and templates, dramatically cutting the cost of page load.

• Growth-friendly: The challenges of scaling AngularJS applications were a primary driver for Angular’s evolution. Just as component-driven architecture improves application performance, it also makes scaling sophisticated, data-heavy solutions easier and more intuitive.

• Modernity: Angular leverages the best of contemporary web libraries and features. To note, RxJS facilitates reactive, event-based programming via Observables, which represent asynchronous data streams that run in parallel. Their inbuilt methods for filtering, querying, cancellation, and error-handling improve upon promises, the prior industry standard, and allow developers to better manage and compose clean service code. Likewise, TypeScript eliminates the hazards of loose browser evaluation and introduces features like generics for encapsulation and reusability.

• Industry relevance: By definition, fintech is disruptive, tasked with subverting and improving upon industry standards. Industry-fluent consumers recognize application frameworks, and Angular aligns with the imperative to produce cutting-edge solutions.

Cons:

• Learning curve: Shifting from MVC to component-driven design and adopting TypeScript means investing in resource acquisition or training. Moreover, the differences between AngularJS and Angular are stark enough that porting code from the original to a later version is a lengthy, complex endeavor, particularly for large, monolithic solutions.

• Option overload: The sheer volume of options and new features in Angular can be overwhelming, and development teams must discern which best address business requirements and promote a clean, maintainable code base.

• Frequent releases: Angular’s notably fast release cycle continually improves upon the framework, but this necessitates breaking changes; version 8.0, still in beta, is especially comprehensive, and adhering to the best practice of upgrading applications in tandem with their technologies requires reworking or even removing existing code.

The Takeaway

What does all this mean for fintech leaders managing Angular applications? For those with existing AngularJS solutions, if the application is relatively small, performant, and maintained by a stable and experienced development team, unless the need to scale or develop new features is pressing, ROI on an upgrade may not justify the expense.

However, if scalability, maintainability, and new feature development are salient, then transitioning to Angular makes sense. Begin porting code as soon as possible. If new feature development overlaps with the transition period, consider integrating Angular into the existing AngularJS codebase via token-sharing modules, a strategy Core10 is currently employing for a client with a monolithic AngularJS codebase.

Fintechs building new, on the other hand, must balance the challenges of resource acquisition or training against the performance advantages of adopting Angular over AngularJS. In general, though, Angular is almost always a better choice than its predecessor. If technical proficiency is at issue, consider investing in dedicated training periods or outsourcing to experts, and begin with the latest stable version (7.2.11 as of the time of this writing) to preempt the complications of breaking changes.

Those managing Angular applications built from the ground up in an earlier version of Angular (2.0 onward) must react with care to each new release, major or minor. Bug fixes and performance improvements almost always justify pulling the latest, but development teams gain much from thoroughly investigating the content and value of each release. New features don’t apply to every solution, and understanding the impact of breaking changes is crucial.

Wherever your application is positioned within the history of Angular, the framework’s ubiquity is secure. Expert in every version, Core10’s team of Angular developers can help fintechs large and small optimize one of the web’s most well-known and relevant technologies to produce elegant, user-friendly solutions that command an enduring market presence.

Angular is just one of the many frameworks Core10 is proficient in. To learn more about our tech stack, please see our Tech Radar here.