An Upgrade Path to Angular at Thomson Reuters

Stephen Fluin: This is a guest post from David Owen, who is a leader of front-end strategy at Thomson Reuters

In the Tax & Accounting division of Thomson Reuters, we build software products for corporations, governments, accounting firms, financial institutions and more. We have a significant investment in AngularJS and Angular, and believe that migrating to the latest version is key to delivering the next generation of these products.

Upgrading to Angular

When looking at options for upgrading our existing projects to Angular, equal measure is given to both the Hybrid pattern (via ngUpgrade) and a phased approach to a full rewrite. Teams need to understand the implications of each approach so that they can choose the best option for their product.

ng-rosetta

To help teams understand these patterns, we built a series of reference projects known as ng-rosetta.

https://github.com/thomsonreuters/FEF/tree/master/ng-rosetta

This series was published internally as a living example of Angular migration patterns and is regularly updated as new versions and patterns evolve. The series is regularly presented and referenced during upgrade strategy discussions and has been included in training material available to our Front-end Framework Community.

Projects Contained in ng-rosetta

To summarize, we have a starting project (Fruit1X, for Angular 1.x), that uses older patterns (ControllerAs, Grunt, etc). The rest of the sample projects demonstrate how that application looks after conversion to the target pattern. Fruit15 (for Angular 1.5) shows the Fruit app converted to the AngularJS Component Pattern and implements newer tooling (Webpack, and npm delivery). Fruit20–15 (for Angular/AngularJS 1.5) shows the Hybrid Pattern, with application hosted in an Angular shell via ngUpgrade along with various build and test tools upgraded to modern equivalents. Lastly Fruit20 shows a full Angular rewrite of the project.

Here is a breakdown of each project, it’s target pattern, and the various tools and patterns used.

Project Name: Fruit1X

• Angular Pattern - AngularJS ControllerAs Pattern
• Notable Tools & Patterns - Grunt, TypeScript1 w/Typings, TSLint, ui-grid, & ui-router, bootstrap, ui-bootstrap. i18n via angular-translate. 3rd party dependencies delivered via Bower.

Project Name: Fruit15

• Angular Pattern - AngularJS Component Pattern
• Notable Tools & Patterns - Webpack2, TypeScript2, ui-grid, & ui-router, bootstrap & ui-bootstrap. i18n via angular-translate. Karma Unit Tests written in TypeScript and run via Webpack. 3rd party dependencies delivered via npm.

Project Name: Fruit20–15

• Angular Pattern - Angular/AngularJS Hybrid Patter (ngUpgrade + AngularJS Component Pattern App hosted inside an Angular app)
• Notable Tools & Patterns - Fruit15 Patterns plus ng-upgrade.downgradeComonent example & Angular Ahead-of-Time (AOT) Compilation for Angular modules & components.

Project Name: Fruit20

• Angular Pattern - Full Angular Rewrite
• Notable Tools & Patterns - WebPack 2, TypeScript 2, TSLint + Codelyzer, ngRouter (with Lazy Loaded Module example) & Angular Ahead-of-Time (AOT) Compilation. Karma Unit Tests written in TypeScript and run via Webpack.

How we built ng-rosetta

Some of the patterns written were identified using the Angular product documentation (specifically Upgrading from AngularJS & Webpack: An Introduction) in combination with ng-book2. Many other patterns were consumed from dozens of various StackOverflow postings, open source examples on GitHub and other blogs. (To all the open source developers, bloggers and StackOverflow community members that all offered just the right nugget or, in some cases, boulder of information, we’d like to express our thanks and gratitude.) Still other patterns simply needed to be experimented with and massaged to unlock.

Open sourcing ng-rosetta

As a means to give back to the open source community, and in hopes of providing reference material to the next round of developers that need to explore these scenarios, I’ve published the entire ng-rosetta series here: https://github.com/thomsonreuters/FEF/tree/master/ng-rosetta. Our hope is that by sharing this collection of patterns, we can collaborate with the open source community to include evolving best practices and new developments.

Thanks very much to the Angular community for providing a great way to learn cutting edge tools and techniques, and to the Angular Team for giving us all a truly great coding framework.

David Owen - Software Architect, Emerging Technologies - Thomson Reuters, Tax & Accounting

P.S. Additional background on how we organize and manage our efforts

We own and maintain approximately 80 products, many of which were built before modern front-end patterns and tools were available. Many of these products were also built by geographically disparate teams using myriad technologies. As you can imagine, applying standardization to this ecosystem comes with many challenges. In the scenario described here, our challenge was to provide our products with a unified look & feel and a migration path to the Modern Web.

In 2013, we formalized the decision to standardize our products on AngularJS and created an internal group called the Front-end Framework to govern the process. Today, nearly 500 developers participate in the Front-end Framework Community, which is dedicated to the selection and propagation of front-end architecture, tools and patterns.

Aside from the community, the Front-end Framework group also provides guidance, strategy and training on various front-end tools (e.g. AngularJS, TypeScript, Webpack, etc.) as well as governance over our internally-developed shared tools & libraries. One example of these shared tools is an AngularJS Seed Project that demonstrates recommended patterns such as the AngularJS Component pattern, the use of hierarchical routes via ui-router and patterns for front-end tests & builds. Another example is our internally developed UI toolkit, which was built to standardize the look & feel of our applications.