How HULK Evolved from Server‑Rendered PHP to a React‑Powered Frontend (3.0)

HULK Frontend Evolution Overview

To support the productization and platformization of the HULK private‑cloud while ensuring an excellent user experience, the front‑end architecture migrated from version 2.0 (server‑side rendering) to version 3.0 (React‑based). This article shares that evolution.

HULK Cloud Platform

HULK is 360’s core private‑cloud offering, integrating compute, databases, big data, monitoring and storage to provide one‑stop services and enable rapid, second‑level deployment of cloud environments.

HULK 3.0 Frontend Overview

HULK 2.0 (Legacy) Frontend Architecture

The 2.0 version used a standard MVC stack: server‑side PHP plus a lightweight front‑end framework built on jQuery and Bootstrap. Growing team size and workload exposed shortcomings in documentation, component quality, and development speed.

Key requirements identified were fast page response, reduced duplicate code, and strong component reuse. Typical pages (A‑F) were illustrated, showing repeated elements such as top menus, side menus and content sections.

Ideal behavior included loading only new content when navigating between similar pages, avoiding full page reloads, and minimizing network requests by sharing common components.

HULK 3.0 Frontend Architecture Analysis

Given the requirements, a single‑page application built with webpack was chosen. The stack consists of the React full‑family: React, Flux, JSX, react‑router, webpack, ES2015, SASS, Babel and BEM naming conventions.

React treats the UI as a component tree that maps to the DOM. JSX allows writing component markup in a HTML‑like syntax, while react‑router controls which components are visible based on the route.

SASS is compiled to CSS via node‑sass, then inlined through a script tag; ES6 is transpiled to JavaScript with Babel. BEM prevents global style collisions.

Webpack bundles the application, enabling code‑splitting: the component tree is divided into chunks that are loaded on demand, reducing initial load time.

State Management with Redux

Dynamic data is fetched via APIs and fed into React components. Redux (a Flux implementation) provides a single‑direction data flow and separates model logic from the view.

HULK 3.0 Final Frontend Architecture

The complete 3.0 front‑end stack introduces a clear separation between front‑end static assets and back‑end services, resulting in better performance, faster iteration, and flexible deployment strategies.

The transition was driven by concrete needs rather than the desire to use a framework for its own sake, and the new architecture delivers noticeable gains in page performance and development speed.