We made Jam a super-smooth 20x faster

Jam is a platform for bug reporting and design feedback

Synonymous with collaboration

They discovered the gap between developers and project managers. Giving them a shared space to comment and create tasks to provide feedback and fix technical issues.

At the beginning of our cooperation, Jam was in an early beta stage. Our job was to help them go from prototype to production-ready, feature-full product.

We jumped in and set up all the basic functionality so that Jam could begin creating custom integrations to third-party project management tools which would expand their outreach.

• Integrating external tools

• Optimising app performance

• Improving back-end architecture

The Product Brew Formula

We seamlessly weaved in each requested integration, some as fast as two days. Jira, Slack, Github, Linear, Asana and Trello.

Next came custom features like comment status, assigned users, comment labels and Kanban view.

After that, we added a new form factor for the app which provided a window to speed up some slower parts of the product at the same time.

User expectations and business goals went right at the heart of our technical plan

• 1. We gave users a dedicated workspace to render their website in an iframe so that they could start using Jam without having to inject the script themselves.

• 2. Next we implemented the GraphQL server for the most critical endpoints and as a replacement for the REST API calls. Since state, cache and optimistic rendering were one of the problems, introducing GraphQL allowed us to generate types using GraphQL CodeGenerator.

• 3. We divided our codebase into separate packages and added mono-repo, using Yarn Workspace, resulting in improved business logic separation.

• 4. Creating a Kubernetes configuration solved the problem of deploying infrastructure for new services, scaling the older, slower services, and enhanced the whole deployment process with the Helm configuration.

• 5. Finally, we set up all static code checks, build and deployment steps using Github Actions.

Testing the new Jam

After a successful launch, the new Jam onboarded countless new users with ease.

• ✔️ They loved it because they didn't need to modify anything on their site

• ✔️ Jam sped up significantly due to the new Graphql API

• ❌ We still thought it could be faster

• ❌ Users that left lots of comments faced slowdowns from React

• ❌ The page would rerender often and the API was not fully optimised

Meet Jam v2 - Built better. Built faster

With the long-term plan deconstructed and grouped into stages, we set up the staging environment and fully automated deployment to deliver the changes confidently.

To resolve problems with state management, cache and optimistic rendering, we refactored the core components to make full use of the urql GraphQL client.

This allowed us to have a consistent cache, response types, optimistic rendering, and resolve the re-rendering problems.

For the client state management, we chose to use MobX which fixed the problem with managing multiple nested React contexts.

The result?

• ✊ A whopping 20x faster performance boost

• ✊ The new UI implementation made Jam easier and cleaner to use

• ✊ The design language system streamlined implementation with Figma, making further development much more straightforward