Tagged articles

1029 articles

Page 11 of 11

Jan 18, 2017 · Frontend Development

React Performance Optimization for YIcon: Reducing Re‑renders and Boosting Speed

This article describes how the YIcon project tackled severe React performance bottlenecks—such as repeated renders, slow diffing, and inefficient key usage—by applying shouldComponentUpdate, component splitting, immutable data structures, stable keys, and production‑grade webpack optimizations, ultimately achieving an 80% speed gain.

ImmutableOptimizationReAct

0 likes · 9 min read

React Performance Optimization for YIcon: Reducing Re‑renders and Boosting Speed

Hujiang Technology

Jan 10, 2017 · Frontend Development

Scaling React Applications: Containers vs Components, Feature‑Based Code Organization, CSS Modules, PostCSS Auto Reset, and Redux‑Saga

This article shares lessons learned from releasing React Boilerplate 3.0, covering the importance of front‑end scalability, the distinction between container and presentational components, feature‑based code organization, CSS Modules and PostCSS Auto Reset for style isolation, and using redux‑saga for readable, testable asynchronous flows.

CSS ModulesFrontend ArchitectureReAct

0 likes · 9 min read

Scaling React Applications: Containers vs Components, Feature‑Based Code Organization, CSS Modules, PostCSS Auto Reset, and Redux‑Saga

Qunar Tech Salon

Jan 5, 2017 · Mobile Development

Hy Hybrid Mobile Framework: Architecture, Philosophy, and Evolution at Qunar

The article introduces Qunar's Hy hybrid mobile framework, detailing its motivation, cross‑platform architecture, progressive component design, integration of Web and Native capabilities, evolution from Hy 1.0 to Hy 2.0 with React, and its relationship to React‑Native, highlighting how it enables fast, low‑cost mobile development.

FrameworkHybrid MobileMobile Development

0 likes · 10 min read

Hy Hybrid Mobile Framework: Architecture, Philosophy, and Evolution at Qunar

Hujiang Technology

Dec 30, 2016 · Frontend Development

Understanding Redux: Concepts, Architecture, and Practical Implementation in React

This article explains the core principles of Redux, when to adopt or avoid it, and provides a detailed walkthrough of its architecture, key components, and practical integration with React, including store creation, reducers, actions, middleware, and project structure.

FluxJavaScriptReAct

0 likes · 10 min read

Understanding Redux: Concepts, Architecture, and Practical Implementation in React

Hulu Beijing

Dec 8, 2016 · Frontend Development

Why React & Redux Are Transforming Hulu’s Frontend Development

This article explains the fundamentals of React and Redux, compares them to traditional tools like jQuery, highlights their combined benefits for clean state management, and describes Hulu’s ongoing migration to this modern frontend stack.

FrontendReActRedux

0 likes · 5 min read

Why React & Redux Are Transforming Hulu’s Frontend Development

Hujiang Technology

Dec 2, 2016 · Frontend Development

Best Practices for Using AJAX in React Applications

This article reviews four common approaches—Root Component, Container Component, Redux Async Actions, and Relay—for handling AJAX requests in React, explains when each method is appropriate, and warns against two anti‑patterns, helping developers choose the most suitable strategy for their project's size and architecture.

Best PracticesReActRedux

0 likes · 8 min read

Best Practices for Using AJAX in React Applications

Taobao Frontend Technology

Nov 17, 2016 · Frontend Development

Mastering React Component Communication: Props, Observer, Flux & Redux

This article explains the various relationships between React components—parent‑child, sibling, and deeper hierarchies—and demonstrates how to handle communication using props, callback functions, the spread operator, an observer pattern, and state‑management libraries like Flux and Redux.

FluxObserver PatternProps

0 likes · 13 min read

Mastering React Component Communication: Props, Observer, Flux & Redux

Architecture Digest

Nov 5, 2016 · Frontend Development

Webpack2 React‑Redux Boilerplate: Architecture, Features, Configuration and Best Practices

This article introduces a Webpack2‑based React‑Redux boilerplate, detailing its architecture, core features, configuration options, development workflow, server‑side rendering support, and best‑practice recommendations, while providing code examples and guidance for both beginners and experienced frontend developers.

Best PracticesBoilerplateFrontend

0 likes · 18 min read

Webpack2 React‑Redux Boilerplate: Architecture, Features, Configuration and Best Practices

Qunar Tech Salon

Oct 26, 2016 · Frontend Development

Improving Iconfont Platform Performance with React Isomorphic Rendering

The article examines the inefficiencies of an outdated internal iconfont platform, explores the drawbacks of separate front‑end and back‑end rendering, and presents a React‑based isomorphic solution that unifies package management and module loading, resulting in dramatically faster first‑page loads and easier maintenance.

Frontend ArchitecturePerformance OptimizationReAct

0 likes · 9 min read

Improving Iconfont Platform Performance with React Isomorphic Rendering

Architecture Digest

Oct 16, 2016 · Frontend Development

2016 Frontend Development Q&A: From jQuery to React, Babel, and Modern Tooling

