Hybrid Development Practices: Frontend and Client Collaboration at NetEase Yanxuan

In the webview+APP hybrid development model at NetEase Yanxuan, collaboration between frontend and client developers is crucial. This article shares practical experience from the author's two years of hybrid development work, focusing on three key aspects: details/standards/communication.

1. Overview

Despite various hybrid development frameworks like Weex, React Native, and Flutter emerging over the years, Yanxuan ultimately chose the webview+APP approach, requiring collaboration between frontend and client teams. The author has been responsible for JSBridge standardization and offline package capability reconstruction for iOS.

2. Addressing Functional Gaps and Focusing on Details

There exist gaps between frontend and client developers, as well as between Android and iOS developers. These gaps stem from:

Knowledge gaps: Different expertise areas (e.g., cookie handling in requests)

Business logic gaps: Different understanding of underlying methods

Legacy code gaps: Old implementations that remain unchanged

System gaps: Different platform restrictions

Framework gaps: Platform-specific framework limitations

To overcome these gaps, developers need to focus on details at three levels:

Presentation layer : Consider all user permission states and their behaviors

Workflow : Understand each step of the execution logic, such as offline package request timing, failure handling, and update detection

Exception handling : Handle input exceptions, execution exceptions, and implement fallback measures

3. Emphasizing Standards - No Rules, Endless Troubles

Yanxuan's JSBridge had "dark history" issues: inconsistent API standards, redundant similar JSBridges, and inconsistent behavior between iOS and Android. Solutions implemented include:

SDK to smooth differences : Wrapping all methods to support both callback and Promise, hacking platform-specific differences, and redesigning problematic APIs

Complete documentation : Unified format for API documentation with demo examples

Code example showing SDK improvement:

/* before */
window.NEJsbridge.call('setShareToSNSCallback', {});
window.onShareResult = (res) => { /* handle result */ }
/* now */
invoke('setShareToSNSCallback', {}).then(([res]) => { /* handle result */ })

4. Communication and Understanding - The Golden Rule of Collaboration

Effective collaboration requires:

Communication about:专业知识、业务知识、祖传代码、技术方案、未来规划

Understanding: Client-side responsibilities are heavier due to release cycles; both sides face legacy code issues; technical projects require prior alignment

5. Summary

Frontend developers must understand they are the ultimate users of hybrid development outcomes. Paying attention to details, standards, and communication will help in hybrid development work.