Front-end Microarchitecture Practices (PART 2)

An overview of the

Extended from the previous front-end microarchitecture practice, React support is added on the premise of supporting independent development and deployment of master and sub-projects. In other words, this mode supports the following features:

  • The template is initialized using the CLI tool
  • When you develop a sub-project, you can see the entire project, not just the content of the project itself
  • Independent development deployment
  • The main sub-project can be the Vue or React technology stack
  • Non-iframe nested, pure route rendering

This is a more foolproof architectural pattern, but it is easy to understand and solve the problems of current projects: large projects, slow packaging, large refactoring once the technical stack or main library version of the project is updated, and so on. The flowchart is described in the first article, and the disadvantages of this pattern are:

  • Both Vue and React instances and routing instances exist.
  • Stores can share a technology stack, but there is an additional cost to communicating with each other
  • And so far have not encountered the problem

The principle of

In addition to the principles introduced earlier, the following are added:

  • After introducing the main library GZ through CDN, the total of 6 packages is about 1.2m (screenshot below)
  • You need to provide two mount containers for Vue and React instances. In the same route, only one of the two instances will render
  • The publicPath distinction between development and construction can solve the problem of loading JS, CSS, and IMG on demand
  • As for the problem of file hash, since app.js of subproject should be specified in the configuration file, we considered whether to remove hash, but retained it later, because the only way to solve the cache after removing hash is to increase the version number at deployment time, which is more expensive than using scripts to generate configuration files automatically.

1, the container HTML code

<body>
    <div id="vue"></div>
    <div id="react"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <! --⚠️ note: in store I use vuex, you can use other libraries to implement the master and child project to share the global state.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.min.js"></script>
    <! -- Menu Configuration File -->
    <script src="http://localhost:85/config.js"></script>
</body>
Copy the code

2. Project structure after rendering

In the main project, the two mount points vue-root and React-root are required. These are the containers provided for the subproject rendering view. The rest can be written as you wish.

3. Demo after rendering

Demo figure 15M, save failed, directly hang link

Iming. Work/demo/static…

The react menu information is read and rendered from configuration files.

Keep an eye out for routing and root containers; only one of the mount containers will always be rendered. In addition, in a VUE instance, the master and subprojects can call each other.

The size of the resource load is shown below:

How do I create react subprojects

React project template Webpack I used vue-CLI 3 for React project template webpack. There are no problems with it.

Install micro-structure-CLI plug-in

micro init

# Select subitems

# choose the react
Copy the code

Wait until the template download is complete.

conclusion

I have a general understanding of the current popular microarchitecture framework Single SPA and found that

  • It does not cross technology stacks and can be developed and deployed independently
  • Master and sub-projects are packaged together across technology stacks

Do I not know enough or do I not see a better example? Welcome to your answer.

I have also seen the micro front end transformation of the front end team of Daily Youxian supply chain. The mode they realized is not cross-stack, so they can develop and deploy independently. However, it is very, very beneficial to use different frameworks for different business scenarios, such as using react uForms for forms.

This model has many shortcomings and deficiencies, but the benefits far outweigh the disadvantages, and taste and practice is the performance of innovation, isn’t it?

Thanks for reading!