A humorous 2016 dialogue walks through the shift from jQuery to React, explaining JSX, ES6+, Babel, module bundlers, task runners, TypeScript, Flow, Fetch API, and template engines, while highlighting the rapid evolution of frontend tooling and best practices.

FrontendJavaScriptReAct

0 likes · 12 min read

2016 Frontend Development Q&A: From jQuery to React, Babel, and Modern Tooling

Taobao Frontend Technology

Aug 25, 2016 · Frontend Development

Why React Keys Matter: Preventing Bugs in Dynamic Lists

This article explains the purpose of the React "key" prop, shows how missing keys cause warnings and rendering bugs, demonstrates proper usage with code examples, and discusses how keys affect component updates, lifecycle handling, and performance in complex UI scenarios.

JSXKEYReAct

0 likes · 11 min read

Why React Keys Matter: Preventing Bugs in Dynamic Lists

Tencent IMWeb Frontend Team

Aug 8, 2016 · Frontend Development

Unveiling React Diff: How Virtual DOM Powers Lightning‑Fast UI Rendering

React’s diff algorithm, the engine behind Virtual DOM, optimizes UI rendering by comparing tree, component, and element structures using strategies like tree diff, component diff, and element diff, enabling efficient updates that minimize DOM operations and boost performance.

Diff AlgorithmReActVirtual DOM

0 likes · 7 min read

Unveiling React Diff: How Virtual DOM Powers Lightning‑Fast UI Rendering

Tencent IMWeb Frontend Team

Aug 1, 2016 · Frontend Development

Unveiling React Diff: How Virtual DOM Optimizes Rendering Performance

This article explains how React’s diff algorithm works with the Virtual DOM, detailing tree, component, and element diff strategies, optimization assumptions, and practical guidelines to achieve high‑performance UI rendering while minimizing unnecessary DOM operations.

Diff AlgorithmReActVirtual DOM

0 likes · 7 min read

Unveiling React Diff: How Virtual DOM Optimizes Rendering Performance

Tencent IMWeb Frontend Team

Jun 28, 2016 · Frontend Development

Understanding React, Flux, and Redux: A Front‑End Architecture Guide

React provides component‑based UI rendering with state‑driven updates, while Flux introduces a unidirectional data flow using stores, dispatchers, and actions to manage state changes, and Redux refines this model by consolidating a single store and pure reducer functions for predictable state management.

FluxFrontendReAct

0 likes · 7 min read

Understanding React, Flux, and Redux: A Front‑End Architecture Guide

21CTO

Jun 16, 2016 · Frontend Development

Mastering React Performance: Real-World Optimizations for Mobile Apps

This article shares practical React performance‑optimization techniques—such as using the Virtual DOM wisely, integrating Immutable.js, fine‑tuning shouldComponentUpdate, and applying code‑splitting and Redux data management—to dramatically improve first‑paint time and interaction smoothness on mobile web applications.

Frontend DevelopmentImmutable.jsReAct

0 likes · 21 min read

Mastering React Performance: Real-World Optimizations for Mobile Apps

ITFLY8 Architecture Home

Jun 12, 2016 · Frontend Development

Master Webpack: From Basics to Advanced Configuration

This article introduces webpack, explains its advantages, guides through installation, configuration, loaders, plugins, and practical usage examples, covering module formats, shimming, extracting CSS, CDN integration, and integration with tools like Gulp, providing a comprehensive beginner‑to‑intermediate tutorial.

Frontend DevelopmentReActbuild tools

0 likes · 15 min read

Master Webpack: From Basics to Advanced Configuration

21CTO

Jun 9, 2016 · Frontend Development

How We Optimized React for Mobile: Lessons from HandQ School Group Refactor

This article details the challenges and solutions encountered while refactoring the HandQ school‑group web app with React, covering React's core features, performance pitfalls, the use of Immutable.js and pure‑render decorators, build‑tool choices, and concrete optimization tips that yielded measurable speed gains.

Frontend DevelopmentImmutable.jsReAct

0 likes · 20 min read

How We Optimized React for Mobile: Lessons from HandQ School Group Refactor

MaGe Linux Operations

May 20, 2016 · Frontend Development

How Uber’s Data Visualization Team Turns Billions of GPS Points into Interactive Maps

This article explains how Uber built a full‑stack data‑visualization team that uses open‑source React and WebGL libraries to turn massive GPS streams into real‑time map analytics, public data stories, and reusable visual components for internal and external users.

Big DataData visualizationFrontend

0 likes · 8 min read

How Uber’s Data Visualization Team Turns Billions of GPS Points into Interactive Maps

Java High-Performance Architecture

May 17, 2016 · Backend Development

How Wix Scaled to 60M Sites: Inside Its Microservice Architecture

Wix, the world’s largest DIY website‑building platform, transformed its monolithic Java stack into a 100‑plus microservice architecture built on Scala, Jetty, and Spring, supporting 60 million sites across 190 countries with robust media services, SDKs, and modern front‑end frameworks.

Backend ArchitectureReActScala

0 likes · 6 min read

How Wix Scaled to 60M Sites: Inside Its Microservice Architecture

