Refreshing WorkflowGen App by Advantys

CLIENT INFO

Advantys is a global technology company that specializes in providing solutions for managing complexity.

Industry

IT & Software

Company type

Enterprise

Region

North America

tech INFO

Enhanced the WorkflowGen mobile app by improving performance, UI/UX, and code maintainability with a modern React Native stack.

Technologies

React Native

Platforms

Mobile

Tech Stack

Expo | Typescript | React Native Paper | React Query

highlights

Let's connect

Before 14.5s

After 2.5s

35k

lines of code

months of work

800

code commits

88%

decreased shimmer render time

50%

quicker load times for chats on subsequent visits

50%

faster rendering time for chats

18%

less frame junk when scrolling

before

The refresh time was 5-11 seconds

after

The refresh time was reduced to ~2 s

Instant Preview

Developers can instantly preview code changes on real devices without a complex setup.

Let's connect

Advantys Project highlights

Easy-to-maintain codebase
Refreshed app with upgraded libraries
Improved development velocity of new features

Let's connect

CHALLENGE

Advantys asked us to modernize their WorkflowGen mobile app, which relied on the first-generation React Native tech stack. The migration from the previous React Native/GraphQL architecture to the new stack posed challenges in ensuring data consistency and minimizing disruption to the native feel of the app.

Additionally, implementing features like "on behalf of" functionality and dark mode required meticulous integration to maintain the app's coherence and usability.

work done

In a dynamic collaboration with Advantys, we focused on the following:

PERFORMANCE AND UI/UX

Enhanced overall app performance and user experience, implemented design consistency using React Native Paper, and Optimized Android Native UI where possible.

TECHNICAL MIGRATION

Upgraded technical stack to Expo, TypeScript, React Native Paper, and React Query. Rebuilt app architecture for easier maintenance and faster feature development.

FEATURE IMPLEMENTATION

Introduced "on behalf of" functionality for team activities.

Implemented dark mode for improved user customization. Integrated authorization with external providers (Auth0, Okta, Microsoft ADFS, AZURE).

define

Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.

measure

Used Macro tool measurements.

ANALYZE

Selected the most promising performance changes.

IMPROVE

Implemented changes following React Native best practices.

CONTROL

Re-measured with the Marco tool and compared to the 4.58.0 native version.

Deployment

Developed the release process for both Android and iOS.

API DESIGN

Proposed an API based on the Rive Android library features.

INTEGRATION

Implemented Rive SDK integration for Android and created an example app for testing.

iOS SUPPORT

Extended the integration to iOS after successful Android testing.

AUTOMATION

Created a Github Action workflow for automated library releases.

PUBLIC RELEASE

Made the library publicly available on platforms like CocoaPods and Maven.

DEPENDENCIES

Managing dependencies, including Expo and react-native packages for each new release.

RELEASES

Automating the release process with custom GitHub Actions.

TRAINING

Providing React Native training through pair programming, code reviews, and workshops.

COLLABORATION APPROACH

We seamlessly integrated within the client's team.

Working under the supervision of Advantys' CTO, we enhanced communication and problem-solving.

Loosely Coupled Mini-Apps

Ensuring independence between mini-apps while maintaining necessary communication was a priority. The team addressed this by:

Isolating client states and minimizing shared states.
Allowing server state sharing through a centralized query client.

Navigation Complexity

Balancing centralized and decentralized navigation posed challenges. A centralized approach was chosen to simplify integration during initial development, with flexibility for future changes.

Dependency Maintenance

Managing native and JavaScript dependencies required meticulous configuration, streamlined by tools like rnx-align-deps and Re.Pack’s shared fields.

CODE REFACTORING

Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.

MIGRATION

Migrated the codebase to TypeScript.

DEPENDENCIES

Upgraded major dependencies such as Expo, React Navigation, and React Query.

PAYMENTS

Created two options: In-app purchase with Google Play or App Store and credit card payment.

linking

Sorted out links, integrated content, and implemented html rendering.

We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.

RN PAPER

Forked the React Native Paper library.

Established continuous integration for automated code updates.

testing

Set up a Storybook for component testing.

design

Developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

16.8s

App start time, before 48.5s

8.6s

Report screen load time, before 15.9s

2.5s

Sending a message, before 14.5s

60FPS

Average FPS on LHN

2.6s

Search screen load time, before 11.8s

Together

we acted as staff augmentation within Advantys’ team.

Engaged

in collaborative problem-solving and solution exploration.

supervised

by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.

migrating

from a custom server-side rendering (SSR) solution to Next.js

Focusing

on Core Web Vitals metrics

Optimizing

a large shared JS bundle

Introducing

Fast Refresh for accelerated development iterations

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.

strong

architecture with professional maintenance and continuous updates

high

code coverage with quality-compliant unit and integration tests

Comprehensive

testing, including end-to-end.

Faster

time-to-market with mobile process automation.

New PoC

features like biometrics and mobile health kit integration.

Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.

Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions

“As a CTO working 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

results

Our work resulted in:

Enhanced DX and CICD with Expo and modern React Native stack
Updated look and feel of the Workflowgen mobile app
Simplified codebase maintenance and improved performance
Added new features like dark mode and "on behalf of"

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

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

Case studies

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Thriva

get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

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

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

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.