BestHub
Sign in
Tagged articles
3130 articles
Page 13 of 32
Alibaba Cloud Developer
Alibaba Cloud Developer
Dec 5, 2022 · Frontend Development

Why Cross-Platform Development Is Evolving: From Web Containers to Flutter

Cross‑platform development has rapidly evolved from simple web containers to sophisticated native‑rendering solutions like React Native, Weex, and Flutter, prompting a push for standardized container specifications that balance performance, consistency, and developer efficiency across the ever‑growing ecosystem of smart devices.

FlutterMobileReact Native
0 likes · 12 min read
Why Cross-Platform Development Is Evolving: From Web Containers to Flutter
Liangxu Linux
Liangxu Linux
Dec 4, 2022 · Frontend Development

Turn Any Web Page Gray with a Simple CSS Grayscale Filter

This guide explains how to apply the CSS filter grayscale() function to turn whole web pages—including images, text, and buttons—into grayscale, showing the required CSS rules, how different percentage values affect the result, and which browsers support the feature.

CSSfilterfrontend
0 likes · 4 min read
Turn Any Web Page Gray with a Simple CSS Grayscale Filter
KooFE Frontend Team
KooFE Frontend Team
Dec 4, 2022 · Frontend Development

Mastering Scalable CSS: From Early Tables to Tailwind and Modern Architectures

This article traces the evolution of CSS from its early table‑based days through the rise of responsive design, examines why large‑scale projects struggle with CSS, reviews major architecture patterns such as OOCSS, BEM and ITCSS, and explains how tools like Tailwind and CSS‑in‑JS address modern scalability challenges.

CSSScalable CSSTailwind
0 likes · 20 min read
Mastering Scalable CSS: From Early Tables to Tailwind and Modern Architectures
MoonWebTeam
MoonWebTeam
Dec 4, 2022 · Frontend Development

Why Svelte Beats Vue3 and React: Real-World Performance Gains and Core Mechanics

This article presents a comprehensive investigation of Svelte, detailing its dramatic bundle size reduction, performance improvements, compilation-based architecture, core implementation, advantages, drawbacks, and practical usage guidelines, supported by real project data, npm and GitHub statistics, and code examples to help developers confidently adopt Svelte.

CompilationJavaScriptSvelte
0 likes · 30 min read
Why Svelte Beats Vue3 and React: Real-World Performance Gains and Core Mechanics
Alibaba Cloud Native
Alibaba Cloud Native
Dec 3, 2022 · Cloud Native

How to Build Cloud‑Native Modern Web Apps with Serverless Function Compute

This article explains how front‑end engineers can transition from traditional static‑site deployment to fully cloud‑native web applications by leveraging Alibaba Cloud’s Serverless services—OSS, CDN, and Function Compute—to achieve automatic scaling, zero‑ops maintenance, cost efficiency, and enhanced security for dynamic APIs, tasks, and media processing.

BackendCloud NativeFunction Compute
0 likes · 11 min read
How to Build Cloud‑Native Modern Web Apps with Serverless Function Compute
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Dec 2, 2022 · Frontend Development

Essential Frontend Techniques: Tree‑Shaking, Code Readability, and Performance Hacks

Explore a curated collection of frontend articles covering bundler tree‑shaking, code readability tricks, precision handling with big.js, hidden CSS features, Apple‑style scrolling effects, ready‑made visual dashboard demos, and performance insights like reducing jank and mastering LightHouse workflows.

JavaScriptbundlingfrontend
0 likes · 4 min read
Essential Frontend Techniques: Tree‑Shaking, Code Readability, and Performance Hacks
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 2, 2022 · Frontend Development

How to Analyze and Optimize Frontend Bundle Size with a DIY JS Parser

This article walks through measuring bundle growth, identifying duplicate dependencies and missing tree‑shaking, building a Go‑based JavaScript parser, generating a dependency graph, handling conditional imports, applying dead‑code elimination, and finally using the tool to shrink frontend bundle size.

Tree Shakingbundledead code elimination
0 likes · 35 min read
How to Analyze and Optimize Frontend Bundle Size with a DIY JS Parser
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 30, 2022 · Frontend Development

Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)

This article explains how to use Three.js to create a realistic 3D phone product page by loading and applying multimedia assets such as custom fonts, textures, audio sources, and video textures, and demonstrates interactive features like ray‑casting for material switching and first‑person controls.

3DJavaScriptMultimedia
0 likes · 19 min read
Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)
DaTaobao Tech
DaTaobao Tech
Nov 30, 2022 · Frontend Development

From Traditional GUI to Intelligent UI: Building User‑Centred Experience

The article traces the shift from static graphical interfaces to intelligent, user‑centred designs through a three‑layer model—classic precision, behavior‑influencing intelligence, and emerging AR/VR‑ML experiences—quantifies visual information load with Shannon theory, optimizes layouts via A/B testing and maximum‑entropy analysis, and forecasts AI‑driven, multimodal, service‑oriented UI futures.

