Nucleus Powered Mitochondria

    hcicestark
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0 • Public • Published

    English | 简体中文

    icestark

    Micro Frontends solution for large application. Website docs.

    NPM version Package Quality build status Test coverage NPM downloads David deps

    Installation

    npm install @ice/stark --save

    Introduction

    icestark is a micro frontends solution for large application, contains:

    • Modular management of multiple independent applications based on route
    • Independent application independent warehouse, independent development and deployment
    • Unified management page public content (Common Header, Common Sidebar, etc.)
    • Support for low-cost migration
    • SPA user experience

    Application architecture

    Application architecture

    • Framework application and sub-application split according to UI structure
    • Framework application: responsible for sub-applications registration, loading, common content display (Common Header, Common Sidebar, Common Footer, etc.)
    • Sub-application: responsible for content display related to its own business

    Compatibility

    icestark requires the framework application to use react version 15+, which has no restrictions on the technology stack of the sub-application, supports different technology stacks such as react, vue, angular, etc., and supports multi-version coexistence of the same technology stack.

    Getting Started

    Framework Application

    // src/App.jsx
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { AppRouter, AppRoute } from '@ice/stark';
    
    class App extends React.Component {
      onRouteChange = (pathname, query) => {
        console.log(pathname, query);
      };
    
      render() {
        return (
          <div>
            <div>this is common header</div>
            <AppRouter
              onRouteChange={this.onRouteChange}
              ErrorComponent={<div>js bundle loaded error</div>}
              NotFoundComponent={<div>NotFound</div>}
            >
              <AppRoute
                path={['/', '/message', '/about']}
                basename="/"
                exact
                title="通用页面"
                url={['//unpkg.com/icestark-child-common/build/js/index.js']}
              />
              <AppRoute
                path="/seller"
                basename="/seller"
                title="商家平台"
                url={[
                  '//unpkg.com/icestark-child-seller/build/js/index.js',
                  '//unpkg.com/icestark-child-seller/build/css/index.css',
                ]}
              />
            </AppRouter>
            <div>this is common footer</div>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('ice-container'));
    • AppRouter locates the sub-application rendering node
    • AppRoute corresponds to the configuration of a sub-application, path configures all route information, basename configures a uniform route prefix, url configures assets url
    • icestark will follow the route parsing rules like to determine the current path, load the static resources of the corresponding sub-application, and render

    Sub-application

    • Get the render DOM Node via getMountNode
    • Trigger app mount manually via registerAppEnter
    • Trigger app unmount manually via registerAppLeave
    // src/index.js
    import ReactDOM from 'react-dom';
    import { isInIcestark, getMountNode, registerAppEnter, registerAppLeave } from '@ice/stark-app';
    import router from './router';
    
    if (isInIcestark()) {
      const mountNode = getMountNode();
    
      registerAppEnter(() => {
        ReactDOM.render(router(), mountNode);
      });
    
      // make sure the unmount event is triggered
      registerAppLeave(() => {
        ReactDOM.unmountComponentAtNode(mountNode);
      });
    } else {
      ReactDOM.render(router(), document.getElementById('ice-container'));
    }
    • Get the basename configuration in the framework application via getBasename
    • renderNotFound triggers the framework application rendering global NotFound
    // src/router.js
    import React from 'react';
    import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
    import { renderNotFound, getBasename } from '@ice/stark-app';
    
    function List() {
      return <div>List</div>;
    }
    
    function Detail() {
      return <div>Detail</div>;
    }
    
    export default class App extends React.Component {
      render() {
        return (
          <Router basename={getBasename()}>
            <Switch>
              <Route path="/list" component={List} />
              <Route path="/detail" component={Detail} />
              <Redirect exact from="/" to="list" />
              <Route
                component={() => {
                  return renderNotFound();
                }}
              />
            </Switch>
          </Router>
        );
      }
    }

    Ecosystem

    Project Version Docs Description
    icejs icejs-status docs A universal framework based on react.js
    icestore icestore-status docs Simple and friendly state for React
    formily formily-status docs Alibaba Group Unified Form Solution
    iceworks iceworks-status docs Universal Application Development Pack for VS Code

    Contributors

    Feel free to report any questions as an issue, we'd love to have your helping hand on icestark.

    If you're interested in icestark, see CONTRIBUTING.md for more information to learn how to get started.

    License

    MIT

    Install

    npm i hcicestark

    DownloadsWeekly Downloads

    1

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    135 kB

    Total Files

    48

    Last publish

    Collaborators

    • sssun_qi