A new way of thinking about front-end architecture

Project address: github.com/CHU295/ONE-…

preface

When I first came to this company, due to the requirements of business scenarios, I had to do a new front-end project, which could be quickly deployed and completed as easily and quickly as possible, so I had this project.

Project planning

In order to make the best use of people and things, the work is divided into the following sections

Service Configuration

This is basically completed by the front and back end auxiliary products, through excel table + Python guide tool = JSON file.

The main function of this section is to generate the project configuration, including the information table of the front-end page, the key value of the back-end database, constant table, common table and so on;

Begin to

  • All the content of the front page is generated by reading the information table
  • The back-end database key-value structure is generated by reading data tables

The front-end loads different JSON based on different front-end templates (more on that later) and generates different tag nodes.

For example, the table header of the front-end page template LIST is directly generated by reading JSON. When the front-end page is written, it does not need to be configured. It is directly generated by the product configuration, and the subsequent product can modify the text of the page by itself

Here, the whole process is realized by PY script, which is executed by Jenkins fully automatic. One-click conversion from Excel to JSON is realized, and the copy and replacement of files is moved.

In daily life, the product changes the table, runs the guide table script, pulls the branch code, and gets the new JSON, without feeling the whole process

The front-end configuration

First take a look at the front-end project structure

The directory structure

│ ├─ ├─ CSS │ ├─ Reset.less to reset the default HTML style, such as the default HTML style │ │ tool. For example marginTop - 10 │ ├ ─ img │ └ ─ js │ axios. Js axios configuration items │ common. Js gm js, often for direct reuse module components, logic │ utils. Js tools js, logic, independently of the project, │ ├─project │ ├.js │ ├─default │ ├─ router.js │ ├─ data ├─ data (json │ ├─ test ├─ ├─ ├─ test │ │ index.js │ router.js │ ├─ API │ ├.js │ Interface │ └ ─ table ├ ─ layout page layout │ ├ ─ Front │ │ index. The js │ └ ─ H5 ├ ─ the module business module │ ├ ─ createRoute │ │ index. The js │ └ ─ mainInfo └ ─ page page ├─A │ ├─ B │ ├.jsCopy the code

The main difference is that there is a project directory, also known as the project configuration directory. When using node parameters, load different subdirectories to obtain different configuration items and generate different projects.

Routes are broken down into project-specific routes to ensure package volume

Project core

  1. Multi-service project isolation, by executing different command parameters, register different global variables when Node is running, configuration module according to the global variable to read different project configuration, obtain different routing configuration, etc., to achieve code isolation of different business projects, to ensure the stability of compilation and packaging speed volume;
  2. PC mobile compatibility. For example, ANTD introduced by PC needs to use ANTD Mobile on the mobile terminal. When the project is running, the running environment is determined through configuration, and then the files to be modified are cycled through nodeJS script to replace imported dependencies.
  3. The web editor, after trying to use Monaco-Editor and Codemirror, found that it was not consistent with the actual business needs, so I used Codemirror and took over the relevant API to complete input monitoring, lexical judgment and statement replacement by myself.
  4. Infinitely recursive template filtering,
    1. Through the configuration of screening variables, different variables support greater than/less than/not equal to/including/empty/not empty/equal to/one of them/range/and so on more than a dozen logical relationships, and corresponding input box/drop-down box/cascade/tree/date/range selection/and so on different UI components;
    2. In addition, support a template screening, through the configuration of different templates to achieve different functions, such as leukemia patients hospitalized more than 3 times within a month;
    3. Plus maintain a specific tree structure to achieve infinite recursive logical judgment.
  5. Use react-DND to complete the drag and fill of the form, configure the data structure of the specification, and use encapsulated drag and drop components to dynamically check whether all the tables comply with the fill rules during drag and drop, and feed back to the table verification.

After the order

In fact, this implementation method is only a compromise solution. What we really want to make is a web editor, which can modify directly on the web and then store it in the database instead of Excel. However, due to limitations of time, energy and manpower, the new solution has been pushed forward slowly.

Possible problems

The coupling is too strong, the same component is used by more than a dozen projects, the workload of unit testing is huge, and the maintenance cost of destructive upgrade of technology stack is too high

# During the study, the subsequent update of the original actual project has been running for two years, and has been deployed to various major hospitals for perfect operation, including the internal network environment and so on, which has withstood various testsCopy the code