Design and Practice of a Front‑End Business Framework for Mobile Applications

The author, a senior R&D manager at Ctrip, shares the full lifecycle of designing and implementing a front‑end business framework for the Yong’an Travel mobile app, illustrating how front‑end development has evolved from simple UI work to a full‑stack, scalable architecture.

1. Pre‑design considerations – Avoid chasing the newest technologies for their own sake; focus on cost, applicability, team familiarity, and business goals. Define clear objectives for business, technical, and personnel outcomes, and identify the target user environment to guide scope.

2. Technical selection – Choose tools that simplify development for a typical e‑commerce SPA: CommonJS module system, React for componentization, selective ES6 features, and LESS for styling. Establish coding standards covering JavaScript, HTML, CSS, project structure, component design, MVC definitions, ES6 usage limits, and third‑party library policies.

3. Infrastructure modules – Provide unified storage abstractions (SessionStorage, LocalStorage, MemoryStorage, CookieStorage) with CRUD APIs, JSON handling, expiration, auto‑cleanup, and version‑based invalidation. Implement a client‑side identifier (ClientID) for analytics and error reporting, and a global error handler that forwards details to a monitoring system.

4. Router – Build a custom router (instead of React‑Router) to support hash‑based hybrid pages and History API for H5, enabling seamless server‑client route sharing and flexible lifecycle handling such as async loading and page caching.

5. MVC implementation – Use Redux as the state manager, with Model classes handling API definitions, data formatting, caching, and error handling; View layers built with React components; Controllers linking Model and View while exposing Redux reducers and stores. Separate pure data models from UI‑specific extensions to keep client and server code reusable.

6. Plugins, services, and UI components – Define plugins (e.g., Underscore extensions), services (ads, location, authentication, native bridges), and a library of reusable UI components (forms, lists, calendars, ads) to promote high cohesion and low coupling across the codebase.

7. Hybrid performance optimizations – Address WebView startup latency, page load speed, and script parsing by pre‑initializing WebViews, static asset bundling, incremental JS loading, interface data caching, embedding first‑screen data in the app package, and reducing initialization code size.

8. Server‑side rendering (SSR) and isomorphic solution – Use Node to run the same CommonJS modules on the server, providing Model, routing, and utility code that can render initial HTML with embedded JSON data, improving SEO and first‑paint performance.

9. SPA + React considerations – Discuss performance pitfalls of React (bundle size, large data binding, unnecessary re‑renders) and mitigation strategies such as using React‑lite, component splitting, shouldComponentUpdate, and selective state management.

10. Redux evaluation – Weigh the benefits of predictable state management against added complexity; suggest using Redux for complex flows while keeping simple pages lightweight, and abstracting actions/reducers to reusable utilities.

11. Engineering automation – Implement coding standards, modular architecture, JSDoc documentation, UI component showcase site, agile planning, unified IDE configuration, ESLint/CSSLint enforcement, one‑click scaffolding, live reload with Webpack + Browser‑Sync, automated builds with Gulp, unit testing via Karma + Jasmine, and CI/CD pipelines using Jenkins for build, test, and deployment across dev, test, and prod environments.

12. Continuous integration and testing – Automate linting, Babel transpilation, LESS compilation, code minification, unit test execution, and reporting; integrate automated performance and error reporting back to the server for ongoing improvement.

Overall, the article demonstrates how a disciplined, modular, and automated approach can deliver a robust, maintainable front‑end framework that balances performance, scalability, and developer productivity.