Beike’s Tech Secrets: Frontend Performance, Node Stability, Mobile Monitoring & Flutter

Extreme Front‑End Performance Optimization

In the mobile‑first era, application performance directly impacts user experience. Beike senior engineer “Xi” presented the tools and methodology used to push performance beyond conventional limits, emphasizing a data‑driven, staged approach that evolves from basic awareness to meticulous, metric‑guided optimization.

The optimization process is divided into two awareness stages—unconscious and conscious—and four technical phases: no optimization, generic solutions, metric‑based tuning, and handcrafted refinements. Real‑world case studies demonstrated iterative improvements such as SVG optimization, lossless image compression, pixel‑channel extraction, and converting images to CSS stylesheets.

Key techniques include:

Compressing text resources with GZIP (leveraging LZ77 and Huffman algorithms).

Applying specialized image compression (cosine transform, wavelet methods) and selective lossless/lossy strategies.

Using Beike’s internal data platform “fee” to monitor performance metrics across apps, APIs, gateways, Kafka pipelines, and alerting systems.

Node Service Stability Exploration

Senior engineer “Xin Xuan” explained why Beike adopted Node.js for server‑side rendering, SEO, and front‑back end unification, achieving faster first‑paint and reduced client‑side dependencies.

The architecture combines an internal “Bucky” solution with React, forming a layered stack: storage (Redis) → API layer → Node rendering layer → client, with a clear separation of the isomorphic components.

Stability practices focus on proactive prevention (capacity estimation, load testing, rigorous code review) and reactive detection (dual‑mode monitoring of server logs such as NGINX 499/404/503, resource usage, and alert escalation via WeChat and email). When incidents occur, rapid rollback, targeted debugging, or scaling actions (restart, horizontal expansion) are employed.

Mobile Monitoring Construction Practice

Beike’s mobile team outlined a multi‑dimensional monitoring system covering Crash, custom events, and network anomalies for both Android and Flutter components.

Crash handling uses Thread.setDefaultUncaughtExceptionHandler to capture stack traces, device info, and business context, then uploads data via a Dig channel to a processing queue. ANR detection combines trace‑file monitoring with a Watchdog heartbeat.

Alert thresholds are defined by crash frequency multipliers (e.g., 1.5× daily max) and segmented by system version or device type, with notifications sent through enterprise WeChat and email. This system reduced the B‑end Android app crash rate to 0.007%.

Flutter Integration Practice

Senior engineer “Xiaoyao Feng” described Beike’s journey of embedding Flutter into existing native apps since Flutter’s stable release in 2019. The goals were to decouple business logic, improve development efficiency, and enable platform‑agnostic UI.

Four Flutter project types were introduced: Application, Module, Plugin, and Package. The preferred integration pattern uses Flutter Modules as sub‑modules within native Android/iOS projects, minimizing impact on native developers while allowing hot‑reload during development.

Key integration considerations include:

Native decoupling: minimal changes for native teams.

Platform abstraction: developers work with Dart and Flutter UI APIs regardless of iOS/Android.

Business separation: independent repositories per business line.

Efficient build and CI: seamless CI pipelines without manual Flutter configuration.

The resulting architecture separates Flutter and native spaces, aggregates business components, and enables rapid feature delivery while maintaining a clean, modular codebase.