Creating a Stable Development Tool for GlueStick

Let’s talk about your project

Let's connect
Callstack Cosmos
Callstack Cosmos

Not only were they able to help us accomplish the goals we set out for the project, they also brought many great ideas that contributed to its success. We are now in a much better place than we were before working with Callstack and I would recommend them to anyone who needs expert JavaScript engineers.

Todd Williams
Gluestick Author

In brief

We optimized the client’s mobile app performance and introduced a custom tool to measure performance regressions. We set up performance tests and documentation to enable a seamless transition of knowledge with the in-house team of developers.

Client Info
Entain is one of the world’s largest sports betting and gaming entertainment groups.
Commercial gaming
Company type
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
React Native | Native
iOS | Android
Redux | Tanstack | Reassure | GraphQL

Performance Boost


In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.

React Universe

In brief

Managing large developer team consisting of dozens of people is undoubtedly difficult and challenging. Having senior developers on the team can definitely help, but in the long-term there is a need of a solution - GlueStick - a command line interface tool for an easy and quick development of universal React applications with Redux integration. It contains fully functional test environment, Server Side Rendering and an asset bundler without any configuration step required.

Rebuilding a command line interface tool

The solution should have preferably met all of the following criteria:

  • being production-ready and stable, and simplifying the process of creating Docker container for the production environment,
  • allowing to render React applications on NodeJS server - Server Side Rendering.
  • providing an easy and quick project creation tool,
  • providing a common project structure between different projects in order to let
  • the developers easily switch between them, thus minimizing the cost of diving into the codebase,
  • provide an easy abstraction over complex internal logic in an attempt to let the developers focus on a business logic and the product itself, rather than on an infrastructure, therefore allowing to ship fixes and new features faster.

The first iteration of the tool meeting all of the above points was being developed internally by the client. Our Callstack team were there to implement the missing features and reach the stable version 1.0.

Getting into the codebase

Besides dealing with the API design we also had to figure out the best way to unify components and their styles throughout all the projects. The best solution that came to our minds, was creating separate GitHub repository with shared components, and then importing those whenever necessary. Creating somewhat a library with all of the building blocks that combined together would bring a beautiful visual experience for the users.

  • trying to implement new features and reach stability by monkey patching the code and deal with existing inconsistencies,
  • replacing the core components of the tool with already existing 3rd party projects, for instance Next.js,
  • refactoring the codebase while implementing some of the features, applying industry-standard improvements and then implementing other major functionalities.

A major refactor

Having considered all of the above approaches, we have settled on the 3rd one - a major refactor.

First logical step was to improve the architecture. Before the version 1.0, GlueStick was just one package installed globally, which had a serious drawback - GlueStick’s version was not tied to a specific project, meaning that whenever new version was released, there was a high chance of breaking other projects, especially in major zero stage (0.x).Our team decided to go with a solution similar to React Native CLI - by having a global gluestick-cli and a local gluestick project dependency. The former creates a new project and redirects other commands to local Gluestick module, which holds the implementation and is specific to a project.

To simplify the process of creating new components, containers or reducers, the generators API was designed, that would create a file based on options and template.Each one of the team members has been handed over some specific functionalities to refactor, remove inconsistencies and add Flowtypes to check for possible errors. We have migrated the unit test to Jest, which later allowed a single test runner to execute tests from different packages.For a bundler, considering the requirements, there was only a single choice - Webpack. It’s maturity and flexibility offered a fine-grained control and simplified the process of creating a server for Server Side Rendering of React applications.We have converted GlueStick repository to a monorepo. Now those two packages could be stored in a single repository thanks to Lerna - a monorepo management tool.

The continuous integration service was replaced with CircleCI 1.0 due to being more developed and stable. Later on we upgraded to CircleCI 2.0, which allowed to define workflow and parallelize stages.

Since each client’s project had different requirements, we created a plugin system in an attempt to support the specific needs - different styling solutions, which combined with Server Side Rendering, had to be handled individually.

Production-ready development tool

The result of our work was a stable, production-ready development tool with great developer experience, Hot Module Replacement support and short project creation to shipment time.

Glue Stick project data

Our client have received a stable product for internal use, with no rejections for QA team. It helps them shipping their products and new features faster and with much greater confidence.

The challenges we’ve solved so far

Related services


Product Development and Growth

Callstack illustration

get in touch

Fill in the form and tell us a little bit about your enquiry. We’ll get back to you promptly to discuss your requirements.

Get in touch
This information will be used only to contact you. For details, check our Privacy Policy.