frontend | BestHub

Bilibili Tech

Sep 20, 2024 · Frontend Development

Bilibili Front‑End Error Monitoring: Architecture, SDK, White‑Screen Detection and Data Governance

Bilibili’s front‑end team built a custom “mirror” SDK and full‑stack monitoring platform that captures JavaScript and resource errors, detects white‑screens, logs user behavior offline, routes data through Kafka‑ClickHouse pipelines to visual dashboards, and provides one‑click alerts, now serving over 1,700 projects across 85% of business lines.

Data VisualizationSDKalerting

0 likes · 33 min read

Bilibili Front‑End Error Monitoring: Architecture, SDK, White‑Screen Detection and Data Governance

Bilibili Tech

Jun 18, 2024 · Frontend Development

Design and Implementation of a Front-End Observability System for Business Monitoring

The article describes a unified front‑end observability platform that standardizes data‑point collection via a common SDK, automatically generates health and business dashboards, integrates real‑time monitoring and heatmaps, and has been adopted on 140 pages, delivering faster first‑screen loads, lower error and bounce rates, and higher conversion.

DashboardObservabilityPerformance Monitoring

0 likes · 22 min read

Design and Implementation of a Front-End Observability System for Business Monitoring

Bilibili Tech

May 7, 2024 · Frontend Development

Design and Implementation of a Unified Front-End Request Library Based on Middleware Pattern

Bilibili created a unified front‑end request library using a Koa‑style middleware “onion” architecture—ConfigCtrl, AssembleCtrl, and RequestCtrl—to standardize error handling, cut code redundancy, improve performance, and provide consistent, extensible API calls across SSR/CSR, Vue2/Vue3, and in‑app H5 environments.

HTTPRequest libraryTypeScript

0 likes · 16 min read

Design and Implementation of a Unified Front-End Request Library Based on Middleware Pattern

HelloTech

Feb 1, 2024 · Frontend Development

Static Compilation for Multi‑Scene SaaS Car Services Using Webpack Resolve Plugins

The article explains how a custom Webpack resolve plugin enables static compilation for a multi‑scene SaaS car‑service platform by separating brand‑specific logic into suffix‑named files, allowing compile‑time branching, smaller scenario‑specific bundles, cleaner code, easier testing, and faster cold‑starts.

TypeScriptcode-splittingfrontend

0 likes · 12 min read

Static Compilation for Multi‑Scene SaaS Car Services Using Webpack Resolve Plugins

Bilibili Tech

Jan 30, 2024 · Frontend Development

Efficient Video Frame Extraction Using WebCodecs on Bilibili's Web Upload Page

Bilibili’s web upload page now uses the browser‑native WebCodecs API to decode video frames client‑side, replacing slower Canvas and Wasm‑FFmpeg pipelines, achieving 2.5–5× faster cover‑frame extraction with lower memory use, while supporting MP4/WebM and improving user experience.

MP4WebAssemblyWebCodecs

0 likes · 12 min read

Efficient Video Frame Extraction Using WebCodecs on Bilibili's Web Upload Page

HelloTech

Jan 4, 2024 · Frontend Development

Introduction to Front-End Unit Testing with Jest

This guide introduces front‑end unit testing with Jest, explaining TDD and BDD concepts, installation, writing simple and ES6/TypeScript tests, configuring coverage, using common matchers, and employing mock functions, timers, and module mocking to ensure reliable, maintainable code.

JavaScriptJestTDD

0 likes · 14 min read

Introduction to Front-End Unit Testing with Jest

Ximalaya Technology Team

Dec 12, 2023 · Frontend Development

Performance Optimization of Cloud Editing Playback: Preloading and Latency Reduction

By analyzing latency sources and introducing a pre‑loading ‘prepare’ step with new player APIs, the cloud‑editing team reduced audio start‑up delays by roughly 200 ms on average—cutting half‑second waits to under three‑hundred milliseconds and markedly improving streamer workflow.

Latency ReductionPreloadingcloud editing

0 likes · 12 min read

Performance Optimization of Cloud Editing Playback: Preloading and Latency Reduction

DeWu Technology

Dec 28, 2022 · Frontend Development

Frontend Performance Optimization for SCM Application

By shrinking HTML to under 14 KB, replacing large global packages with selective imports, introducing dynamic and lazy loading, externalizing stable libraries via CDN, and caching menu data, the SCM frontend’s common bundle dropped from 1.4 MB to below 200 KB, dramatically improving first‑paint rates and overall page‑load performance.

OptimizationSCMVue

0 likes · 11 min read

Frontend Performance Optimization for SCM Application

DeWu Technology

Dec 23, 2022 · Frontend Development

Frontend Unit Testing as Documentation: Challenges and Practices

The team combats outdated documentation and costly front‑end maintenance by treating unit tests for the use‑case layer as living documentation, using BDD‑style Given‑When‑Then tests that assert only observable behavior, which improves code readability, eases onboarding, and provides a reliable safety net for future changes.

BDDJavaScriptclean architecture

0 likes · 13 min read

Frontend Unit Testing as Documentation: Challenges and Practices

DaTaobao Tech

Aug 29, 2022 · Frontend Development

Subtoken‑TranX: Front‑end JavaScript Code Generation for Industrial Use

Subtoken‑TranX, a joint effort by Alibaba’s DaTaobao team and Peking University, converts natural‑language requirements into JavaScript by training on a curated 2,489‑pair dataset, using subtoken‑level AST generation and task‑augmented variable semantics, achieving superior accuracy over standard TranX and Transformer models and now powering Alibaba’s BizCook front‑end production platform.

ASTJavaScriptcode generation

0 likes · 12 min read

Subtoken‑TranX: Front‑end JavaScript Code Generation for Industrial Use