DesignUIUser experience
0 likes · 53 min read
From Traditional GUI to Intelligent UI: Building User‑Centred Experience
JD.com Experience Design Center
JD.com Experience Design Center
Nov 29, 2022 · Frontend Development

How JD’s Mini‑Program Redesign Transformed User Experience on WeChat

This article details JD’s strategic redesign of its WeChat mini‑program, outlining user‑centric insights, framework and feed upgrades, diversified navigation, brand mind‑set enhancements, and entertainment‑driven features that together create a more engaging, efficient, and enjoyable shopping experience.

UX designUser experienceWeChat Mini Program
0 likes · 13 min read
How JD’s Mini‑Program Redesign Transformed User Experience on WeChat
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 29, 2022 · Frontend Development

Comprehensive Guide to Setting Up Nuxt 3 with SSR, Routing, Layouts, Components, Plugins, and More

This article provides a step‑by‑step tutorial on installing the stable Nuxt 3 release, explaining server‑side rendering concepts, configuring routes, layouts, components, plugins, composables, Pinia, VueUse, CSS preprocessing, and best practices for building a modern frontend application.

ComposablesNuxt3SSR
0 likes · 18 min read
Comprehensive Guide to Setting Up Nuxt 3 with SSR, Routing, Layouts, Components, Plugins, and More
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 29, 2022 · Frontend Development

Common Vite Configuration Options for Efficient Frontend Development

This article provides a practical guide to essential Vite configuration options—including CSS preprocessor settings, PostCSS plugins, path aliases, server host and proxy, build output directories, and plugin usage—offering concise code examples to help frontend developers quickly set up and optimize Vite projects.

CSSConfigurationPlugins
0 likes · 11 min read
Common Vite Configuration Options for Efficient Frontend Development
Xingsheng Youxuan Technology Community
Xingsheng Youxuan Technology Community
Nov 29, 2022 · Frontend Development

How Low‑Code and AI Are Redefining Frontend Development – Inside Marvel’s Engine

This article reviews a QCon 2022 talk on low‑code and intelligent UI, outlining the evolution of low‑code concepts, decision‑making for platform adoption, the architecture of the Marvel low‑code engine (Dlibrary, DPro, visual system, canvas, drag, render, material integration), and AI‑driven smart inspection techniques, concluding with practical insights for teams facing similar challenges.

AIfrontendlow-code
0 likes · 22 min read
How Low‑Code and AI Are Redefining Frontend Development – Inside Marvel’s Engine
Alibaba Cloud Developer
Alibaba Cloud Developer
Nov 28, 2022 · Frontend Development

Why Frontend Frameworks Fail and How to Build Better Architecture

Modern front‑end frameworks like Vue and React have sparked a cult‑like devotion that often obscures deeper issues; this article examines the resulting complexity, argues that developers—not tools—are the key variable, and presents a layered, composable architecture with code examples to improve maintainability.

architecturebest practicescode organization
0 likes · 21 min read
Why Frontend Frameworks Fail and How to Build Better Architecture
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 25, 2022 · Frontend Development

Vue Compiler Overview and Sandbox Compilation Techniques

This article explores the fundamentals of Vue's compilation process, compares Vue 2 and Vue 3 compilers, demonstrates sandbox compilation with code examples, and discusses practical considerations such as handling templates, scripts, styles, and hot‑module reloading, providing developers with insights to effectively integrate Vue compilation in browser environments.

JavaScriptVuecompiler
0 likes · 17 min read
Vue Compiler Overview and Sandbox Compilation Techniques
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 25, 2022 · Frontend Development

ECharts Configuration‑Driven Development: From Basics to Advanced Component Design

This article explains why ECharts is a popular choice for large‑screen dashboards, introduces the configuration‑driven mindset, demonstrates graphic and animation techniques, and walks through building a reusable Vue 3 base component with dynamic resizing, theming, and empty‑state handling.

ConfigurationData visualizationECharts
0 likes · 13 min read
ECharts Configuration‑Driven Development: From Basics to Advanced Component Design
Liangxu Linux
Liangxu Linux
Nov 24, 2022 · Frontend Development

How to Use CSS mask-image to Keep Bilibili Subtitles From Covering Characters

This article explains how a single mask image and the CSS mask-image property can be used to prevent subtitles from overlapping on‑screen characters in Bilibili videos, providing a lightweight demo with HTML/CSS code, visual results, and practical cautions about browser support.

BilibiliCSSWeb Development
0 likes · 4 min read
How to Use CSS mask-image to Keep Bilibili Subtitles From Covering Characters
Watermelon Frontend Tech Team
Watermelon Frontend Tech Team
Nov 24, 2022 · Frontend Development

Why Qwik’s Resumable Architecture Beats Traditional Hydration

This article explains how Qwik, a full‑stack SSR framework, uses pre‑compilation, resumable rendering, and fine‑grained event handling to avoid the heavy runtime and hydration overhead of traditional Virtual DOM frameworks, offering superior first‑paint performance and lower JavaScript payloads.

QwikResumableSSR
0 likes · 20 min read
Why Qwik’s Resumable Architecture Beats Traditional Hydration
DeWu Technology
DeWu Technology
Nov 24, 2022 · Frontend Development

