Dynamic Multi‑Platform Development Practices at 58.com: WubaRN, Tangram, Flutter, and Taro
The article presents 58.com’s approach to rapid multi‑endpoint development by employing several cross‑platform frameworks—including WubaRN (a ReactNative wrapper), Hybrid, Tangram for layout dynamization, Baidu mini‑programs, Flutter, and the Taro transpilation framework—detailing their architectures, advantages, limitations, and future planning for unified mobile solutions.
Background
58.com requires fast development across multiple platforms, using several cross‑platform frameworks and migration between apps. The technical stack is divided into three layers: business layer (translation frameworks such as WubaRN‑M, taro‑react, MPVue, Wepy, Mpx), cross‑platform framework layer (Hybrid, ReactNative, mini‑programs, Flutter), and a unified plugin layer.
58APP Dynamic Practice
Three main technical solutions are used in the 58App:
WubaRN – a second‑level wrapper of ReactNative for high‑experience dynamic requirements.
Hybrid – a JS‑Native bridge mainly for operational activities.
Tangram (Alibaba) – a layout‑dynamic framework for native pages.
Because Hybrid is simple, the article focuses on WubaRN and Tangram.
1. WubaRN
Key points of the ReactNative‑based wrapper include:
Business components and template projects that smooth UI differences and extend native capabilities.
Bundle splitting (common bundle + business bundle) and step‑wise loading for hot updates.
Three‑thread model (UI thread, Shadow thread using Yoga, JavaScript thread) and JSON‑based communication via the ReactNative bridge.
Issues such as white‑screen during fast scrolling, large data transfer latency, asynchronous communication bottlenecks, and low JavaScript frame rates on low‑end devices.
Recent ReactNative improvements (Fabric, Fiber, RecyclerView) aim to expose native APIs directly to JavaScript, synchronize UI and JS threads, and prioritize animations.
2. Layout Dynamization – Tangram
Tangram provides a “seven‑piece puzzle” approach to build rich UI from a few building blocks, achieving high performance with acceptable flexibility. Its design principles sacrifice some flexibility for extreme performance, using native list implementations (RecyclerView) and component recycling.
Typical use cases include stable business lists and homepage components that demand high performance and occasional dynamic styling.
3. Other Dynamic Frameworks
Additional cross‑platform technologies discussed:
Mini‑programs (WeChat, Baidu) – Baidu mini‑program architecture separates logic (App(), Page()) and rendering (San MVVM), with communication via a message bus.
Flutter – a full‑package solution inspired by ReactNative, offering a reactive programming model, Skia‑based UI, hot reload, and no bridge dependency, but with limitations such as iOS hot‑update support and ecosystem maturity.
Taro – a transpilation framework that writes mini‑programs in React‑style syntax, supporting TypeScript, Redux, and multi‑end compilation, while imposing JSX and component restrictions.
Both Flutter and Taro aim to unify development across platforms, yet each introduces its own maintenance and debugging challenges.
Summary, Outlook, and Planning
Currently no single framework satisfies all requirements; a hybrid approach is adopted based on scenario:
Mobile: layout dynamization for homepages, ReactNative‑style web technologies for lists/details, Hybrid or mini‑programs for activities.
Multi‑platform: compile‑time frameworks like Taro.
Long‑term, Flutter is seen as the most promising candidate for a truly unified solution, emphasizing continuous learning and monitoring of framework evolution.
Author
Liu Yang, joined 58 in 2013, responsible for Android side of 58App, focuses on front‑end framework technologies.
58 Tech
Official tech channel of 58, a platform for tech innovation, sharing, and communication.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.