Front-end common module replacement

background

Header and back-end management system has undergone several years of iterative maintenance, and the theme of Slider UI and needs to be replaced. However, the project a few years ago the old project, and the gradual evolution of the technology stack, initially Freemaker engines built before and after the end of the unseparated project, part of the old page back using React reconstruction, new pages using React development, use iframe inlay Set the React page, and later introduced the concept of micro front end, using single-spa-react React page in the project.

Currently, the pages that use these three technology stacks all exist and need to be replaced all.

Before the change:

After the change:

Freemarker

In the middle and backend items of the seller center, each page has the same parts, such as the top, navigation, and bottom. If you write every page, when the project is huge, you need to modify these public modules one day, and you need to change all the pages. Change it again, this really crashes. But sitemesh will make it easy for you!

What is sitemesh ?

SiteMesh is a lightweight and flexible Java web application framework that applies the Gang of Four decorator pattern to allow a clean separation of content from presentation.

SiteMesh is a framework for web page layout and decoration. It can be used to separate the content of the web page from the page structure to achieve the purpose of page structure sharing.

Sitemesh is a Web based on 0617ae52fdb750 page layout, decoration and Web applications. It can help us
Create a consistent page layout and appearance in a project composed of banner pages, such as a consistent navigation bar, a consistent 0617ae52fdb760, a consistent copyright, and so on.
It can not only process dynamic content, such as content jsp，php，asp etc., but it can also process static content, such as content of htm ,
Make its content also meet the requirements of your page structure. It can even be HTML file as include as the file as a panel
The form is embedded in other files. All of these are GOF of Decorator most vivid realization mode. Although it is java language, it can be well integrated Web

How does sitemesh

SiteMesh act as Servlet filter, intercepting return to Web browser HTML , extract relevant content and incorporate it into the template called a decorator. The filter Web html、jsp or other 0617ae52fdb7e7 framed pages into a predefined template called a decorator

sitemesh in the seller center application

In the middle and back-end project of the company's seller center, we sitemesh interceptor and Application into independent services, corresponding to the seller-center interception service and the agentBuy application service, because there may be multiple web sitemesh , so we will separate sitemesh Can be reused. Therefore, the architecture diagram becomes the following form:

The execution flow sequence diagram of the seller center is as follows:

(. 1) webagent gateway service routing configuration is as follows, /agentBuy/seller/* requests through seller-center intercept, and seller-center service not /agentBuy/seller/* request controller layer, will continue to match the gateway routing, come agentBuy service

(2) agentBuy service has /agentBuy/seller/* request controller layer, returns the content area to be decorated html page

(3) seller-center interception return to web browser html , extract the relevant content ( head , body ) and fit it to decorate the page template ( <sitemesh:write property='head' /> and <sitemesh:write property='body' /> )

How is the public module injected?

The following script is injected into the end of the above template:

<script src="https://mstatic.cassmall.com/www/${profiles}/seller-react-frame/seller-react-frame.js"></script>

Read the code found in the page Header、Slider part is not implemented in the above template, but by script introduced seller-react-frame.js , and execute the script will Header DOM、Slider DOM were injected into <div id="seller-topbar"></div> and <div id="seller-sidebar" class="menus"></div>

seller-react-frame.js is generated in the seller-react-frame ( React ) project, which implements the Header and Slider components and specifies the mounted elements. The construction project will generate js , css resource files. After their execution to build a script that will write a self-executing function to seller-react-frame.js file, the role of self-executing function is to asset-manifest.json resource list js , css dynamic injection of page

// seller-react-frame项目
// 1、构建命令
"build": "cross-env PUBLIC_URL=./ react-app-rewired build && node ./scripts/build-entry-js.js",

// 2、入口文件
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { TopBar, SideBar } from "@casstime/seller-components";
import "@casstime/seller-components/style.scss";

ReactDOM.render(<TopBar />, document.getElementById("seller-topbar"));
ReactDOM.render(<SideBar />, document.getElementById("seller-sidebar"));

// 3、执行build-entry-js.js生成seller-react-frame.js
const fs = require("fs");

const assetManifest = require("../build/asset-manifest.json");
const entries = assetManifest.entrypoints;

fs.writeFileSync(
  "./build/seller-react-frame.js",
  `;(function loadAssets() {
  var scripts = Array.from(document.getElementsByTagName('script'));
  var targetScripts = scripts.filter(function(item) {return item.src.indexOf('seller-react-frame.js') > -1});
  var prePath = '';
  if (targetScripts.length) {
    var targetScript = targetScripts[0];
    prePath = targetScript.src.slice(0, targetScript.src.indexOf('seller-react-frame.js'));
  }
  ${JSON.stringify(entries)}.forEach(function(asset) {
    if (/\\.css$/.test(asset)) {
      var head = document.getElementsByTagName("head")[0];
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = prePath + asset;
      head.appendChild(link);
    }
    if (/\\.js$/.test(asset)) {
      var body = document.getElementsByTagName("body")[0];
      var script = document.createElement("script");
      script.src = prePath + asset;
      body.appendChild(script);
    }
  });
})();
`
);

Therefore, if we need to adjust the public module, we only need to modify the Header and Slider components, and rebuild and deploy seller-react-frame . If you encounter a cache problem and pull the latest seller-react-frame.js , you need to refresh CDN .

Freemarker + iframe

Freemarker + iframe pure use of `Freemarker is that there is only one shelf in the content change area, which uses iframe pages to nest React pages, such as:

// 内容变化区域 ftl
<!DOCTYPE html>
<html lang="en">
<head>
    <#include "../includes/head_storemgr.ftl" >
    <#assign userLoginId = User.getUserId()>
    <link rel="stylesheet" href="${Global.getConfig("web.app.static.url")}/css/storeResolveManage.css" type="text/css">
</head>
<body id="ng-app">
        <div class="right" style="margin-top: 16px;margin-right: 16px;border: 10px solid #FFF;box-shadow: 0px 2px 8px #e4e4e4;background: #f1f1f1">
            <iframe id="iframeCon" name="iframeCon" src="/seller#/decode/decode-page" scrolling="no" allowtransparency="yes" marginwidth="0" marginheight="0" frameborder="no" border="0" onload="loadFrame();" style="width: 100%; height: 700px;"></iframe>
        </div>
    <script type="text/javascript" src="${Global.getConfig("web.app.static.url")}/js/storeResolveManage.js"></script>
</body>
</html>

Other public modules are seller-react-frame.js script. Therefore, adjusting the public modules still needs to modify the Header and Slider components, and rebuild and deploy seller-react-frame .

microfe

The company's micro-front-end project is a bit special. The base project ( microfe-seller-base ) does not contain public modules, but separates the public modules into sub-applications. The base project first loads and renders public sub-applications ( microfe-seller-common ) according to the route, and then loads and renders other sub-applications, but how to control the order of loading and rendering sub-applications? After all, other sub-applications are mounted in public sub-applications.

Therefore, adjusting the public module only needs to modify the public sub-application ( microfe-seller-common ) project, and then rebuild and deploy.

refer to:

https://docs.huihoo.com/sitemesh/sitemesh-aop-for-web-pages.pdf

https://en.wikipedia.org/wiki/SiteMesh

http://www.blogjava.net/over1988/archive/2008/08/27/225145.html

https://zhuanlan.zhihu.com/p/104202143

https://blog.csdn.net/xuanwugang/article/details/80484235