Technical Stack and Practices of Meituan-Dianping Financial Platform Frontend
Meituan‑Dianping’s financial platform unified its frontend by adopting Vue for mobile, React for desktop, TypeScript, the Vix UI library, Portm mock‑data generation, Freekite visual testing, an Enhanced Hybrid SDK, SSR pre‑rendering, and robust monitoring and security, delivering up to 80 % UI development savings and markedly higher developer productivity.
Background: Meituan-Dianping financial platform rapidly expanded its frontend team, leading to divergent technology choices across 8 business units.
In 2017 a technology stack unification initiative was launched covering backend, iOS, Android and frontend. This article shares the frontend stack selection and underlying considerations.
Principles: business‑driven, team‑driven, simplicity, standardization, automation, reuse.
Frameworks: Vue is chosen for mobile (small size, low complexity, high adoption) and React for some existing desktop projects.
Component library: Vix, a mobile‑first UI library co‑designed with UED, provides base, complex and business components, enabling up to 80% reduction in UI development effort.
Language: TypeScript adopted for strong typing, early error detection and better maintainability.
Collaboration decoupling: Portm tool generates mock data, API docs and backend tests, reducing integration wait time.
Automation testing: Freekite offers visual case management and automated flow testing.
Hybrid experience: Enhanced Hybrid (EH) SDK and guidelines address performance and UI gaps between Hybrid and native apps.
Performance optimizations: SSR and a custom build‑time pre‑rendering approach improve TTFB and first‑paint; offline techniques (service workers, native‑based solutions) further reduce load time.
Monitoring & security: CAT for monitoring, HSTS and CSP for security, plus a custom request signing scheme.
Results: Significant efficiency gains (up to 80% UI time saved), higher developer productivity, and high‑quality, high‑performance Hybrid applications.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Meituan Technology Team
Over 10,000 engineers powering China’s leading lifestyle services e‑commerce platform. Supporting hundreds of millions of consumers, millions of merchants across 2,000+ industries. This is the public channel for the tech teams behind Meituan, Dianping, Meituan Waimai, Meituan Select, and related services.
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.