Evolution and Refactoring of Ctrip Hotel Query Home Page: From Version 1.0 to 3.0

Author Bio : He Jin, senior Android software engineer in Ctrip Hotel R&D, focuses on code performance optimization, structural refactoring, complex issue troubleshooting, and Kotlin promotion.

The hotel query home page is the first screen users encounter in the Ctrip app for hotel booking. Over multiple iterations, its business logic, functionality, and UI have grown from simple to complex.

To keep pace with rapid business changes, the page’s architecture has undergone three major refactorings.

Version 1.0 – The earliest version followed a classic MVC pattern. Different business sections were abstracted as separate Fragment s placed inside a ScrollView. An InquireCacheBean managed fragment data. While the structure was clear, business logic and layout were tightly coupled within each fragment, leading to code bloat and maintenance difficulty as features expanded.

Version 2.0 – New features required a more modular approach. Business units were encapsulated as Module s managed by a BottomFragment. Each module followed an MVP pattern: BizModule (View), BizModulePresenter (Presenter), and BizModuleRepository (Model). InquireBizConfig coordinated modules using a Map (registration) and a List (display order). When BottomFragment started, it iterated the list to load all modules into the ScrollView. This improved parallel development but introduced a performance “black hole” because every module’s view was inflated regardless of visibility, and the ScrollView caused compatibility issues with controls like ListView and EditText.

Version 3.0 – To solve the ScrollView drawbacks and unify the architecture, three alternatives were evaluated: (1) a unified RecyclerView with multiple view types, (2) an internal GroupListView, and (3) the open‑source VLayout component. The team chose VLayout (an heterogeneous RecyclerView) because it offers better performance, partial refresh capability, and rich UI templates. All previous fragments ( TitleFragment, InquireCoreFragment, RecommendFragment) were refactored into corresponding modules ( TitleModule, InquireCoreModule, RecommendModule), and the BottomFragment container was removed.

The 3.0 architecture yields a cleaner, unified module hierarchy, eliminates the ScrollView‑induced performance bottleneck, and leverages VLayout’s extensive UI templates, thereby reducing duplicated front‑end work and accelerating business delivery.

Conclusion – After three iterative versions, the hotel query home page now has a stable, modular structure that supports rapid feature rollout and reliable production performance. The progressive refactoring approach balances delivery speed with risk mitigation and offers a practical reference for front‑end developers on decoupling business logic and maintaining high‑performance UI composition.