vivo Mall Multi-End Unified Frontend Architecture Practice

This article provides a comprehensive overview of vivo Mall's exploration and practice in multi-end unified frontend development.

1. Value of Multi-End Unification

The value of multi-end unification is reflected in two aspects: technical architecture upgrade and human resource release. Through unified technical architecture, development costs and maintenance costs are greatly reduced while achieving high reusability and efficiency.

2. Why Multi-End Unification

With the proliferation of endpoints (PC browsers, mobile browsers, APP embedding, mini programs, quick apps, etc.), frontend engineers face increasing challenges. The "matryoshka doll" trap emerges where existing code and new code need to adapt to new endpoint development scenarios repeatedly. Multi-end unification aims to solve this problem by creating a single technical architecture that can cover both current and future endpoints.

3. Meeting Business Requirements

Based on business demands, three key objectives were identified: (1) Implement H5 basic functions in WeChat mini programs in the shortest time; (2) Achieve high reusability and efficiency during synchronized iteration; (3) Consider future expansion for other endpoint scenarios. After technical research and MVP validation, uni-app was adopted as the multi-end architecture solution.

4. Practices and Innovations

Code Conversion: Used the open-source converter miniprogram-to-uniapp for initial conversion, followed by manual fixes for mismatched parts.

Code Coexistence: Used reasonable directory structure and conditional compilation to isolate code that cannot yet adapt to multi-end environments, placing them in the platforms directory.

H5 Reuse and Adaptation: For H5 code reuse, directly reuse what can be reused without secondary adjustments. For adaptation, create an adaptation layer for H5 routing, incompatible components, and even window.location.

Vuex Innovation: Solved the issue where using vuex in mini programs causes display problems when navigating back from pages visited multiple times. The solution involves automatically generating and dynamically collecting namespace in vuex to achieve more intelligent data flow management.

Decoupling Innovation: For business component reuse across different product detail pages (regular, seckill, group buying), implemented: unified tracking at the component level, conditional judgment for specific interfaces, separating source data and derived data in vuex, and transforming vuex to completely decouple component-page communication using @vivo/smartx.

The core principle is balancing mutable and immutable data through source data and derived data, using @vivo/smartx to isolate changes.