API Documentation‑Driven Development in Front‑End Functional Teams

In Chinese internet firms, front‑end development has grown into large specialized teams, and DeWu’s API‑documentation‑driven development model—presented by former Alibaba leader Zhu Junbiao and explained by Chen Ziyu—demonstrates how an API‑driven workflow on the Mooncake platform resolves collaboration bottlenecks and boosts development efficiency.

API documentationLowCodedevelopment process
0 likes · 3 min read
API Documentation‑Driven Development in Front‑End Functional Teams
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 24, 2022 · Frontend Development

Why Cross‑Platform Development Keeps Evolving and How to Future‑Proof Your Code

This article reviews the evolution of cross‑platform technologies—from web containers to native‑container frameworks and self‑rendering engines—examining their changing trade‑offs, the push for standardization, and practical strategies to keep business code stable across ever‑fragmented devices.

MobileReact Nativecross‑platform
0 likes · 15 min read
Why Cross‑Platform Development Keeps Evolving and How to Future‑Proof Your Code
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 22, 2022 · Frontend Development

When Iframe Beats Micro‑Frontend: A Practical Guide to Seamless System Integration

This article examines the advantages and drawbacks of using iframes for embedding one system into another, outlines suitable scenarios, and provides a step‑by‑step implementation—including URL synchronization, navigation handling, and loading management—using React and plain JavaScript to achieve a smooth, micro‑frontend‑free integration.

System Integrationfrontendiframe
0 likes · 20 min read
When Iframe Beats Micro‑Frontend: A Practical Guide to Seamless System Integration
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 22, 2022 · Frontend Development

React Scheduler: Implementing Idle‑Time Execution and Time Slicing with requestAnimationFrame, postMessage and MessageChannel

This article explains how React simulates requestIdleCallback by combining requestAnimationFrame, postMessage, and MessageChannel to execute work during browser idle periods, detailing the evolution from the early rAF‑postMessage approach in v16 to the message‑loop implementation in v18 and providing simplified source code examples.

MessageChannelReactTime Slicing
0 likes · 14 min read
React Scheduler: Implementing Idle‑Time Execution and Time Slicing with requestAnimationFrame, postMessage and MessageChannel
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 22, 2022 · Frontend Development

Building a Management Backend with Ant Design 5, React 18, Vite, and TypeScript

This article explains why Ant Design 5 is preferred over MUI, then walks through configuring Vite and tsconfig, creating login and home pages, designing a recursive routing system, implementing lazy loading, menu generation, route listening hooks, tab management with KeepAlive, theme customization, and dynamic routing with React Router 6.4.3 for a full‑featured admin dashboard.

Ant DesignMobXReact
0 likes · 17 min read
Building a Management Backend with Ant Design 5, React 18, Vite, and TypeScript
ByteFE
ByteFE
Nov 21, 2022 · Frontend Development

Understanding and Mastering JavaScript Promises: Basics, Advanced Usage, and Best Practices

This article provides a comprehensive overview of JavaScript Promises, covering their definition, states, basic usage, error handling, chaining, common APIs, best practices, advanced scenarios such as preloading and cancellation, as well as manual implementation techniques, to help front‑end developers deepen their asynchronous programming skills.

AsyncError HandlingJavaScript
0 likes · 25 min read
Understanding and Mastering JavaScript Promises: Basics, Advanced Usage, and Best Practices
Ctrip Technology
Ctrip Technology
Nov 21, 2022 · Frontend Development

Design and Implementation of Ctrip's New Homepage: Island Architecture, Component Development, and Data Configuration System

The article presents a comprehensive case study of Ctrip's 2022 PC homepage redesign, detailing the motivations, requirement analysis, island‑style architecture, cross‑team component development, server‑side rendering, public component challenges, and the dynamic data‑configuration platform that together enable fast, maintainable, and scalable web delivery.

Component ArchitectureIsland ArchitectureNode.js
0 likes · 22 min read
Design and Implementation of Ctrip's New Homepage: Island Architecture, Component Development, and Data Configuration System
Architecture Digest
Architecture Digest
Nov 21, 2022 · Fundamentals

JSON Hero: A Simple and Powerful JSON Viewer Tool

JSON Hero is a lightweight, feature‑rich JSON utility that offers multiple viewing modes, easy installation via Git and npm, drag‑and‑drop file handling, searchable tree structures, and shareable links, making JSON inspection and editing more intuitive for developers.

Data visualizationJSONfrontend
0 likes · 4 min read
JSON Hero: A Simple and Powerful JSON Viewer Tool
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Nov 19, 2022 · Frontend Development

Top Frontend Techniques: Lodash, Iterators, Web3D, Performance Tips

This guide surveys essential frontend topics—including deep dives into lodash usage, iterator and generator concepts, Web3D visualizations, hybrid remote debugging, long‑task performance optimization, Chrome DevTools measurement, and creative image‑loading effects—offering practical insights for modern web developers.

