Rebuilding NetEase Cloud Music's React Native Infrastructure: From 0.33 to 0.6, Automated Deployment, Codemod, and Multi‑Platform Strategy

In March 2017 the Cloud Music team formed a four‑person React Native (RN) squad to improve the performance and user experience of the e‑commerce module. The initial RN version (0.33) suffered from a lack of scaffolding, missing for‑web support, and a manual deployment pipeline, resulting in low development efficiency and only 2.5 RN applications being released.

After a successful H5 optimization of the membership checkout page (reach rate increased from 72% to 89%), the team faced three options: continue H5 optimization, reset the checkout page on RN 0.33, or rebuild the entire RN ecosystem. They chose the most ambitious path—upgrading the RN stack to version 0.6 and establishing a complete RN development system.

Automated Deployment

The legacy deployment platform required manual compatibility scripts, local bundling, and error‑prone upload steps. Example compatibility script:

sed -i -e 's/function normalizePrefix(moduleName: string)/const normalizePrefix = function(moduleName: string)/g' ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridgedModules/NativeModules.js

and similar commands for other modules. The bundling was triggered by running release.test.sh (test) or release.sh (production), which called platform‑specific packagers.

The new pipeline automates cloning, dependency installation, script execution, compression, upload, version recording, and publishing:

git clone → dependency install → auto script → compress → upload to file server → save version info → publish

A Node‑based deployment service now handles compatibility fixes, bundling, uploading, and multi‑environment releases with a single click.

Double‑End Preloading

Performance analysis showed that fetching the JS bundle is the main bottleneck. By pre‑loading the bundle during app startup, subsequent RN screens load instantly from local storage, dramatically improving user experience.

Upgrade from 0.33 to 0.6

The upgrade required:

Updating the RN Native SDK (iOS & Android) and all RN applications.

Resolving dependency changes (React 15.3 → 16.8) and replacing deprecated components such as ListView and navigator‑ios with modern equivalents ( FlatList , etc.).

Handling syntax incompatibilities, e.g., replacing Image + View with ImageBackground .

To automate the massive code transformation, the team built the first RN‑specific codemod framework mrn-codemod . Its workflow:

Read the 0.33 source code.

Convert it to an AST.

Apply 12 transformation rules to produce a 0.6‑compatible AST.

Generate the updated source code.

The codemod completed the migration of all RN apps within a day, ensuring accuracy and reducing manual effort.

Three‑Platform Solution

After the upgrade, three strategies were evaluated for running RN code on the web:

Direct translation : Convert RN DSL to React DOM (e.g., View → div , onPress → onClick ). This approach proved too labor‑intensive and incomplete.

Bridge mode : Use a third‑party framework that supports for‑web, such as Taro or ReactXP. ReactXP lacked sufficient components.

Bottom‑up construction : Extend react-native-web with missing components, resulting in the custom package @music/react-native-web-suffix .

Based on this, the team created a full toolchain: rn-cli (scaffolding), rn-util (common utilities), and rn-template (project templates). The new development workflow integrates Android, iOS, and web containers, enabling seamless three‑platform builds.

Results

The rebuilt checkout page on RN 0.6 achieved a reach rate of 99%, surpassing the optimized H5 version (89%). Over ten RN applications are now in production, and the RN infrastructure has become a core focus of the front‑end team.

Future Plans

Key upcoming initiatives include:

Native RPC : Unify RN bridge and JS bridge APIs for cross‑platform data communication.

RN Splitting : Separate the JS bundle into base and business packages and pre‑load the RN container to reduce startup latency on low‑end Android devices.

Additional projects such as RN monitoring, targeted resource delivery, and documentation standards.

The team aims to make RN performance, efficiency, and observability industry‑leading.