Tencent Music Tech Team

May 11, 2016 · Frontend Development

Implementing Isomorphic ReactJS Server-Side Rendering with Redux and React Router

The article details how to set up isomorphic ReactJS server‑side rendering using ReactDOMServer, Redux for shared state, and React Router for universal routing, covering data fetching, Webpack builds for client and Node, code‑splitting, and performance trade‑offs such as CPU overhead and caching strategies.

IsomorphicReActReact Router

0 likes · 10 min read

Implementing Isomorphic ReactJS Server-Side Rendering with Redux and React Router

21CTO

May 7, 2016 · Frontend Development

Choosing the Right Front-End Framework: Trends, Comparisons & Future Outlook

This article reviews recent advances in front‑end development, compares popular frameworks such as AngularJS, EmberJS, ReactJS and VueJS, examines their evolution, discusses user and developer needs, and offers guidance on which technologies to invest in for the coming years.

AngularFrontendJavaScript

0 likes · 12 min read

Choosing the Right Front-End Framework: Trends, Comparisons & Future Outlook

Meituan Technology Team

Apr 8, 2016 · Frontend Development

Boosting Frontend Efficiency: Meituan’s Node.js, React, and Engineering Automation Insights

The Meituan‑Dianping tech salon recap reveals how their frontend teams leverage Node.js for high‑traffic services, Docker‑based builds, a custom monitoring tool, a React‑powered H5 publishing platform, modern engineering scaffolds, and the Vane API integration system to dramatically improve development speed and reduce costs.

DockerNode.jsReAct

0 likes · 8 min read

Boosting Frontend Efficiency: Meituan’s Node.js, React, and Engineering Automation Insights

21CTO

Feb 11, 2016 · R&D Management

Why Does Facebook Keep Launching Hundreds of Open‑Source Projects?

Facebook’s prolific open‑source strategy, driven by a culture that encourages engineers to build experimental tools like React and GraphQL, illustrates how the company balances risk, internal opposition, and talent attraction to turn many side projects into influential technologies.

FacebookReAct

0 likes · 6 min read

Why Does Facebook Keep Launching Hundreds of Open‑Source Projects?

Architect

Dec 7, 2015 · Frontend Development

How to Structure a React Project

This article discusses practical approaches to organizing a React project, comparing single‑file setups with modular multi‑file structures, component directories, testing strategies, data handling, and view integration, emphasizing pragmatic, maintainable architecture over rigid conventions.

Best PracticesComponent OrganizationFrontend Architecture

0 likes · 6 min read

Tencent TDS Service

Nov 19, 2015 · Frontend Development

Why React Dominates Frontend Development: Trends, Core Concepts, and Best Practices

This article explores React's soaring popularity, explains its core concepts such as JSX, virtual DOM, component architecture, lifecycle methods, server‑side rendering, and React‑Native, and demonstrates how these features give developers a powerful, modern front‑end toolkit.

Frontend DevelopmentReActReact Native

0 likes · 17 min read

Why React Dominates Frontend Development: Trends, Core Concepts, and Best Practices

Architect

Oct 24, 2015 · Frontend Development

Case Study: React.js, Redux, and Node.js Architecture for Baidu Mami E‑commerce WebApp

This article presents a detailed case study of a mobile‑first single‑page web application built with React.js, Redux, React‑router, and a custom Node.js framework, describing the technology selection, development workflow, encountered challenges, and the advantages and drawbacks of the chosen stack.

Frontend ArchitectureNode.jsReAct

0 likes · 10 min read

Architect

Aug 27, 2015 · Frontend Development

Understanding React Component Architecture: From Static Rendering to State Management and Communication

This article walks through building a React‑based popup page by first dividing the UI into small, single‑responsibility components, creating a static version, distinguishing props from state, adding interactive state, and finally enabling component communication using Flux‑style PubSub events.

ComponentFluxReAct

0 likes · 12 min read

Understanding React Component Architecture: From Static Rendering to State Management and Communication

Meituan Technology Team

Jul 16, 2015 · Frontend Development

Componentization Development Practices at Meituan: From Version 1.0 to 3.0

Meituan’s componentization journey progressed from early resource‑centric modules (1.0) through mature lifecycle, data‑binding, and Flux integration (2.0) to a React‑based, NPM‑distributed, Reduce‑bundled, Turbo‑enhanced ecosystem (3.0), systematically reducing front‑end complexity while boosting reuse, performance, and full‑stack development efficiency.

Component ArchitectureFluxReAct

0 likes · 14 min read

Componentization Development Practices at Meituan: From Version 1.0 to 3.0

Qunar Tech Salon

Dec 22, 2014 · Frontend Development

Understanding React: Principles, Component‑Based Architecture, and a Tab Selector Example

This article explains how React addresses the challenges of dynamic data rendering in complex front‑end interfaces by using a virtual DOM, component‑based architecture, and efficient diffing, and demonstrates these concepts with a practical Tab selector component implementation.

Component ArchitectureReActUI Development

0 likes · 10 min read

Understanding React: Principles, Component‑Based Architecture, and a Tab Selector Example