DaTaobao Tech

May 26, 2022 · Frontend Development

Measuring JavaScript Code Coverage and Reducing Dead Code in Front‑end Projects

By using Chrome DevTools and Istanbul/NYC to measure JavaScript coverage, developers can detect dead and low‑usage code, then convert such modules into dynamic imports via build plugins, enabling tree‑shaking and code‑splitting that reduces bundle size and speeds up first‑screen rendering.

Code CoverageInstrumentationJavaScript

0 likes · 11 min read

Measuring JavaScript Code Coverage and Reducing Dead Code in Front‑end Projects

DeWu Technology

May 23, 2022 · Frontend Development

Micro‑Frontend Architecture with Qiankun and Module Federation: Design, Implementation, and Performance

The team replaced a heavy SPA‑plus‑iframe workbench with a micro‑frontend architecture using Qiankun and Webpack 5 Module Federation, enabling independent development, caching, sandboxed isolation, and remote component integration, which cut load time, improved stability, and accelerated releases while highlighting migration challenges.

Vuefrontendmicro-frontend

0 likes · 19 min read

Micro‑Frontend Architecture with Qiankun and Module Federation: Design, Implementation, and Performance

DaTaobao Tech

Feb 21, 2022 · Frontend Development

Focused Gray Release Monitoring and Alert Configuration for Frontend Quality

To raise front‑end quality, the team implements gray‑release monitoring that triggers log analysis at a 5 % rollout, automatically generates reports within ten minutes, and uses dynamic thresholds and noise‑reduction tactics to detect errors early, enabling rapid rollback or expansion and markedly improving stability and release efficiency.

alertingfrontendgray release

0 likes · 9 min read

Focused Gray Release Monitoring and Alert Configuration for Frontend Quality

Tencent Cloud Developer

Sep 27, 2021 · Frontend Development

html2canvas Implementation Principles and Opacity Rendering Issue Analysis

The article explains html2canvas’s workflow—cloning, parsing, and rendering based on stacking contexts—and diagnoses why transparent overlays appear opaque in screenshots, revealing that the npm package lacks opacity handling; it then proposes adding an OpacityEffect class that records and applies element opacity via canvas globalAlpha to fix the issue.

CSSScreenshotcanvas

0 likes · 11 min read

html2canvas Implementation Principles and Opacity Rendering Issue Analysis

Tencent Cloud Developer

Sep 10, 2021 · Frontend Development

Front-End Performance Monitoring (RUM) and Optimization Strategies

The article introduces Tencent Cloud’s Real‑User‑Monitoring platform, explains key performance timing points and metric calculations, links RUM data to Google Web Vitals, and demonstrates a data‑driven optimization case that cut first‑screen load from 4.8 s to 3.2 s, halved resource load time, and dramatically improved CLS.

JavaScriptOptimizationPerformance Monitoring

0 likes · 16 min read

Front-End Performance Monitoring (RUM) and Optimization Strategies

Xianyu Technology

Jan 28, 2021 · Frontend Development

Frontend Design and Performance Optimization of Xianyu Community Circle

The Xianyu Community Circle front‑end was modularized into independent Circle Info, Feed, and Overlay sections, using Rax’s useReducer + useContext for shared state, while minimizing non‑shared data, extracting providers, stabilizing props, caching pages, prefetching resources, and moving overlays out of global context to cut latency, reduce re‑renders, and boost performance on low‑end devices.

OptimizationReactfrontend

0 likes · 10 min read

Frontend Design and Performance Optimization of Xianyu Community Circle

37 Interactive Technology Team

Jun 19, 2020 · Frontend Development

Webpack Multi-Page Project Build Practice

The article walks through configuring Webpack to build a multi‑page Vue application—showing why the default CLI SPA setup falls short, how to generate dynamic entry points, set output paths, apply loaders for JS, CSS, images, and use plugins such as MiniCssExtractPlugin, CopyWebpackPlugin and HtmlWebpackPlugin to produce separate bundles and HTML files for each page.

VueWebpackbuild

0 likes · 20 min read

Webpack Multi-Page Project Build Practice

vivo Internet Technology

Feb 19, 2020 · Frontend Development

What Is Front-End Development and the Evolution of Web Technologies

The article explains front‑end development as browser‑side code that renders HTML skeleton, CSS styling, and JavaScript interactivity, traces the full request‑to‑display lifecycle, recounts JavaScript’s history from 1995 to ES6, and surveys evolving paradigms such as Ajax, MVC, MVVM, SPA, SSR, and full‑stack Node.

AJAXJavaScriptMVC

0 likes · 17 min read

What Is Front-End Development and the Evolution of Web Technologies

Xianyu Technology

Oct 30, 2019 · Frontend Development

Improving Front-End Development Efficiency with Serverless ViewModel Architecture

By relocating the ViewModel layer to a serverless backend, developers can implement a single, reusable ViewModel as FaaS functions that serve web, native, and mini‑program front‑ends, dramatically cutting duplication, maintenance costs, and development effort while simplifying updates across all platforms.

EfficiencyFaaSViewModel

0 likes · 6 min read

Improving Front-End Development Efficiency with Serverless ViewModel Architecture

Didi Tech

May 23, 2019 · Frontend Development

Chameleon Cross‑Platform Framework: Standards, Protocols, and Extending New Platforms

Chameleon is a cross‑platform MVVM framework that standardizes APIs, components, DSL, and runtime protocols so a single codebase can be compiled and run on any mini‑program or native environment, with integration efforts from Didi, Mango TV, Alibaba, ByteDance and a six‑package extension guide.

MVVMOpen-sourcechameleon

0 likes · 14 min read

Chameleon Cross‑Platform Framework: Standards, Protocols, and Extending New Platforms