The Business Value in an Angular Upgrade

• John Vandivier

This article focuses on communicating the business value obtained through a migration from AngularJS to Angular is on expressing the business value of this change. A socratic approach is taken by imagining a business analyst asking the following five questions:

  1. What is Angular and why do we need it?
  2. Weren't we already using AngularJS? Isn't that the same as Angular?
  3. If Angular is so much better than AngularJS, why didn't we use the former to start with?
  4. Are there alternatives to Angular? What are the comparative pros and cons?

I then have a few articles giving business or financial value measurements to latency, or site speed.

1 - What is Angular and why do we need it?

  1. Angular is a JavaScript framework. A framework is a set of libraries, plus conventions about how to use those libraries together, which serve to solve a wide set of related technical issues.
  2. Web applications leverage three programming languages in order to present an experience to an end user in the browser. Browsers obtain CSS, HTML, and JavaScript files which ultimately work together to present the whole experience. You might say, \"Doesn't my website use image files like JPEG, media files like MP3s, and so on?\" The answer is sure, but those resources are enabled by one or more of the three web languages: HTML, CSS, and JavaScript.
  3. CSS and HTML are specialized and simple. They mainly handle the way the page appears. JavaScript is general purpose and complex. It's primary purpose is to handle logical operations and dynamic handling in the browser, but it so general purpose that you can technically handle almost all of the appearance, or presentation, in JavaScript as well if you chose to.
  4. The combination of freedom and complexity in JavaScript is both powerful and dangerous. It can create knowledge and norming issues where different developers are doing things in very different ways, so it becomes hard for them to understand one another and work together to solve bugs or implement new features. Ultimately you get a lower velocity and a higher risk of defects. This is the problem that frameworks solve.

2 - Weren't we already using AngularJS? Isn't that the same as Angular?

  1. Better support for technical issues.
    1. AngularJS is reaching end of life, so formal support will end.
    2. The library is dated, so much of the online documentation is also outdated.
    3. This includes easier upgrading, in part due to better AST support.
    4. TypeScript prevents the majority of run time issues encountered during development.
  2. Better recruiting story. Developers want to work in the latest tech.
  3. Better implementation velocity.
    1. Tools create components for you with free minimal unit testing.
    2. Webpack 4 facilitates the use of a ton of build plugins.
    3. Easy third party component integration
    4. Abstract Syntax Tree (AST) Transformations are first-class citizens called schematics, and third party schematics are also easy to use. This is basically a pattern to programmatically rewrite the application, so it helps automate even major code changes.
    5. Some things which aren't part of Angular per se, but a migration efforts allows us: Refactoring to a better architecture, state management, and so on.
  4. Progressive web app support (requires next steps).
    1. Responsive applications allow you to change the application to accommodate different screen sizes.
    2. In a similar way, PWAs allow you to change the application to support differently performing client devices and network conditions, up to an including fully offline support.
  5. Performance improvements (requires next steps)
    1. The compiler is better, meaning the minified code rules are advanced to deliver even smaller payloads, supporting even more modern and complex features, built in less time.
    2. Lazy loading is a first class citizen in Angular.
    3. Complex build and loading operations like chunking and tree shaking allow clients to load the minimum resources needed for a given view, with minimal implementation complexity.
    4. Server-side rendering and static building / prerendering are implementable with official support. AngularJS required unofficial hacks.
    5. The Angular framework itself executes up to 5x faster than AngularJS. Note that this is not what we expect to see as it is attenuated by API, non-API HTTP, and third party logic. CloudFront will also do much more for a web app than this upgrade will.

3 - If Angular is so much better than AngularJS, why didn't we use the former to start with?

Angular (version 2) was released in September 2016, and it was not widely considered a good upgrade candidate until Google had conducted several non-breaking version increments by mid to late 2017.

4 - Are there alternatives to Angular? What are the comparative pros and cons?

Yes. There are tons of JavaScript frameworks, but the top 3 are typically identified as Angular, React, and Vue. Usage declines significantly even among just these top 3, and usage is a major factor of selection because it impacts the key advantages of any framework:

  1. Documentation
  2. Open source code
  3. Hiring effects

A recent Indeed job search for Vue turned up about 3500 positions, while Angular turned up about 15000. Effectively Angular and React are the go-to choices, and upgrading from AngularJS to Angular is generally much easier than upgrading from AngularJS to React, simply due to framework similarity.

Another concern about React is that it doesn't achieve the same level of standardized application solving compared to Angular. The React home page identifies React as a library for building user interfaces, rather than a framework. This leaves many segments of a typical commercial application unaddressed. Examples include state management and http request solutions.

The React ecosystem has diverse practices around these, while the Angular ecosystem has relatively strictly defined best practices on the same concerns. There are advantages to either ecosystem, but the word on the street is that Angular is a win overall for scaled commercial applications and large teams.

That's it for the four questions! Here are some articles showing the financial benefit for improved site speed metrics:

  1. Amazon Found Every 100ms of Latency Cost them 1% in Sales
  2. How Does Page Load Time Affect Your Site Revenue?