Improving Performance and Reducing Time-To-Market for Core Products
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.
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
This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.
We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.
Uplifting Manual Conversion Efforts
To best support manual conversion efforts, This Dot Labs performed a gradual conversion. This allowed its developers to convert parts of the code while still outputting the original code as a comment, in case that specific expression or statement type wasn’t available at any point in the conversion process.
This strategy allowed developers overseeing the automated conversion process to work in tandem with the manual conversion team, and use their input as a driver for automated tool improvements.
Working Against Upstream Libraries
By converting the upstream React performance tests and Apollo Client, the team could identify deficiencies in the language converter. The original pass at the language conversion was based on a set of common patterns each team had identified from prior porting exercises. The Apollo team loves to use all the power of the JavaScript language, and uses a variety of patterns and language capabilities that are not common in other libraries. As such, the conversion tool was significantly enhanced in adding patterns to match those in Apollo Client. Initially, the conversion tool was able to port ~50% of the upstream Apollo Client code to the target language. Once the aforementioned enhancements were implemented, the tool was able to bolster its capabilities up to 77% of portable code. The remaining 23% was due to language restrictions by the target language, such as string template partials, so features like GraphQL fragments are not available in the ported version of Apollo Client.
Continuing to Grow an Ecosystem
We continue to work to help expand our client’s toolchain for the custom React ecosystem and make improvements to the language conversion tool. This work will include more JavaScript libraries existing in the target language’s ecosystem as well as improvements to performance benchmarking and testing utilities.
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.