This article explains how the new NavigateEvent API replaces scattered click, submit, and popstate listeners with a single, centralized navigation handler, showing practical code examples, interception logic, cancellation signals, scroll control, and when to adopt or avoid it in modern web apps.
This guide explains why SPA pages struggle with SEO, outlines the challenges of client‑side rendering, and presents three technical solutions—including SSR, headless browsers, and a PHP‑based reverse‑proxy architecture—complete with Nginx configuration and implementation steps.
The article dispels the myth that front‑end development is simple by outlining common misconceptions, detailing the many technical, design, performance, security, and collaboration challenges involved, and emphasizing its critical role in delivering modern, responsive, and competitive web applications.
This article explains why monitoring route changes in React single‑page applications is crucial, compares three primary techniques—useLocation, useNavigate, and withRouter—provides practical code examples, evaluates their pros and cons, and offers performance‑optimisation tips for reliable routing handling.
The 2023 NetEase Cloud Music annual‑report front‑end case study details how sub‑second first‑screen loads, SPA routing with TypeScript, GPU‑accelerated animations, optimized media handling, multi‑layer quality monitoring, and a unified development platform together boost performance, reliability, and engineering efficiency, driving higher DAU and share‑rate.
This article explains a custom Webpack plugin and React component solution that combines code splitting, lazy loading, and preloading to reduce first‑screen resource size, avoid long loading times, and improve user experience in SPA applications.
This article discusses the evolution from MVC‑based backend‑centric development to modern frontend‑backend separation, explains the benefits of clear responsibility division, outlines the SPA era with Ajax, and provides a detailed V1.0.0 API specification including request/response formats, pagination, and special field conventions.
This article reviews the 2023 front‑end framework landscape, summarizing survey data, current trends such as hydration, SPA and JAMstack, and providing detailed descriptions of the eleven most popular frameworks—from React and Angular to Qwik—helping developers choose the right tool for their projects.
This article explains why and how to separate frontend and backend development, outlines the evolution from MVC to SPA architectures, and provides detailed API design standards—including request/response formats, pagination, and special data types—to improve collaboration, reduce integration effort, and prepare for future front‑end‑centric trends.
This article explains why front‑back separation is needed, describes the evolution from MVC to SPA, proposes a contract‑first approach, outlines development processes, and provides a detailed V1.0.0 API specification with request/response formats, pagination, and special content rules.
This article provides an in‑depth technical overview of React Router v6, covering client‑side routing modes (Hash and History), the library’s file structure, core architecture, key components such as BrowserRouter, Route, useRoutes, and common hooks like useLocation, useNavigate, useParams, illustrating their implementations with code snippets and diagrams.
The article reviews Liferay DXP’s latest capabilities—including modular architecture, semantic versioning, a shift from monolith to microservices, exposed services, faster page refresh via Senna.js SPA, broader tool support, and Java component reuse—highlighting benefits for developers and large‑scale deployments.
This article explains the limitations of using History API for SPA route guards, compares two common workarounds, and introduces the new Navigation API as a more centralized and native solution for handling navigation events, transitions, and abortable fetches in modern front‑end development.
This article explores the limitations of using History API for SPA route guards, presents two common workarounds, and introduces Chrome's Navigation API as a more centralized solution, detailing its events, transition handling, entry management, and current compatibility concerns.
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.
The article explains the origins and advantages of the Islands architecture, compares MPA and SPA approaches, details how frameworks like Astro and Fresh implement Islands, and shares practical insights and performance data from the author’s own Island.js project.
This article presents a comprehensive micro‑frontend solution for H5 e‑commerce sites, covering background analysis, problem identification, architectural design with BFF layer, code examples for registration, routing, and progressive migration, and concludes with the benefits of modular, SEO‑friendly front‑end development.
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.
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.
The article explains why front‑back end separation is needed, describes the evolution from MVC to SPA, outlines responsibility separation, development workflow, and presents a detailed API specification including request/response formats, pagination, and special data handling rules.
Front‑end development has progressed from early back‑end‑only sites to a distinct discipline covering HTML, CSS, and JavaScript, embracing SPA techniques, micro‑frontend architectures, and full‑stack capabilities via Node.js and BFF layers, requiring engineers to grasp both client presentation and server‑side concepts for collaborative, modular, reusable web applications.
This article explains the motivations for separating frontend and backend, outlines the evolution from MVC to SPA architectures, details responsibilities, development workflows, and provides a comprehensive API specification including request/response formats, special data handling, and future frontend trends.
This article explains why front‑end and back‑end separation is essential, describes the SPA‑based architecture, outlines practical steps for responsibility division, development workflow, and implementation, and provides a detailed V1.0.0 API specification with request and response formats.
This article explains why and how to separate front‑end and back‑end responsibilities, introduces the SPA‑based architecture, outlines development processes, and provides a detailed API specification (including request/response formats, pagination, and special field rules) to improve collaboration and reduce integration effort.
The article explains client‑side routing for single‑page applications, detailing three approaches—hash mode using location.hash and onhashchange, history mode leveraging the HTML5 History API’s pushState/replaceState with popstate handling, and memory mode storing routes in JavaScript or localStorage—plus their trade‑offs regarding URL readability, SEO, server configuration, and browser support.
This article traces the evolution of routing—from early server‑side page serving through Ajax‑enabled SPAs and modern front‑end frameworks—to the emerging “big front‑end” that unifies navigation across Web, Android, iOS and Flutter, outlining core goals of URL‑page mapping and a centralized routing management system.
This article explains the evolution from MVC to SPA, highlights the pain points of tightly coupled front‑end and back‑end development, and provides concrete responsibility separation, development processes, and a detailed API specification to enable efficient, loosely‑coupled collaboration in modern web projects.
This article explains what memory leaks are, how to identify them in Vue SPA projects using Chrome's memory tools, lists common leak patterns, and provides practical code‑level solutions—including proper event unbinding, timer cleanup, and correct use of keep‑alive—to keep your application performant.
This article explains what memory leaks are in JavaScript, how to detect them using Chrome's memory tools, enumerates common causes in Vue SPAs, and provides practical solutions and code examples—including event unbinding and keep‑alive refactoring—to effectively eliminate leaks and improve performance.
This article explains why front‑end and back‑end should be separated, describes the evolution from MVC to SPA, outlines responsibilities, development workflow, and provides a detailed version‑1.0.0 API contract including request/response formats, pagination, special data types, and mock‑server usage.
This article explains the core concepts, basic usage, nested routing, parameter handling, Switch behavior, browser and hash modes, underlying path‑to‑regexp dependency, and integration with Dva, providing practical code examples and best‑practice recommendations for React Router in modern single‑page applications.
The DeWu app boosted WebView H5 page load speed by combining native‑level tactics—static JS/CSS bundling, HTML preloading—and web‑only strategies such as SSR, WebP image conversion, unused‑component removal, on‑demand lodash loading, and off‑screen image lazy‑loading, raising second‑open rates from ~5% to ~40%, improving Lighthouse scores by over 20% and cutting transferred bytes by roughly 20%, delivering an overall ~10% performance gain.
This article details the technical implementation of NetEase Cloud Music’s color‑test H5, covering its single‑page React architecture, preloading optimizations, canvas and WebGL animation techniques, and the deterministic front‑end algorithm that calculates single‑ or dual‑color results from user choices.
This article traces the evolution of web technologies from Tim Berners‑Lee's first static page and the birth of HTML, through the rise of JavaScript, CSS, AJAX, SPA, SSR, and NodeJS, to recent innovations like React Server Components and future trends in web rendering.
This article traces the evolution of web technologies from Tim Berners‑Lee's first static page in 1991 through the rise of HTML, CSS, JavaScript, dynamic server‑side solutions like PHP and AJAX, the emergence of SPAs, and modern innovations such as SSR, React Server Components, and Web Components, highlighting key milestones, challenges, and future directions.
Spanning three decades, this article traces the evolution of web development from Tim Berners‑Lee’s 1991 static page through the rise of HTML, CSS, JavaScript, PHP, AJAX, SPA frameworks, server‑side rendering, Node.js, and emerging trends like React Server Components, illustrating how each breakthrough addressed the limitations of its predecessors.
This article explains why front‑end engineers need monitoring, outlines the key metrics to collect, and walks through the design and implementation of a JavaScript SDK that captures page views, API calls, resources, errors, performance, and custom events, sending logs to an ELK stack with batching and beacon fallback.
This article explores the evolution of front‑end performance optimization, compares SPA and SSR architectures, introduces a Node‑based middle‑layer design, and details the CarNext framework built on Next.js that improves rendering speed, SEO friendliness, and development efficiency for 58.com’s automotive services.
The article compares client‑side and server‑side rendering, defines key user‑perceived metrics such as FCP, LCP and a custom weighted‑area FMP, explains how to measure them with MutationObserver and performance APIs, and outlines business‑ and page‑level analysis plus optimizations—including pre‑loading, WebP images, bundle trimming and SSR tweaks—that collectively boost Lighthouse scores by over 20% and reduce data transfer by roughly 20%.
This article traces the evolution of web development from the first static HTML page through the rise of JavaScript, CSS, dynamic server‑side technologies, SPA and SSR, up to recent trends like React Server Components and micro‑frontends, highlighting why each breakthrough occurred.
Vue’s keep-alive component enables dynamic tab caching in B‑end applications by storing component VNodes in an internal LRU cache, preserving state across route switches, supporting include/exclude patterns, router‑meta flags, Vuex‑driven lists, and custom strategies for nested routes to prevent stale data and excess API calls.
This article explains React server-side rendering (SSR), covering the differences between client-side rendering (CSR) and SSR, their advantages and disadvantages, and provides a step-by-step guide to implementing a simple SSR demo with React.
This article details how Fliggy's front‑end team tackled the performance challenges of the Double‑11 shopping festival by migrating to Rax 1.0 on Web, employing pre‑render, Serverless SSR, Snapshot caching, SPA techniques, and comprehensive monitoring, ultimately achieving a 25% reduction in first‑screen load time.
This article explains how single‑page applications use router mechanisms, compares hash and history routing modes, and demonstrates the required server‑side (Node) and Nginx configurations to make history mode work without page reloads, including code examples and best‑practice tips.
This article provides a comprehensive overview of frontend routing in single-page applications, covering its historical evolution, core concepts of hash and history modes, implementation details in Vue and React, code examples, navigation guards, nested routes, and practical considerations for choosing routing strategies.
This article examines the micro‑frontend architecture of icestark, analyzing workbench and large monolithic application scenarios, comparing technical options such as SPA/MPA, iframe and shared components, and detailing core concepts, routing, isolation, communication, and micro‑module capabilities to guide practical implementation.
This article examines why micro‑frontend architecture is needed for large monolithic front‑end apps and workbench scenarios, compares SPA/MPA, iframe and shared component approaches, and details icestark’s core concepts, routing, communication, isolation techniques and micro‑module integration.
This article compares the three most popular front‑end technologies—Angular, React, and Vue—examining their nature as libraries or frameworks, lifecycle, core development, flexibility, performance, and suitable use cases to help developers choose the right tool for SPA or multi‑page applications.
By redefining performance metrics, analyzing bottlenecks, and applying targeted front‑end code and engineering optimizations—including early iOS onload, reduced first‑screen dependencies, merged and pre‑loaded APIs, bundle splitting, and modern‑mode delivery—the Baidu App personal homepage achieved over 100 ms reductions in white‑screen and first‑screen times across iOS and Android.
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.
This guide presents a high‑level knowledge map for Vue developers, covering essential JavaScript basics, core Vue concepts, component architecture, SPA routing, state management, real‑world tooling, testing, performance optimization, related ecosystems, and advanced frameworks like Nuxt and Vuetify.
The article introduces Rax PWA, a solution built on Rax 1.x that enables lightweight configuration of Progressive Web Apps, detailing SPA routing, code splitting, App Shell, skeleton screens, snapshot rendering, service‑worker caching, SSR support, and manifest generation to dramatically improve mobile web performance and user experience.
This article explains the need for front‑back separation, outlines the challenges of SPA architecture, provides a step‑by‑step implementation guide, and details a version‑1.0 API specification—including request/response formats, special data handling, and future front‑end trends—helping teams reduce integration effort and improve code maintainability.
This article explains why front‑end/back‑end separation is needed, describes the evolution from MVC to SPA, and provides detailed API design rules, request/response formats, and implementation steps to achieve a clear, maintainable, and efficient development workflow.
This article explains how create‑react‑app scaffolds a React single‑page application, shows three ways to generate a project, adds TypeScript support, details the built‑in scripts, and walks through the internal start command that launches webpack‑dev‑server with hot‑reload.
This article explains how to achieve native‑app‑style page transition effects in a Vue.js SPA by using the vue‑navigation component to listen to router events, applying absolute positioning, managing a custom page cache, recording scroll positions, optimizing animation performance, and handling inter‑page communication with an EventBus.
This article provides a comprehensive walkthrough of React‑Router's internal architecture, detailing the implementation of key components such as Router, Route, Switch, Redirect, Prompt, Link, and withRouter, while explaining how history, matchPath, and path‑to‑regexp work together to enable client‑side routing in modern React applications.
This article explores the performance challenges of large Single Page Applications and presents six practical optimization techniques—including fast startup, route-based code splitting, shared bundle extraction, component preloading, ESM tree‑shaking, and PWA caching—to maintain a smooth user experience while keeping bundle sizes low.
Over the past decade, server‑side web architecture has shifted from traditional N‑tier designs to single‑page application backends, microservices, and serverless models, each bringing new benefits and challenges for scalability, maintenance, and client integration, as illustrated by the accompanying diagrams.
This article presents a comprehensive case study of building a front‑end business framework for a mobile e‑commerce app, covering the initial design thinking, technical selection, architecture (infrastructure, router, MVC), componentization, hybrid performance optimizations, server‑side rendering, SPA‑React integration, Redux usage, and the engineering workflow including automation, testing, and continuous integration.
This article walks through the development of a Vue‑based single‑page application for the JD Car Maintenance project, covering why Vuex was chosen, its core concepts, store implementation, state persistence, cross‑origin handling, Axios/JSONP requests, code refactoring, lazy loading, and component extraction to improve maintainability and performance.
This tutorial walks you through installing React Router v4, creating basic, nested, and dynamic routes, handling URL parameters, and implementing protected routes with authentication, providing comprehensive code examples and best practices for building robust client‑side navigation in modern React applications.
This article, adapted from a university‑level front‑end lecture, explains what front‑end development is, how browsers render pages, the layered architecture of HTML, CSS, and JavaScript, and the modern tools and practices that turn static markup into interactive web applications.
This article explains the differences between libraries and frameworks, outlines seven key front‑end problem areas, discusses why external solutions improve development efficiency and reliability, and provides common tools and patterns for DOM, communication, utilities, templating, components, routing, and architecture, ending with a framework‑selection resource.
This article details the challenges of integrating dozens of APIs, complex UI interactions, and rapid multi‑version releases in a JD Kids shopping ecosystem, and explains how Vue, Vuex, Webpack, and a series of custom mixins, routing tricks, and constant management strategies were used to create a maintainable, high‑performance single‑page application.
This article explains the core differences between single‑page and multi‑page web applications, compares client‑side and server‑side rendering, and discusses their impact on performance, SEO, and user interaction in modern web development.
This article details the transformation of the HULK private‑cloud platform's front‑end from a PHP‑based MVC system to a modern React SPA using webpack, Redux, SASS and code‑splitting, highlighting the motivations, architectural decisions, and performance benefits of the 3.0 overhaul.
This article, the third in a series on constructing high‑scalable web interactive systems, demonstrates how to use NetEase's NEJ framework to decompose complex SPA modules, define hierarchical and dependency trees, register external and layout modules, map functionalities, and configure the entire application for scalable development and maintenance.
This article introduces a modular SPA template built with Backbone and RequireJS, explains its directory layout, index.html skeleton, page‑switching mechanism, and how QA engineers can add new modules to quickly develop and maintain internal statistical tools.
This article explores the evolution of web componentization from the early template era to modern SPA frameworks, explains why component-based development is essential, and presents practical design ideas such as treating components as finite state machines with atomicization and event‑driven interactions.
This article describes a scalable architecture for large Angular2 single‑page applications, covering communication layers, predictable state management with Redux/NgRx, modular design, lazy loading, dependency injection, and provides code examples illustrating models, components, and services for both single‑player and multiplayer scenarios.
This tutorial walks you through the reasons for using SPA, why Vue.js is a lightweight alternative to React, how to set up the Node environment, configure Webpack, create components, manage routing, handle component lifecycles, and implement nested routes with practical code examples.
This article examines the five major obstacles when building massive single‑page applications—componentization, decentralized routing, domain‑wide data stores, hybrid app integration, and performance tuning—and offers practical architectural patterns to address each.
Worktile’s architecture combines a single‑page AngularJS front‑end with a Node.js/Express backend, leveraging MongoDB, Redis, and ejabberd for real‑time messaging, illustrating how SPA design, modular services, and long‑connection techniques enable a stable, high‑performance team collaboration platform.
The article explains how Worktile achieves cross‑platform web access, native‑like SPA experience, real‑time messaging, and service stability by using AngularJS for the frontend, Node.js, Redis, MongoDB, and ejabberd/XMPP for backend and push services.
