From the early days of static web pages to today’s data‑driven, AI‑enhanced interfaces, this article explores how the rise of big data platforms like Alibaba Cloud’s Feitian has transformed front‑end development through advanced visualization, software‑Web convergence, and diverse new interactions.
This article presents a curated list of 29 Alibaba open‑source projects—including Spring Cloud Alibaba, Ant Design, Druid, Fastjson, Dubbo, JStorm, Nacos, Sentinel, and many more—detailing their core purpose, key features, and GitHub repositories for developers seeking robust solutions across cloud, micro‑services, frontend, and data processing domains.
This article explains Redux’s simple yet powerful state‑management model, its three core principles, key concepts such as actions, reducers, and store, and demonstrates how to integrate Redux with React using react‑redux’s Provider and connect APIs with practical code examples.
This tutorial introduces React fundamentals, covering installation, JSX syntax, component creation with functions and classes, props and state management, lifecycle events, controlled and uncontrolled forms, and component communication patterns and best practices.
This guide explains how to install Node.js, npm, and optional tools, verify their versions, create a new React app with Create React App, and understand the generated project's directory layout and key files for frontend development.
This article outlines how a beauty‑industry frontend team tackled diverse tech stacks, team fragmentation, and code‑quality challenges by establishing a unified code review SOP, defining clear evaluation dimensions, and later platformizing the process for automation, visualization, and sustainable improvement.
This article compiles twelve open‑source Vue admin dashboard projects, providing their GitHub repositories, documentation links, live demo URLs, and license information so developers can quickly evaluate and adopt the most suitable frontend UI framework for their applications.
This article outlines the strategic redesign of the 58 MicroChat SDK, detailing the middle‑platform concept, current challenges, clear product goals, a systematic design‑research process, visual and code upgrades, and the anticipated benefits for developers and end‑users across dozens of business scenarios.
The article introduces task‑oriented design as a strategic approach for creating cohesive, device‑specific experiences across the IoT ecosystem, contrasting it with traditional adaptive design, exploring its impact on mobile‑first thinking, showcasing real‑world examples like Apple Calendar, and offering practical guidance for designers.
The article explains common development models, detailing the steps from requirement gathering to delivery, compares half‑separation and full separation of frontend and backend, outlines their advantages and disadvantages, and reflects on architectural responsibilities in line with Conway's Law.
The article examines how front‑end frameworks can address business scenarios, user experience, development speed, and maintenance cost, offering practical strategies and future trends to quickly launch and sustainably maintain high‑quality products.
The article reviews Vue 3's official release, explains the Teleport feature for rendering content outside component trees, introduces the lightweight vue‑lit library for building Web Components with Vue's reactivity, and highlights related graphics experiments, legacy version comparisons, and Taro integration for mini‑program development.
In this personal narrative, a former Microsoft engineer shares how embracing versatile learning, solid computer‑science fundamentals, and a professional attitude guided his transition from Mac Office development to front‑end work at Bing Ads and ultimately to leading online document products at Alibaba, offering valuable insights for developers seeking sustainable career growth.
This article introduces common frontend design patterns—creational, structural, and behavioral—explains the SOLID principles behind them, and provides clear JavaScript examples for each pattern, helping developers understand when and how to apply them for more maintainable code.
This guide explains the concept of front‑end material, how components, business components, blocks, pages and applications are structured, and provides a step‑by‑step workflow using Iceworks CLI to create, develop, publish and consume material collections for scalable front‑end projects.
This article details a four‑layer cloud‑native system architecture that separates presentation, communication, service, and data layers, leveraging Spring Cloud microservices, Alibaba Cloud networking, multiple databases, JWT authentication, ELK logging, and HTTP DNS to achieve scalability, reliability, and optimal user experience across web, app, and IoT platforms.
This article explains Vue's $nextTick by first detailing JavaScript's single‑threaded event loop, then showing how Vue batches DOM updates using macro‑ and micro‑tasks, and finally walks through a custom implementation with code examples and common pitfalls.
This article draws analogies between ear‑phone amplifiers and front‑end development, exploring how hardware amplification concepts can illuminate UI and interaction design, reviewing Apple’s UI evolution, core animation, and the imgcook platform for intelligent, variable UI generation.
This article shares a front‑end engineer’s career journey—from early technical execution to team leadership—offering practical advice, case studies, and a roadmap for personal growth, team building, material‑system construction, and future UI‑to‑code automation.
In this talk, a former Alibaba front‑end leader shares his personal journey from a junior developer working on Taobao’s early YUI projects to leading large, growth‑focused teams, offering practical insights on technical mastery, continuous learning, and effective team management.
This article details how Ctrip's ticket‑search list page was refactored with clean‑architecture principles, introducing a unidirectional data flow, business Service layer, and plugin‑based aspect‑oriented modules to improve maintainability, testability, and cross‑platform reuse of front‑end code.
The article outlines practical front‑end performance tricks—caching object references, freezing immutable data to bypass Vue reactivity, using preload/prefetch/DNS‑prefetch/prerender/preconnect tags, and initiating parallel API and asset loads—demonstrating measurable bundle size reductions and faster page rendering in a Vue‑based Vivo site.
This article walks through designing and implementing a lightweight front‑end monitoring platform that captures JavaScript runtime and compile‑time errors, Promise rejections, resource loading failures, and network request issues, while also recording user interactions, page navigation, and environment details using modular code and browser APIs.
The article explains why common CSS vertical‑centering tricks can leave pixel offsets when fonts differ, details how font metrics such as ascent, descent, and x‑height determine the true baseline, and provides a calculable vertical‑align offset method—while noting its metric‑gathering overhead and anticipating native Houdini support.
UI testing ensures that a website’s interface functions correctly and delivers a smooth user experience, covering manual and automated approaches, cross‑browser compatibility, exploratory and scripted techniques, and performance considerations, illustrated with real‑world ticket‑booking examples and practical Selenium automation benefits.
This article compares three real‑time data delivery techniques—long/short polling, Server‑Sent Events, and WebSockets—explaining their mechanisms, advantages, drawbacks, and providing sample client‑server implementations to help developers select the most suitable approach for a dashboard that streams GitHub/Twitter activity.
The article chronicles a front‑end engineer’s eleven‑year evolution at Alibaba, detailing a six‑layer technical‑leadership pyramid, personal missteps, the shift to data‑visualisation, and key reflections on career growth, teamwork, and strategic vision for long‑term success.
The article shows how to avoid hard‑coded status strings in Vue by defining a reusable errorCode module, importing it where needed, and mapping backend response codes to human‑readable messages with a default fallback, simplifying maintenance across the project.
This tutorial explains how to configure a certified WeChat public account, construct the OAuth authorization URL, exchange the returned code for an access token, retrieve the user's basic profile—including nickname—and redirect back to the H5 page, while covering required parameters and token refresh details.
Lin Wan shares her career path from a fresh graduate at Alibaba International Station to a multimedia front‑end leader in Taobao Live, detailing personal growth, patent achievements, technical breakthroughs, and lessons on overcoming front‑end career confusion.
This guide demonstrates how to add a remember-password feature to a Vue login page by installing the js-cookie package, creating utility functions for token handling, storing encrypted credentials and a remember-me flag in cookies when selected, and retrieving them on page load to pre-fill the form.
The article explains how to diagnose and improve frontend performance using Chrome DevTools—particularly Lighthouse for synthetic audits and the Performance panel for runtime profiling—while covering key metrics, automation via the Chrome DevTools Protocol, and the distinction between synthetic monitoring and real‑user monitoring.
Apache ECharts 4.9.0, an open‑source JavaScript charting library incubated by Apache, introduces new features such as polygon graph connections and horizontal funnel orientation, adds tooltip text shadow and brush style options, and resolves numerous bugs across components like toolbox, tooltip, and bar charts.
A Chrome WebGL application showed single‑digit frame rates because pixi.js set failIfMajorPerformanceCaveat to true, and the integrated Intel GPU driver was missing, which was fixed by installing the correct Intel UHD Graphics driver, restoring 60 fps performance.
This article explains the fundamentals of data modeling for front‑end development, covering its three core elements, integrity constraints, domain‑driven design, layered architecture, and practical guidelines for building clean, maintainable front‑end data models.
This article explains how Vue single‑file components are compiled into render functions and staticRenderFns, and provides a step‑by‑step method to reverse‑engineer the compiled JavaScript back into the original template, style, and script sections using AST parsing, transformation, and code generation techniques.
This article explains how to split large files into chunks, control concurrent uploads with a Proxy‑based queue, and offload the upload process to a Web Worker to improve reliability and keep the main thread responsive, including practical code examples and bundling tips.
To solve inconsistent PC resolutions and the lack of multiple design drafts in backend management pages, we evaluated fixed‑width, fixed‑count, Material Design, and custom grids, then built a reusable adaptive‑grid component that recalculates card width, margin, and padding on resize using CSS variables, delivering responsive card‑lists while minimizing design overhead.
This tutorial explains how to solve physical‑machine shortages and achieve high availability by installing Docker, configuring Keepalived for virtual IP failover, setting up Nginx load balancing, building backend Docker images, deploying master‑slave containers, and verifying the setup with Portainer.
This article explains how to apply incremental thinking to ESLint code checks and webpack builds by using Git diff to detect changed files, running targeted linting and bundling, and demonstrates significant time savings in large front‑end projects.
This article details the development of a multi‑platform mini‑program using the Taro framework, covering project background, architecture, technology selection, TypeScript practices, MobX state management, API service encapsulation, image scaling, and canvas‑based poster sharing, with code examples and implementation insights.
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.
This article examines middleware as a front‑end design pattern, presents simple compose implementations, analyzes real‑world cases like Bridge and Fetch, compares middleware with the decorator pattern, and proposes API design guidelines to balance flexibility and maintainability.
This article details Suning’s comprehensive front‑end strategy for the 818 shopping festival, covering Node.js‑based release workflows, the no‑code Titan platform with Weex, a multi‑platform mini‑program system, and a Pixi.js game engine that together boost performance, flexibility, and developer efficiency.
This case study details JD.com's strategy to attract price‑sensitive users during the 618 promotion by redefining core metrics, enhancing visual content, implementing interactive front‑end features, and optimizing retention mechanisms, resulting in significant order growth and improved user perception of value.
This article provides a detailed guide on implementing dark mode across web (H5) and native mobile applications, covering system compatibility, CSS media queries, CSS variables, postcss handling, component library adaptation, and platform-specific configurations for iOS, Android, and Flutter.
This article walks a front‑end beginner through the fundamentals of WebGL, explaining canvas basics, hardware vs software acceleration, and providing a complete Hello World example with HTML, shader code, and JavaScript to render a single red point on a green canvas.
After mastering HTML and CSS, many learners find JavaScript daunting, so this guide outlines JavaScript's key characteristics and eight practical steps—understanding its purpose, setting goals, hands‑on practice, learning jQuery, Vue/Node, staying disciplined, frequent coding, mind‑mapping, and summarizing—to help you study JavaScript efficiently and confidently.
This guide explains why a flexible proxy tool like Whistle is essential for frontend development, covering its features, installation, configuration, HTTPS handling, matching rules, and common use‑cases such as host binding, request/response replacement, script injection, remote console, and Weinre integration.
This guide explains how to obtain, install, and switch custom themes for the Typora markdown editor, including downloading official or third‑party themes, copying them to the Typora themes folder, and using mdnice CSS files for additional styling options.
The article details JD.com’s “My Exclusive” 618 page redesign, describing how user‑centric browsing flows, exclusive visual atmospheres, and front‑end techniques like SVG gradients, IntersectionObserver animations, and dynamic gift‑pack effects boosted conversion rates and service growth during the promotion.
This article analyzes the challenges of implementing multi‑instance tab navigation in mobile‑friendly web pages using Vue‑router, explains why standard router components are single‑instance, and presents two solutions—dynamic route addition and route‑change hijacking—complete with code examples and considerations for memory management.
This article presents a comprehensive design for a WeChat Mini Program frontend error monitoring system, covering background challenges, architectural and process design, SDK implementation, reporting mechanisms, and a visualized backend to help developers quickly locate and resolve runtime exceptions.
In this talk, senior frontend expert Yang Zhouxuan (aka "Chenyu") shares a personal 12‑year journey through the evolution of frontend technology, the rise of Node.js, the development of Ant Group's Cloud Fengdie low‑code platform, and insights on future trends, challenges, and best practices for building enterprise applications.
This article explains several JavaScript techniques—including event handlers, inline script tags, body attributes, and key‑down interception—to block right‑click menus, text selection, copying, pasting, and Ctrl+C/Ctrl+V on a webpage, while noting their limitations and trade‑offs.
This presentation details the motivations behind rebuilding Taro, introduces the Taro Next architecture and its new capabilities, walks through practical development steps, explains underlying rendering principles for both mini‑program and H5 targets, and outlines performance optimizations and future directions.
This article previews the upcoming ES2021 JavaScript features that have reached Stage 4, including String.prototype.replaceAll, Promise.any, logical assignment operators, numeric separators, WeakRef, and new Intl APIs, providing code examples and notes on current browser support.
The article details Wukong’s systematic H5 performance overhaul—adding DNS‑prefetch, CDN and HTTP/2, compressing fonts and images, applying lazy‑load and WebP, minimizing reflows with Vue lifecycle hooks, using skeleton screens, and reporting metrics—resulting in load‑time cuts of up to 70 % and scores rising from the 40s‑60s to over 90.
Angular, a Google‑maintained front‑end framework from version 2 onward, offers cross‑platform capabilities such as progressive web apps, native mobile and desktop applications, along with high performance through code generation, server‑side rendering, automatic code splitting, and a rich productivity ecosystem including CLI, IDE support, testing, animation and accessibility tools.
This article explores the history of the abandoned ECMAScript 4 specification, detailing its ambitious features, the industry conflict that halted its release, and how many of its ideas later resurfaced in modern JavaScript versions like ES6.
This article walks through the design and implementation of a front‑end tabloid system, covering requirements analysis, a one‑click Chrome extension for article submission, tag taxonomy, backend storage, scheduled delivery via DingTalk and email, and overall architecture to foster continuous learning within a development team.
This article outlines the evolution of our wireless frontend architecture from a legacy Backbone.js and ASP.NET stack to a modern Node.js/React-IMVC solution, discusses the challenges of size, tooling, and cross‑platform development, and presents our shift to a Model‑Oriented Pure‑Model framework with Monorepo and GraphQL‑BFF integration.
This newsletter blends deep dives into Vue 3 RFC processes, cloud‑gaming opportunities, robust error‑code design, AI‑driven SQLFlow and Pipcook tools, plus handy regex and FIGlet utilities, offering developers practical knowledge across front‑end, back‑end, and emerging technologies.
This article explains how to design and implement reusable UI components that work across jQuery, React, and Vue by using a native‑JS container, iframe isolation, and communication techniques such as domain sharing, postMessage alternatives, and Nginx proxying, while providing code examples and practical tips.
This article details the technical design and implementation of a CSS‑based countdown timer, component‑driven multi‑platform development, and a high‑concurrency real‑time interaction system using WeChat Cloud Development's watch API for Tencent Games' 2020 online conference.
This article details how the 58 Anjuke front‑end team transformed their multiple mini‑programs into a unified, platform‑based architecture using Taro, describing the challenges, design decisions, code‑level configurations, performance optimizations, and the resulting improvements in development efficiency and user experience.
This article explains the fundamentals of web‑based live streaming using HLS and HTTP‑FLV, compares their trade‑offs, and then dives into a detailed side‑by‑side analysis of Vue Composition API and React Hooks, highlighting implementation differences, performance considerations, and practical usage tips.
This article explains how the JD.com "Jingxi" mini‑program uses the official miniprogram‑automator SDK to build an automated disaster‑recovery testing workflow that launches the devtools, simulates user actions, intercepts network requests, generates screenshots, and validates fallback behavior with manual comparison.
This tutorial provides a comprehensive Docker quick‑start for Linux, covering installation, essential commands, container lifecycle, image management, and step‑by‑step containerization of a frontend project with Dockerfile creation, image building, container deployment, registry push, and common troubleshooting FAQs.
This guide walks you through installing Node.js, creating a project directory, installing Cypress via npm, launching the tool, and understanding its default file structure, providing clear step‑by‑step instructions and screenshots for a smooth setup.
This weekly tech roundup explains how JavaScript sandboxes isolate code, details a low‑cost AST‑based code‑scanning approach, compares Vue, React and Angular, and shows how domain‑driven design and CSS variables can streamline modern front‑end development.
This article presents a practical case study of front‑end error monitoring for a real‑estate broker web site, detailing the background problem, pain points, analysis, design adjustments, code implementations, data collection, reporting strategies, and the resulting improvements in issue‑resolution efficiency.
The article presents a comprehensive approach to dynamic role‑based permission management in a front‑end/back‑end separated admin system, covering user‑role‑page‑function relationships, database schema design, front‑end menu rendering, route guarding, fine‑grained function control, and backend API authorization.
This article outlines the requirements, common approaches, drawbacks, and a comprehensive solution for creating flexible, visual printing templates in administrative workflows by leveraging OnlyOffice's extensible API, a custom JavaScript plugin, and backend integration to enable real‑time preview, variable insertion, and fine‑grained style control.
This article presents seven hands‑on programming projects—from a Pac‑Man game and a CRUD user‑management system to a weather app, chat socket, CI pipeline, web scraper, and social‑media sentiment analyzer—each with clear learning goals, technology suggestions, and GitHub examples to help developers sharpen their skills.
This guide explains how to leverage the larger screens and precise input of PCs to adapt mobile‑first mini‑programs, covering fundamental experience differences, responsive layout patterns, interaction translation, and special scenarios such as pop‑ups and hidden gestures, enabling a seamless cross‑platform user experience.
The article traces JavaScript’s module evolution from inline scripts to CommonJS’s file‑scoped exports and require system, explains its minimal bundler implementation, compares AMD and CMD alternatives, and finally introduces native ES6 import/export syntax, highlighting key differences and the gradual deprecation of CommonJS.
This article explains how ZooTeam’s frontend team builds maintainable, dynamic forms using a schema‑driven, drag‑and‑drop visual editor, covering the concepts, architecture, component configuration, rendering logic, and future enhancements for scalable B2B applications.
This article explores the rise of AI in front‑end development during the pandemic, compares frameworks like TensorFlow.js, ONNX.js and WebNN, presents a performance‑focused case study of MNN.js, and outlines practical acceleration tools for cross‑platform web and mini‑program AI applications.
This article presents a comprehensive front‑end solution that unifies multi‑type, multi‑platform data‑tracking (埋点) integration by standardizing configuration, decoupling tracking logic, providing a dynamic plugin architecture, and offering automated testing tools to reduce development and maintenance costs.
This article compiles practical experiences and technical lessons from developing Taopiaopiao mini‑programs on Alipay, Baidu, ByteDance and Quick‑App platforms, covering architecture choices, common pitfalls, component adaptation, template syntax, login flows, card integration, multi‑end differences and maintenance strategies.
This article explores the challenges of routing in micro‑frontend architectures, explains why correct parent‑child routing is essential, walks through progressively more sophisticated solutions—including shared routes, sandbox isolation, and message‑based synchronization—and finally presents a robust implementation that works across diverse scenarios.
Bootstrap 5 Alpha introduces a jQuery‑free core, drops Internet Explorer support, revamps the documentation UI, adds CSS custom properties, expands the grid system and utilities, and brings numerous enhancements to forms, colors, and overall developer experience.
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.
This article explains the challenges of debugging a wide range of OTT platforms, reviews existing tools like Eruda, vConsole, and ADB, and introduces a custom remote debugger built on Chrome DevTools Protocol that unifies debugging, JavaScript execution, and data inspection across devices.
The article explains why mouse hover events may only trigger on a transparent text element, explores CSS stacking contexts, stacking levels, and ordering rules, demonstrates various code examples and visual diagrams, and offers three practical solutions to fix overlapping element issues on web pages.
This article introduces Pipcook, a machine‑learning framework designed for front‑end developers, explains its flexible pipeline architecture, showcases the Boa bridge that lets JavaScript call Python libraries, and outlines the upcoming PipApp concept for building end‑to‑end AI applications.
This article shares Alibaba's ticketing team's cross‑platform mini‑program development experience, covering Alipay, Baidu, ByteDance, and quick‑app cards, detailing platform differences, practical tips, common pitfalls, and strategies for building, testing, and maintaining multi‑platform mini‑programs efficiently.
The team created a plug‑in, visual, self‑adapting framework based on Vue and uni‑app that transforms a domain‑specific language into an AST, then compiles unified micro‑components into native code for WeChat, Alipay, ByteDance, iOS/Android and quick‑apps, dramatically lowering development effort and enabling reusable, cross‑platform activity configurations.
The Vue team explains why they are rebuilding Vue 3—leveraging new JavaScript features like Proxy, fixing architectural limitations, adopting TypeScript, improving performance and bundle size, and introducing a flexible Composition API—while using an RFC process to involve the community.
This article outlines a comprehensive front‑end learning path—from basic HTML/CSS/JavaScript through framework mastery, Node.js, engineering tools, and code abstraction—while sharing personal experiences, practical code examples, and advice on continuous skill development for aspiring developers.
This article explores how frontend engineers at WeDoctor adapt experience design and performance metrics—such as page load time, interactive readiness, and second‑open rate—to the specific needs of the medical industry, detailing analysis methods, integration approaches, and future plans for micro‑frontend governance.
This article explains how to implement a web‑browser face‑recognition authentication system by capturing video streams with WebRTC, detecting faces with face‑api.js, converting images to Base64, and leveraging Baidu AI services for identity verification and liveness detection.
This article explores front‑end memory challenges when rendering large numbers of map annotations, explains heap vs. stack storage, hash‑based object handling, TypedArray/DataView usage, shared memory with Web Workers, and provides performance test results and practical optimization recommendations.
This article explores Didi’s open‑source Chameleon framework, detailing its origins, cross‑platform goals, MVVM‑based design principles, architecture layers, DSL compilation, runtime implementation, engineering tooling, ecosystem components, and real‑world adoption across dozens of Didi products and external teams.
The article explains how to build a unified user‑behavior data collection platform that standardizes event definitions, front‑end reporting, and back‑end storage using Kafka pipelines and Elasticsearch, enabling comprehensive analysis of user interactions across Android, iOS, and web clients.
The article presents a behavior‑preset dynamic layout system that uses DPR‑derived root font sizes and rem units to automatically adapt full‑screen pages across diverse device aspect ratios and resolutions, offering preset rules for backgrounds, element scaling, and anchoring, thus eliminating the need for multiple style sheets.
This article explains how a frontend configuration engine can be designed to boost page development efficiency by using component‑based architecture, detailing attribute definitions, data requests, hierarchical relationships, and cross‑component interactions, and illustrates the approach with JSON schemas and React code examples.
In this talk, senior Ant researcher Yu Bo shares his 13‑year journey, emphasizing simplicity, professional mindset, long‑term deep work, product freedom, and a caring team culture to help frontend engineers grow, lead teams, and stay passionate about technology.
This article presents a comprehensive overview of more than forty Baidu open‑source projects, ranging from JavaScript charting libraries and UI frameworks to distributed configuration platforms, mobile testing tools, RPC frameworks, big‑data visualization, and AI software, highlighting their main features and typical use cases.
