|

Advantys

Refreshing WorkflowGen App by Advantys

Let’s talk about your project

The development efforts have been wisely evaluated and the final costs are on track with the initial estimates. As a CTO working in the software development field for more than two decades, I can confidently say that I strongly recommend Callstack for any development project related to React Native.

Arnaud Bezançon

-

CTO at Advantys

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.

Industry

Commercial gaming

Company type

Enterprise

Region

Australia, Asia & Oceania

Tech Info

Performance optimization project with the best practices, approaches & tech solutions

Technologies

React Native | Native

Platforms

iOS | Android

Stack

Redux | Tanstack | Reassure | GraphQL

Performance Boost

87.5%

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

In brief

Advantys works with organizations worldwide to address complex business processes with optimal engineering and tools. WorkflowGen is a leading digital process automation solution that lets organizations and IT providers design and deploy business-critical, process-driven web and mobile applications.

‍

Table of contents:

Heading 2

Refreshing the codebase improving performance and UI/UX of WorkflowGen mobile app

Advantys asked us to modernize their WorkflowGen mobile app that relies on the first generation React Native technical stack.

During our cooperation, we worked on:

improving the overall performance and UI/UX of their mobile app,
and migrating existing React Native / GraphQL architecture with EXPO, Typescript, React Native Paper and React Query,

to achieve the main goals of our client:

make the codebase easier to maintain,
refresh the whole app by upgrading previously used libraries,
and improve the new features’ development velocity.

The whole process of rewriting the app from scratch took us 9 weeks.

What led Advantys to Callstack was the very need to upgrade the application by achieving the aforementioned goals.

What we did to refresh WorkflowGen app

Optimize UI/UX – Improve design, keep it consistent in the whole app, follow platform patterns and guidelines using React Native Paper while maintaining as much Android Native UI as possible.

Implement “on behalf of” functionality – functionality that allows users to do some activities “on behalf of” somebody from their team (used in Project Management).

Implement the dark mode (with the help of React Native Paper).

‍Implement authorization with external providers – authentication by using OpenID Connect protocol with the use of 4 different providers – Auth0, Okta, Microsoft ADFS, and AZURE.

Share our knowledge, best practices, and educate Advantys team how to proceed Over-The-Air (OTA) updates.

Type of cooperation

Callstack developers jumped into Advantys’ team structure as a staff augmentation being the ones responsible for the frontend side of the update. Usually, the cooperation was about discussing different ways for solving current issues and looking for the best possible solutions in terms of performance and UI/UX.

The whole project was supervised by Arnaud (Co-Founder & CTO of Advantys) as a project owner who clearly explained to us their needs. In addition to Github (issues, PRs, projects), Notion and Slack collaborative tools have been used to accelerate the team’s responsiveness.

React-Query as a GraphQL client

The previous version of the Advantys’ mobile app was using Apollo Client v1 as a GraphQL client, which is no longer maintained. The app also had some issues with unpredictable caching data that Apollo does “under the hood”.
In the new, upgraded version, we decided to use React-Query to solve the problem with caching the data and graphql-request as a simple GraphQL client.

The GraphQL Code Generator tool has been successfully used to generate all the Typescript types and React-Query operations. This solution has proved to be a development productivity booster.

UI/UX optimization

Having in mind our knowledge and ownership of React Native Paper, Advantys asked us to optimize the UI and UX of their app. The main challenge here was to choose such Papers’ elements as not to disturb the native vibe, look and feel of the app. For this reason, we decided to choose only such elements as:

Snackbar,
Button,
IconButton,
and Typography.

It allowed us to significantly accelerate the development process and keep the entire interface coherent. We also replaced react-native-navigation with react-navigation which contributed to the improvement of DX and also contributed to faster development of new features.

React Native with EXPO managed workflow

Advantys’ mobile app we’ve been working on is a simplified version of their web platform which was quite a challenge because some of its elements are created in WebView.

As we needed to make some changes in native react-native-webview code, we had to eject the EXPO app. Luckily, it didn’t have a negative impact on DX so we could keep using EXPO Managed Workflow in the development process and Bare Workflow was used only for final testing and publishing the app.

However, when it comes to Over-The-Air (OTA) updates, both Managed and Bare workflow cooperate with EXPO out of the box so it was not a problem for us.

The main benefits of working with Callstack are:

improved DX and CICD with Expo and a modern React Native stack
refreshed look and feel of the Workflowgen mobile app,
easier and less time-consuming maintenance of the codebase while improving the application performance
implementation of new functionalities such as dark mode and “on behalf of”.

Also, we implemented app monitoring and bug tracking systems which will help to provide users with a better experience in the future.