Front-end Architecture

Baidu Geek Talk

Feb 19, 2025 · Frontend Development

Technical Practice of Baidu Live‑Streaming Interactive Framework: Performance and Stability Optimization

Baidu live streaming interactive framework optimized performance and stability for music+red‑packet activities, using component reuse, page pre‑static generation, SSR, ISR, prefetching, view prerender, fallback mechanisms, and animation downgrade, achieving first‑screen load reductions to 0.5 s and delivering a reusable solution for large‑scale live events.

Front-end ArchitectureLive StreamingSSG

0 likes · 16 min read

Technical Practice of Baidu Live‑Streaming Interactive Framework: Performance and Stability Optimization

Bilibili Tech

Dec 6, 2022 · Frontend Development

Redesigning Bilibili PC Web: Front‑end Architecture, Vue3 SSR, Grid Layout and Performance Optimization

In early 2021 senior engineer Liu Lei led a complete redesign of Bilibili’s PC homepage, adopting Vue 3 with a custom SSR/CSR hybrid, responsive grid layouts via CSS grid and flex, theme variables, monorepo tooling, and extensive performance tweaks—boosting the page’s score dramatically while preserving hackability and supporting both narrow and ultra‑wide screens.

CSSFront-end ArchitectureGrid Layout

0 likes · 12 min read

Redesigning Bilibili PC Web: Front‑end Architecture, Vue3 SSR, Grid Layout and Performance Optimization

DaTaobao Tech

Jun 29, 2022 · Frontend Development

Design and Implementation of a Reactive Data System in Tubes

The article presents Tubes, Alibaba’s high‑performance terminal renderer, and argues that a hash‑table‑based reactive data system—tracking dependencies, triggering updates only for changed inputs, and making Tubes idempotent—eliminates manual loop control, reduces developer burden, and delivers up to 1,350× read speed‑up and hundreds of milliseconds faster first‑screen rendering on low‑end devices.

Dependency TrackingFront-end ArchitectureReactive Data

0 likes · 16 min read

Design and Implementation of a Reactive Data System in Tubes

vivo Internet Technology

Apr 15, 2020 · Frontend Development

RSC Component Architecture, EventBus, and Vuex State Management in Front-End Development

The article explains how the Remote Service Component (RSC) architecture uses a lightweight Vue‑based EventBus for decoupled communication and integrates Vuex with dynamically generated, namespaced stores to manage shared state across hot‑pluggable, visual‑configurable components, solving inter‑component data sharing and namespace collisions.

EventBusFront-end ArchitectureRSC

0 likes · 16 min read

RSC Component Architecture, EventBus, and Vuex State Management in Front-End Development