How IceJS Transforms Frontend Development: From Build Tools to a Full React Framework

Introduction

IceJS is a React‑based development framework created by Alibaba’s internal middle‑office teams over nearly three years. It is now widely used in many Alibaba and Fliggy middle‑office projects.

The open‑source alibaba/ice project started in 2018, covering front‑end engineering, data flow, micro‑front‑end, and other open‑source components. Within two years it gained over 15,000 GitHub stars, becoming one of the fastest‑growing Alibaba open‑source projects.

Development Pain Points

Front‑end technology evolves rapidly—ECMAScript to TypeScript, Webpack, Rollup, Babel, and frameworks such as React, Vue, and Angular. Even professional front‑end engineers must constantly learn new tools, and non‑professional developers face high entry barriers. Re‑configuring projects for each new business adds significant pain.

In Alibaba’s ecosystem, many back‑end, test, and outsourced developers also need to build middle‑office features. Reducing configuration complexity and lowering the learning curve are key goals.

Evolution Roadmap

The framework evolved through three major stages:

Ice‑scripts 1.0 (2018) : A webpack wrapper that packaged common configuration into a reusable build tool.

Ice‑scripts 2.0 (2019) : A powerful plugin core with a rich ecosystem, supporting custom configurations.

IceJS 1.0 (2020) : A full‑stack React development framework that adds standardized best‑practice workflows, runtime extensions, and a plugin system.

These stages are illustrated in the evolution diagram (image omitted for brevity).

Version Comparison

IceJS 1.x is positioned as a development framework, while both ice‑scripts 1.x and 2.x are build tools. Configuration files evolved from

build.json

to

ice.config.js

. Release dates: ice‑scripts 1.x (Feb 2018), ice‑scripts 2.x (Jun 2019), IceJS 1.x (Feb 2020). The newer versions improve plugin capabilities, configuration strength, and support for SPA, MPA, SSR, micro‑front‑end, and serverless scenarios.

Framework Capabilities

The framework consists of four layers from bottom to top:

Infrastructure : Core dependencies such as React, react‑router, Webpack, Jest, and the build‑scripts tool, all wrapped to hide low‑level details.

Development Standards : Standardized project structure, code style, routing, state management, and a rich plugin ecosystem. It also includes a self‑developed system (icestore, micro‑front‑end, hooks) that is integrated by default.

Performance Experience : Optimizations for developer experience (build speed, debugging, intelligent hints) and user experience (SSR, code splitting).

Business Scenarios : Supports SPA, MPA, SSR, micro‑front‑end, and serverless integration.

Infrastructure

Provides React, react‑router, Webpack, Jest, and build‑scripts as a unified foundation, enabling “out‑of‑the‑box” usage without worrying about version changes.

Development Standards

Standardized development workflow covering directory layout, styling, code conventions, routing, and state management.

Plugin ecosystem built on top of build‑scripts, extending both build‑time and runtime capabilities.

Self‑developed solutions for micro‑front‑end, state management (icestore), and reusable hooks.

Performance Experience

Improves both developer productivity (fast builds, clear error messages) and end‑user performance (first‑paint speed, pre‑loading, SSR).

Business Scenarios

Out‑of‑the‑box support for SPA, MPA, SSR, micro‑front‑end, and serverless applications.

Key Features

Lightweight Application Entry

Creating an app only requires calling

createApp

with a configuration object that includes routing, state management, data requests, and logging. This replaces manual calls to

ReactDOM.render

,

createHistory

, etc.

<code>import { createApp, IAppConfig } from 'ice';
// Application configuration
const appConfig: IAppConfig = {
  app: {},
  router: {},
  store: {},
  request: {},
  logger: {}
};

createApp(appConfig);
</code>

Flexible Export Mechanism

Common dependencies such as

react-router

are consolidated, and developers can register new APIs via plugins, making shared capabilities invisible to business developers.

<code>import { createApp } from 'ice';

const appConfig = {
  icestark: {
    type: 'framework',
    getApps: async () => {
      // custom logic
    },
    appRouter: {}
  }
};

createApp(appConfig);
</code>

Routing

Both configuration‑based and convention‑based routing are supported. The recommended approach is configuration‑based routing for complex applications.

<code>const routerConfig = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      { path: '/login', exact: true, component: UserLogin, wrappers: [wrapperPage] },
      { redirect: '/user/login' },
      { component: NotFound }
    ]
  },
  { path: '/about', component: About }
];
</code>

State Management

IceJS includes the self‑developed

icestore

solution, following “convention over configuration”. Developers only define a model and let the framework handle binding.

<code>export default {
  state: 0,
  reducers: {
    increment: (prevState) => prevState + 1,
    decrement: (prevState) => prevState - 1,
  },
  effects: () => ({
    async asyncDecrement() {
      await delay(1000);
      this.decrement();
    }
  })
};
</code>

<code>import { store } from 'ice';

function Counter() {
  const [count, dispatchers] = useModel('counter');
  const { increment, asyncDecrement } = dispatchers;
  return (
    <div>
      <span>{count}</span>
      <button type="button" onClick={increment}>+</button>
      <button type="button" onClick={asyncDecrement}>-</button>
    </div>
  );
}
</code>

Engineering Configuration

Most build options are expressed in a simple JSON file, dramatically reducing configuration complexity compared with other solutions.

<code>{
  "alias": { "@": "src" },
  "outputDir": "dist",
  "publicPath": "./",
  "sourceMap": true,
  "minify": false,
  "proxy": {
    "/**": { "enable": true, "target": "http://127.0.0.1:6001" }
  }
}
</code>

Micro‑Front‑End Integration

Using the

build-plugin-icestark

plugin, developers can quickly integrate micro‑front‑end applications with minimal configuration.

<code>import { createApp } from 'ice';

const appConfig = {
  icestark: {
    type: 'framework',
    getApps: async () => { /* ... */ },
    appRouter: {}
  }
};

createApp(appConfig);
</code>

Plugin Mechanism

IceJS builds on the

build‑scripts

tool, inheriting its plugin API. Core plugins include:

plugin‑react‑app: React webpack configuration

plugin‑core: Runtime capabilities

plugin‑router: Routing support

plugin‑store: State management

plugin‑request: Data request handling

plugin‑config: Environment configuration

plugin‑logger: Logging

plugin‑helpers: Utility functions

plugin‑service: API services

plugin‑ssr: Server‑side rendering

plugin‑icestark: Micro‑front‑end

plugin‑mpa: Multi‑page application support

Plugins can register tasks, extend webpack configuration, add CLI options, and hook into command lifecycle events.

Custom Runtime Extension Example

<code>// module.ts
export default ({ addProvider, appConfig, ...rest }) => {
  const StoreProvider = ({ children }) => (
    <AppStore.Provider initialStates={appConfig.initialStates}>
      {children}
    </AppStore.Provider>
  );
  addProvider(StoreProvider);
};
</code>

Custom Build Extension Example

<code>// index.ts
export default async (api, options) => {
  const { onGetWebpackConfig, onHook } = api;
  onGetWebpackConfig(config => {
    // modify webpack-chain config
  });
  onHook('before.start.run', async () => {
    // custom logic before start
  });
};
</code>

Future Directions

IceJS will continue to improve capability completeness, framework performance, and developer experience, focusing on areas such as richer plugin ecosystems, better tooling, and broader scenario support.