Web DevelopmentWeb3Ddebugging
0 likes · 3 min read
Top Frontend Techniques: Lodash, Iterators, Web3D, Performance Tips
Sohu Tech Products
Sohu Tech Products
Nov 17, 2022 · Frontend Development

A Comprehensive Guide to Building a Flexible Axios Wrapper with Interceptors, Request Cancellation, and TypeScript in Vue3

This article demonstrates how to create a reusable Axios wrapper for Vue3 projects, covering basic class‑based encapsulation, flexible global and instance interceptors, custom request configuration types, request cancellation management, and practical testing examples, all written in TypeScript.

axiosfrontendinterceptors
0 likes · 13 min read
A Comprehensive Guide to Building a Flexible Axios Wrapper with Interceptors, Request Cancellation, and TypeScript in Vue3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 17, 2022 · Frontend Development

My Journey Learning Frontend: Vue, React, Component Libraries, and Full‑Stack Integration

The article shares a developer's practical experience of transitioning from backend to frontend by learning Vue and React, exploring component libraries, tackling layout and styling challenges, and integrating the frontend build into a backend Maven project for a complete gateway console.

Build AutomationComponent LibrariesReact
0 likes · 15 min read
My Journey Learning Frontend: Vue, React, Component Libraries, and Full‑Stack Integration
vivo Internet Technology
vivo Internet Technology
Nov 16, 2022 · Industry Insights

Vivo 2022 Dev Conference: Frontend Compiler, Low‑Code, Real‑Time & Cloud‑Native

The 2022 Vivo developer conference showcased a series of technical breakthroughs—including a custom wepy‑chameleon compiler for frontend upgrades, low‑code platforms for backend and game development, a real‑time computing platform built on Flink, advanced graph scheduling, cloud‑native container strategies, monitoring enhancements, database automation, and large‑scale messaging middleware—highlighting Vivo's comprehensive push toward efficiency and innovation across its internet services.

Cloud NativeContainerMessaging
0 likes · 14 min read
Vivo 2022 Dev Conference: Frontend Compiler, Low‑Code, Real‑Time & Cloud‑Native
Baidu MEUX
Baidu MEUX
Nov 16, 2022 · Frontend Development

Mastering X, Y, Z Axes: Design Rules for Enterprise UI Layouts

This article explores how to structure B‑end interfaces using three spatial axes—X for horizontal expansion, Y for vertical information handling, and Z for stacking order—offering concrete layout patterns, adaptation strategies, and layering guidelines to create logical, scalable enterprise UIs.

UI designY-axisZ-axis
0 likes · 11 min read
Mastering X, Y, Z Axes: Design Rules for Enterprise UI Layouts
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 16, 2022 · Frontend Development

Understanding Vite: A Comprehensive Guide to Its Advantages Over Webpack

This article explains what build tools are, compares Vite and Webpack in terms of performance and architecture, and details Vite's features such as dependency pre‑bundling, CSS handling, static asset imports, TypeScript support, environment variables, and production build configuration, providing practical code examples for frontend developers.

JavaScriptTypeScriptfrontend
0 likes · 14 min read
Understanding Vite: A Comprehensive Guide to Its Advantages Over Webpack
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 15, 2022 · Frontend Development

Building a Seamless Infinite Scroll Component with Vue 3

This article explains why infinite scrolling is essential for large‑screen dashboards, analyses three implementation strategies, and provides a complete Vue 3 component—including BEM‑styled markup, GSAP‑driven animation, slot‑based content insertion, and optional hover‑pause behavior—to achieve a smooth, endless scrolling list.

BEMComponent DesignGSAP
0 likes · 14 min read
Building a Seamless Infinite Scroll Component with Vue 3
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Nov 11, 2022 · Frontend Development

Explore Frontend Trends: Vite, Low‑Code, Functional Programming, JMeter, and Security

This collection highlights essential frontend topics—including Vite's performance debate, low‑code concepts, functional programming fundamentals, JMeter performance testing, strategies for managing module dependencies and theme switching, as well as practical guidance on preventing XSS and CSRF attacks—offering developers a concise roadmap to modern web development.

frontendfunctional programminglow-code
0 likes · 5 min read
Explore Frontend Trends: Vite, Low‑Code, Functional Programming, JMeter, and Security
Huolala Tech
Huolala Tech
Nov 10, 2022 · Frontend Development

Seamlessly Migrate Taro 2.x to 3.x with Babel AST Transformations

This article explains how to upgrade Taro 2.x projects to Taro 3.x by converting source code into an AST using Babel, programmatically editing imports, configs, routers, and styles, and then generating the updated code, complete with practical code examples and migration tips.

ASTJavaScriptTaro
0 likes · 14 min read
Seamlessly Migrate Taro 2.x to 3.x with Babel AST Transformations
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 9, 2022 · Frontend Development

How to Grow from Junior to Eminent Frontend Engineer: A Three‑Stage Career Blueprint

This article shares a front‑end engineer’s personal roadmap, outlining three development stages—mastering core skills, achieving independent delivery, and finding a personal mission—while offering practical advice on technical depth, cross‑stack knowledge, leadership, and long‑term career growth.

