Audius React Native Migration | Audius Blog

CRYPTO_NEWS AUDIO

When we first built the Audius Music mobile app, we chose to simply create a thin

React Native

WebView wrapper around our already existing web app. It allowed us to go to market quickly and provide a full-featured mobile experience with minimal development effort.

 

Another benefit was that new features only needed to be implemented for one platform and would then be available across web, iOS, and Android. Also, the crypto libraries that we depended on were immature and difficult, if not impossible, to use outside of a web environment.

At the time, using a WebView was definitely the right choice.

But over time, it became clear that the WebView-based mobile experience was not ideal for users in a few different ways:

  • Performance was lacking, especially for animations and transitions, which were capped at 30 frames per second
  • Many native gestures were not supported
  • Mobile navigation was directly tied to the web routing structure, so changing between screens often meant losing a previous navigation context

The React Native WebView approach also presented some difficulties for developers:

  • For certain features, communicating with the native layer was necessary and required an asynchronous and potentially slow message passing bridge
  • Running the app locally required bundling and serving the web app before running the React Native layer

Migrating to React Native

To provide users and developers with a better experience, we decided to remove the WebView and build a fully React Native mobile application.

However, we wanted to avoid the maintenance burden of two completely separate apps, so we set a goal of sharing as much code between web and mobile as possible. This presented a challenge and required careful consideration at every step.

It was not possible to reuse our web React components in React Native so rewriting at least the UI layer was required, but much of the state management and business logic could be shared.

Incremental migration

We decided to perform the migration in two phases so that we could reap some benefits early.

Phase 1 was the process of implementing the user interface in React Native while still using the web app as the state management layer (using redux and redux-sagas). This postponed having to migrate much of the complex business logic and would already achieve 60fps animations, better gesture support, and improved UI performance.

Phase 2 was the process of repurposing all the state management & business logic existing in the web app to be platform-agnostic and to run in React Native. Having platform-agnostic business logic would allow the WebView to be removed entirely and both the mobile and web apps to run on top of the same business logic.

Preliminary step - Monorepo

One of the first changes that made the migration more efficient was the move to an audius-client monorepo that contains both the Audius web client and the Audius mobile app. Combining these repositories reduced overhead as we migrated individual screens and features to React Native. We no longer had to make separate pull requests for a single feature!

 

 

Source : blog.audius.co/article/audius-react-native-migration by Sebastian Klingler - November 15, 2022

Join our 60k+
tribe of Akters

Have any questions?

We're here to help.

Learn more

About the AKTIO coin

AKTIO is now live!

Learn more about the AKTIO coin

What’s new in the App?

We’re adding new features

Find out more about the App

Customer support

support@akt.io

+353 1 574 7382

Opening hours:

Monday to Friday: 9am - 5pm CET

Company

About

AKTIO coin

Careers

Learn

Blog

News

Glossary

AKT Academy

Help

FAQ

Sitemap

System Status

Follow our latest news

Automata Pay

65-66 Warwick House 4th

Floor, Queen Street, London

England, EC4R 1EB

Automata ICO Ltd

3rd Floor Ormond Building,

31-36 Ormond Quay Upper,

Dublin 7, D07 Ee37

Automata Pay Europe Ltd

3rd Floor Ormond Building,

31-36 Ormond Quay Upper,

Dublin 7, D07 Ee37

Automata Pay Ltd, Reg number 12208424 and incorporated in the United Kingdom is the registered agent of Modulr FS Limited, a company registered in England with company number 09897919, authorised and regulated by the Financial Conduct Authority as an Electronic Money Institution (Firm Reference Number: 900573). Traditional currency will be safeguarded by a licensed bank in segregated accounts in accordance with regulatory requirements.

Automata Pay Europe Limited, Reg number 69028 and incorporated in Ireland is the registered agent of Modulr FS Europe Limited, a company registered in Ireland with company number 638002, authorised and regulated by the Central Bank of Ireland as an Electronic Money Institution (Institution Code C191242). Traditional currency is safeguarded as e-money in accordance with our regulatory obligations. Traditional currency will be safeguarded by a licensed bank in segregated accounts in accordance with regulatory requirements.

Automata ICO Limited, Reg number 690280 and incorporated in Ireland has applied for a Virtual Asset Service Provider registration with the Central Bank of Ireland. Whilst the application is ongoing we are permitted to continue business as a Virtual Asset Service Provider in line with the Central Bank of Ireland's regulatory disclosure statement as required under section 106L of the CJA 2010 in relation to registered VASPS. It is important to note that a registration as a VASP is a registration for Anti-Money Laundering (AML) and Combatting the Financing of Terrorism (CFT) purposes only. While Automata ICO Limited does have certain financial crime control obligations under this registration, cryptoasset services remain largely unregulated. The Financial Ombudsman Service or the Financial Services Compensation Scheme do not apply to the cryptoasset activities carried on by Automata ICO Limited.