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
- 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 see how This Dot can help you
Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.
You might also like
Portfolio
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
Driving Web3 Innovation: Collaborative Success in Showcasing Chainlink Functions
topics covered in this case study:
Chainlink, the company behind the Web3 services platform and blockchain oracle network of the same name, approached This Dot Labs to build a showcase application featuring Chainlink Functions.
Daily Polished, a members-only e-commerce platform focused on luxury beauty and wellness products
topics covered in this case study:
This Dot Labs took over architectural decision making and development for the e-commerce store and provided a seamless transition with timely deliver of the platform.
WebXR Performance Testing with React: Revolutionizing Mixed Reality Development
topics covered in this case study:
This collaborative endeavor demonstrated the potential of WebXR and showcased the power of leveraging community support and expertise in the open-source ecosystem.
Automating Code Maintenance: This Dot Labs’ Successful Partnership with an Online Metaverse Platform
topics covered in this case study:
Our team created an automated conversion tool to detect newly released code, determine changes introduced by it, and trigger an automatic upgrade to the converted library.
Creating an AI gesture recognition game with next generation Angular and Tensorflow.js
topics covered in this case study:
Ahead of Google I/O in May 2023, the Angular Core Team reached out to This Dot Labs to help them deliver a demo application, showcasing a highly interactive ML integrated application built using Angular with TensorFlow.js in time for the conference.
Enhancing Sentry’s Suite of Debugging Tools with a Cutting Edge Replay Feature
topics covered in this case study:
Sentry’s Emerging Technologies team approached This Dot Labs to augment their team developing a new feature offering a visual replay of user interactions that would seamlessly fit in with Sentry’s portfolio of error and performance monitoring tools.
- See full portfolio