Career Developmentengineering leadershipfrontend
0 likes · 12 min read
How to Grow from Junior to Eminent Frontend Engineer: A Three‑Stage Career Blueprint
政采云技术
政采云技术
Nov 8, 2022 · Industry Insights

How Small Big‑Data Frontend Teams Can Thrive: A Survival Guide

This guide outlines the essential concepts of big data, the roles of a front‑end data team, practical workflow steps, platform architecture, industry benchmarks, and actionable strategies for small teams to improve efficiency, visualization capabilities, and digital operations.

Big DataData PlatformData visualization
0 likes · 14 min read
How Small Big‑Data Frontend Teams Can Thrive: A Survival Guide
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Nov 4, 2022 · Frontend Development

Top Frontend Tech Insights: WebCodecs Export, Node.js Debugging, JS Error Handling & More

This article curates the latest frontend engineering practices, covering WebCodecs video export, a Node.js troubleshooting guide, JavaScript error handling tips, Apple‑style scroll effects, Turbopack performance benchmarks, monorepo strategies, large‑scale system design, and productivity measurement at Google, all aimed at boosting developer expertise.

JavaScriptMonorepoScalability
0 likes · 4 min read
Top Frontend Tech Insights: WebCodecs Export, Node.js Debugging, JS Error Handling & More
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 4, 2022 · Frontend Development

Full-Stack Frontend Implementation of a Publishing Platform: Pagination, CRUD, and Vue‑Element‑Plus Integration

This tutorial walks through the front‑end portion of a publishing platform series, demonstrating how to build a Vue 3 and Element‑plus UI with TailwindCSS, implement server‑side pagination via Koa, integrate Axios with proxy and interceptors, and add complete CRUD operations—including create, edit, and delete dialogs—while showcasing the essential code snippets.

CRUDElement PlusKoa
0 likes · 16 min read
Full-Stack Frontend Implementation of a Publishing Platform: Pagination, CRUD, and Vue‑Element‑Plus Integration
ELab Team
ELab Team
Nov 2, 2022 · Frontend Development

Mastering Lighthouse: How to Use, Configure, and Interpret Web Performance Audits

This article explains what Lighthouse is, how to run it via Chrome extensions, DevTools, CLI or Node.js, details its internal architecture, driver and pass configuration, gatherer and trace processing, and shows how audits generate performance reports with scoring based on HTTP Archive data.

Chrome DevToolsLighthousePerformance Audits
0 likes · 17 min read
Mastering Lighthouse: How to Use, Configure, and Interpret Web Performance Audits
Programmer DD
Programmer DD
Nov 2, 2022 · Frontend Development

React vs Vue: Which Frontend Framework Should You Choose?

This comprehensive guide examines the key factors for selecting between React and Vue—including team suitability, compatibility, usage patterns, ecosystem, cross‑platform support, performance benchmarks, mental models, community size, and licensing—to help developers make an informed technology‑stack decision.

ReactTechnology SelectionVue
0 likes · 25 min read
React vs Vue: Which Frontend Framework Should You Choose?
phodal
phodal
Oct 31, 2022 · Frontend Development

How Perspective Delivers Real‑Time Financial Visualizations with WASM and Apache Arrow

The article examines the open‑source Perspective library—originating from J.P. Morgan’s FinOS—and its multi‑language architecture that combines C++/WASM, Rust, JavaScript, and Python to deliver high‑performance, framework‑free data visualizations for real‑time financial analytics, highlighting its use of Apache Arrow, Web Components, and Jupyter integration.

Apache ArrowData visualizationPython
0 likes · 8 min read
How Perspective Delivers Real‑Time Financial Visualizations with WASM and Apache Arrow
Java Captain
Java Captain
Oct 30, 2022 · Frontend Development

Technical Guide to Building a Real-Time Data Visualization Dashboard with Echarts and Java Backend

This article presents a step‑by‑step tutorial for creating a dynamic, real‑time data visualization dashboard using Echarts on the front end and a Java‑based backend, covering design mockups, requirement analysis, architecture, environment setup, code structure, deployment commands, and source code acquisition.

EChartsJSONTutorial
0 likes · 4 min read
Technical Guide to Building a Real-Time Data Visualization Dashboard with Echarts and Java Backend
Architecture Digest
Architecture Digest
Oct 29, 2022 · Frontend Development

Design and Implementation of a General‑Purpose Data Visualization Big‑Screen Platform

This article presents the overall design, technology selection, architecture, and core implementation details—including adaptive layout, component development workflow, drag‑and‑drop handling, and state push mechanisms—of a low‑code, reusable big‑screen data visualization platform built with React and modern front‑end visualization libraries.

Big ScreenData visualizationReact
0 likes · 15 min read
Design and Implementation of a General‑Purpose Data Visualization Big‑Screen Platform
Baidu Intelligent Cloud Tech Hub
Baidu Intelligent Cloud Tech Hub
Oct 28, 2022 · Frontend Development

Designing Flexible Low‑Code Component Systems: Insights from Baidu’s AI‑SuDa Platform

