Improving Performance and Reducing Time-To-Market for Core Products

Overview

This Dot Labs was hired by a client to bring existing open-source performance benchmarks for React and Apollo Client from JavaScript and Typescript, to the client’s internally used programming language. These tools are intended to improve the user experience of the client’s flagship product by ensuring performance regressions are not introduced to the product and data requests can be quicker and cached by the client.

Services Provided

This Dot Labs created tooling to automate the conversion of JavaScript and Typescript to the client’s internally used language to help expedite the, typically, manual process thus reducing conversion time by 60% per library. The tool is capable of porting ~80% of upstream source JavaScript and TypeScript to the target language successfully, thus accelerating future maintenance and translation efforts.

This tool was then used to convert a set of upstream benchmarks for React to be run against the client’s React implementation to identify performance bottlenecks in either the React implementation or the underlying rendering engine. The team then set up continuous integration using GitHub Actions to test changes to the library on each pull request commit, report results to the pull request, and fail the build if a performance regression was detected.

Additionally, we converted Apollo Client to the client’s target language with its upstream tests and benchmarks without a loss to the library’s performance. This enables the client’s user interface to leverage the benefits of a GraphQL API and introduces the first caching system for server fetched data.

Tech-stack

Babel

GitHub Actions

Apollo

• This Dot leveraged its in-house language expertise to build a unique set of tooling: accelerating and automating high-fidelity conversion of typed Javascript to the client’s internally used language.
• The automated conversion was test-driven with a conformance suite developed in conjunction by the client and This Dot engineers. Through diligence and exercise, this conformance suite grew to thousands of lines of JavaScript and the client’s utilized language, capturing the unique, idiomatic strengths and “corners” of each language.
• This Dot Labs collaborated with the language engineers to automate idiomatic translation between the source and target languages and, in some cases, optimize them for the utilized virtual machine.
• The team would then handle conversion exceptions by-hand and capture the issues to improve the automated tooling while ensuring the project remained on-track and under-budget. Quality was pinned through a comprehensive test suite (part of the porting exercise), and work was considered “complete” once automated tests passed.
• The team used a combination of unit testing frameworks to run existing upstream tests and ensure the accuracy of test results.
• Once the project was in the target language, the team configured the performance suite to run via Github actions against the custom React framework implementation, automatically, on every pull request commit. The client’s engineers now have unprecedented visibility into each change from a quality and performance perspective. This insight spans multiple internal teams for the client, and serves as a technical backstop in their quality and delight promise to their end-users