This article explains how Baidu AI Cloud's low‑code platform AI‑SuDa builds a flexible component system, covering the transition from UI libraries to declarative low‑code components, detailed React examples, visual editor configuration, component registration, data binding, and event‑action mechanisms for efficient application development.

Component DesignReactVisual Editor
0 likes · 21 min read
Designing Flexible Low‑Code Component Systems: Insights from Baidu’s AI‑SuDa Platform
Top Architect
Top Architect
Oct 28, 2022 · Backend Development

Guidelines for Front‑End/Back‑End Separation and API Specification

The article explains why front‑end and back‑end should be separated, outlines the challenges of integration, describes the responsibilities and development process for a clean API contract, and provides detailed request/response specifications with code examples for building a maintainable SPA architecture.

BackendSPAapi-design
0 likes · 11 min read
Guidelines for Front‑End/Back‑End Separation and API Specification
vivo Internet Technology
vivo Internet Technology
Oct 26, 2022 · Frontend Development

Migrating WePY Mini‑Program to UniApp: Compiler Design and Implementation

The Vivo front‑end team built a custom compiler that automatically transforms WePY mini‑program files—including templates, scripts, components, and pages—into UniApp Vue code, cutting the estimated 25‑person‑day migration to seconds, delivering a bug‑free launch and paving the way for open‑sourcing the tool.

JavaScriptUniappbabel
0 likes · 32 min read
Migrating WePY Mini‑Program to UniApp: Compiler Design and Implementation
ByteDance Web Infra
ByteDance Web Infra
Oct 20, 2022 · Frontend Development

Optimizing ByteDance Frontend Monitoring SDK: Size Reduction, Benchmarking, and Real‑World Performance Analysis

This article explains how ByteDance’s frontend monitoring SDK is continuously optimized for bundle size and runtime performance through micro‑ and macro‑level code refactoring, benchmark testing with Benny and Puppeteer, and real‑world analysis using Perfsee Lab, ultimately achieving minimal impact on page load metrics.

PuppeteerSDKbenchmark
0 likes · 18 min read
Optimizing ByteDance Frontend Monitoring SDK: Size Reduction, Benchmarking, and Real‑World Performance Analysis
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 18, 2022 · Frontend Development

Implementing Vue 3 Computed API from Scratch

This article explains how to recreate Vue 3's computed API using the composition API, covering getter/setter handling, effect integration, caching with a dirty flag, dependency tracking, and trigger mechanisms, and provides step‑by‑step code examples to build a functional ComputedRef implementation.

Composition APIJavaScriptReactivity
0 likes · 10 min read
Implementing Vue 3 Computed API from Scratch
Bilibili Tech
Bilibili Tech
Oct 18, 2022 · Frontend Development

Building a Slate.js Rich Text Editor: Toolbar, Lists, and Image Upload

This tutorial walks through the practical steps of extending a Slate.js rich‑text editor with toolbar actions, multi‑level list handling, and a robust image‑upload solution, providing code snippets, implementation details, and design considerations for each feature.

JavaScriptListsReact
0 likes · 12 min read
Building a Slate.js Rich Text Editor: Toolbar, Lists, and Image Upload
Laravel Tech Community
Laravel Tech Community
Oct 17, 2022 · Frontend Development

Avue.js v2.10.2 Release Overview and Features

The Avue.js framework, a lightweight wrapper of Element UI that emphasizes data‑driven views, introduces version 2.10.2 with new input components, several optimizations, and bug fixes while maintaining ES5 browser compatibility and offering high reusability for table and form scenarios.

Avue.jsElement UIJavaScript
0 likes · 3 min read
Avue.js v2.10.2 Release Overview and Features
ELab Team
ELab Team
Oct 14, 2022 · Frontend Development

How to Prevent CSS Conflicts in Micro‑Frontends with Garfish and Shadow DOM

This article explains why class name and global element style conflicts occur in micro‑frontend architectures, and presents two main strategies—style naming with priority rules and host‑environment isolation using Shadow DOM or Garfish runtime plugins—to achieve reliable CSS isolation across parent and child applications.

CSSGarfishMicro Frontends
0 likes · 11 min read
How to Prevent CSS Conflicts in Micro‑Frontends with Garfish and Shadow DOM
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 14, 2022 · Frontend Development

Deep Dive into Vue Router 4 Component Navigation Guards

This article explains the internal implementation of component‑level navigation guards in Vue Router 4, covering guard categories, the full navigation lifecycle, the execution mechanism, and detailed source‑code analysis with examples of extractComponentsGuards, beforeRouteUpdate, beforeRouteEnter, and beforeRouteLeave.

Component GuardJavaScriptNavigation Guard
0 likes · 12 min read
Deep Dive into Vue Router 4 Component Navigation Guards
JD Retail Technology
JD Retail Technology
Oct 14, 2022 · Industry Insights

Key Front‑End Innovations from JD’s 2022 Tech Salon: AR/VR, Low‑Code & More

The 2022 JD Front‑End Technology Salon gathered experts from leading companies to share practical insights on virtual digital humans, Node.js monitoring, lightweight cross‑platform rendering, low‑code platforms, micro‑frontend solutions, and other cutting‑edge front‑end technologies driving business growth.

AR/VRTech Conferencefrontend
0 likes · 13 min read
Key Front‑End Innovations from JD’s 2022 Tech Salon: AR/VR, Low‑Code & More
vivo Internet Technology
vivo Internet Technology
Oct 13, 2022 · Frontend Development

Design and Implementation of a General‑Purpose Data Visualization Big‑Screen Platform

The paper presents a low‑code, schema‑driven big‑screen visualization platform built with React, ECharts, D3 and related libraries, detailing its four‑module architecture, adaptive layout techniques, reusable component workflow, drag‑and‑drop enhancements, and WebSocket‑based state management, and outlines future extensions such as a component marketplace and 3D rendering.

Big ScreenDashboardData visualization
0 likes · 15 min read
Design and Implementation of a General‑Purpose Data Visualization Big‑Screen Platform
ByteDance Terminal Technology
ByteDance Terminal Technology
Oct 13, 2022 · Frontend Development

Optimizing the Size and Performance of a Frontend Monitoring SDK

This article explains how ByteDance's frontend monitoring SDK was systematically reduced in bundle size and runtime overhead through micro‑optimizations such as avoiding long class names, using functional patterns, minimizing polyfills, splitting files, leveraging Puppeteer‑based benchmarks, and applying requestIdleCallback scheduling to improve user experience on both web and mobile platforms.

SDKbenchmarkbundle size
0 likes · 19 min read
Optimizing the Size and Performance of a Frontend Monitoring SDK
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 13, 2022 · Frontend Development

Why React Excels in Cross‑Platform Dynamic Development: Core Advantages and Implementation Details

The article explains why React is well‑suited for cross‑platform dynamic development, detailing its data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, Taro reconciler adaptations, and independent event system, and shows how React can serve as both a DSL and a full runtime for mobile and web.

FiberJSXReact
0 likes · 12 min read
Why React Excels in Cross‑Platform Dynamic Development: Core Advantages and Implementation Details
NetEase Smart Enterprise Tech+
NetEase Smart Enterprise Tech+
Oct 12, 2022 · Frontend Development

Designing a Scalable Multilingual Component for Modern Frontend Apps

This article explains how NetEase Qiyu built a high‑cohesion multilingual component using React context and hooks, transformed tree‑structured language data for component libraries, and created a VSCode plugin to automate i18n key replacement, enabling efficient multi‑language support for their customer‑service console.

Component LibraryReactVSCode plugin
0 likes · 14 min read
Designing a Scalable Multilingual Component for Modern Frontend Apps
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 11, 2022 · Frontend Development

Deep Dive into Vue Router 4 Navigation Guard Source Code

This article thoroughly explains the core mechanisms of Vue Router 4 navigation guards, covering global, per‑route, and component guards, their classification, execution flow, and the underlying source‑code implementations such as useCallbacks, guardToPromiseFn, and runGuardQueue.

JavaScriptNavigation GuardVue-router
0 likes · 13 min read
Deep Dive into Vue Router 4 Navigation Guard Source Code
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 11, 2022 · Frontend Development

Testing React Hooks with Jest and React Testing Library

This article provides a comprehensive guide on unit testing custom React Hooks using Jest, renderHook, act, and the React Testing Library, covering examples such as useCounter, useEventListener, useHover, and useMouse with detailed code snippets and best‑practice recommendations.

JavaScriptJestReact
0 likes · 16 min read
Testing React Hooks with Jest and React Testing Library
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Oct 11, 2022 · Frontend Development

Mastering Recoil: Advanced State Management Techniques for React

This article provides a comprehensive guide to Recoil, Facebook's React state‑management library, covering its graph‑based architecture, atoms and selectors, family APIs for bulk state, async data handling with Suspense and Loadable, snapshot usage for SSR and time‑travel, external synchronization, and practical tips for reducing mental load.

AsyncReactRecoil
0 likes · 14 min read
Mastering Recoil: Advanced State Management Techniques for React
DaTaobao Tech
DaTaobao Tech
Oct 9, 2022 · Frontend Development

Can a Pure Front‑End Container Eliminate the Web‑Native Performance Gap?

The article analyses the current state of front‑end performance, explains why hybrid solutions fall short of native experiences, and introduces Lath – a pure front‑end container that turns any web page into a seamless SPA with advanced window management, smooth interactions, and progressive enhancement.

LathSPAWeb Container
0 likes · 21 min read
Can a Pure Front‑End Container Eliminate the Web‑Native Performance Gap?
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 9, 2022 · Frontend Development

10 Real‑World Vue 3 Migration Scenarios Every Developer Should Master

This article walks through ten common Vue 3 migration scenarios—parent‑child data flow, two‑way binding, router navigation, context access, slots, component caching, logic reuse, lifecycle hooks, global APIs, and TypeScript integration—providing clear explanations and complete code examples for each case.

Composition APIScript SetupTypeScript
0 likes · 16 min read
10 Real‑World Vue 3 Migration Scenarios Every Developer Should Master
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 8, 2022 · Frontend Development

Understanding the Singleton Pattern in JavaScript: Concepts, Implementations, and Real‑World Applications

This article explains the singleton design pattern, shows standard and lazy implementations in JavaScript with code examples, discusses reducing global variable pollution, and demonstrates practical usage in popular front‑end libraries such as Vuex, Ant Design message, and Axios request cancellation.

JavaScriptSingletonVuex
0 likes · 11 min read
Understanding the Singleton Pattern in JavaScript: Concepts, Implementations, and Real‑World Applications
Sohu Tech Products
Sohu Tech Products
Oct 7, 2022 · Frontend Development

How GOV.UK Removed jQuery and Measured Its Performance Impact

In March, the UK government’s GOV.UK site eliminated jQuery from all front‑end applications, detailing the reasons, the removal process, and the resulting performance gains for users, especially on low‑spec devices, through extensive lab testing and real‑user monitoring.

GOV.UKJavaScriptWeb Optimization
0 likes · 7 min read
How GOV.UK Removed jQuery and Measured Its Performance Impact
ByteFE
ByteFE
Sep 30, 2022 · Frontend Development

Curated Technical Reads: WebAssembly Runtime, JavaScript Frameworks, Component Preview, Web 3D, CSS Transform, JS Utility Methods, and CesiumJS

This newsletter curates a selection of technical articles covering custom WebAssembly JavaScript runtimes, the evolution of JavaScript frameworks competing with native SDKs, fast component preview and debugging, an introduction to Web 3D graphics, the new CSS transform individual property, essential JavaScript utility methods, and an overview of CesiumJS for 3D earth visualization.

CSSCesiumJSJavaScript
0 likes · 6 min read
Curated Technical Reads: WebAssembly Runtime, JavaScript Frameworks, Component Preview, Web 3D, CSS Transform, JS Utility Methods, and CesiumJS
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 30, 2022 · Frontend Development

Enhanced ES‑Check Implementation with Multi‑File Detection, HTML Support, and SourceMap Parsing

This article examines existing ES‑check tools, compares community and mpx implementations, and presents a comprehensive enhanced version that supports multi‑file detection, HTML parsing, source‑map resolution, and both CLI and library usage, detailing its underlying principles, code examples, and practical advantages for frontend development.

CLICompatibilityJavaScript
0 likes · 20 min read
Enhanced ES‑Check Implementation with Multi‑File Detection, HTML Support, and SourceMap Parsing
ELab Team
ELab Team
Sep 28, 2022 · Frontend Development

Master WebGL & Three.js: From Basics to 3D Rendering in the Browser

This article guides beginners through the fundamentals of computer graphics, explaining OpenGL, WebGL, GLSL, and the rendering pipeline, then demonstrates practical Three.js code for setting up scenes, cameras, lights, materials, and textures to create interactive 3D web experiences.

3D renderingGPUGraphics
0 likes · 20 min read
Master WebGL & Three.js: From Basics to 3D Rendering in the Browser
DataFunSummit
DataFunSummit
Sep 27, 2022 · Frontend Development

Web Watermark Techniques: Visible, Dynamic, and Invisible Watermarks

This article explains various web watermark methods—including simple visible logos, full‑page overlays, dynamic canvas‑generated marks, SVG‑based text watermarks, and robust invisible (blind) watermarks—while covering implementation details, security considerations, and protection mechanisms such as Shadow DOM and MutationObserver.

CanvasSVGShadow DOM
0 likes · 16 min read
Web Watermark Techniques: Visible, Dynamic, and Invisible Watermarks
MoonWebTeam
MoonWebTeam
Sep 25, 2022 · Frontend Development

How Qwik Achieves Ultra‑Fine Lazy Loading to Boost Web Performance

This article examines Builder.io's performance optimization case, reviews the evolution of lazy‑loading techniques in front‑end development, and explains how Qwik implements ultra‑fine-grained lazy loading and prefetching to eliminate costly hydration and improve page interactivity.

QwikSSRWeb
0 likes · 18 min read
How Qwik Achieves Ultra‑Fine Lazy Loading to Boost Web Performance
ELab Team
ELab Team
Sep 24, 2022 · Frontend Development

Building a Tiny Custom JavaScript Runtime with Duktape and WebAssembly

This article explains how to create a lightweight, embeddable JavaScript runtime using Duktape, compile it to WebAssembly, expose custom APIs, and integrate it into a web-based login greeter, highlighting implementation steps, code examples, and potential use cases.

DuktapeEmbeddingJavaScript
0 likes · 8 min read
Building a Tiny Custom JavaScript Runtime with Duktape and WebAssembly
Top Architect
Top Architect
Sep 24, 2022 · Frontend Development

Guidelines for Frontend‑Backend Separation and API Specification

This article explains why and how to separate frontend and backend responsibilities, outlines the evolution from MVC to SPA architectures, and provides detailed API request and response conventions—including JSON formats, pagination, and special field handling—to improve collaboration and reduce integration effort.

BackendSPAapi-design
0 likes · 10 min read
Guidelines for Frontend‑Backend Separation and API Specification