Knowledge points of front-end architecture

Previous words

This article will supplement the knowledge points missed by the front-end architecture, including the four parts of document output, system decomposition, component extraction and release optimization

Document output

1. There will be some problems in the process of multi-person collaboration:

a. The writing requirements for document formulation are relatively high, and they must be structured, logically clear, written well, written quickly, and Pay attention to the typesetting so that it is suitable for others to read;

b. If the system is more complex, the document will be very long. If it reaches more than a few hundred pages, it will be difficult to take a long time to read the whole article, and many details will be passed over;

　c. The specification can meet the needs but does not necessarily conform to the development logic. The framer needs to negotiate with the developers;

　d. It must meet both the needs and the reading of the developers;

　e , ambiguity in wording, differences in personal understanding, confusion, incomplete content, typos, etc.;

2. There will also be problems in follow-up work and reuse:

a. It is difficult to form the final version of the specification. Subsequent modifications and revisions are required. Modifications will bring additional overhead to subsequent personnel;

b. If the requirements change, the specification needs to be redesigned, and the software architecture will also need to be redesigned. Requires large and small modifications;

c. The reusability of the specification is closely related to the design level of the formulator;

d. The reused document will also inevitably have missing parts, omitted content, and coverage. Problems such as the original design has not been modified or deleted;

System decomposition

In actual development, the difficulties in decomposing the system and the issues that need to be considered are as follows:

1. The main difficulty in decomposition is how to split it and whether the split is reasonable;

2. Each business function is related, where to split it?

3. Can the split module be split again?

4. Is the granularity of decomposition reasonable? Each module has its own subdivision. Should it be split to the module level or the class level?

5. Decomposition can easily lead to excessive decomposition or premature decomposition, which will increase costs and bring risks;

6. Can the split modules be reused?

7. Can they be reused after decomposition? Very good integration?

8. Ensure 100% decomposition of the interactive draft, and do not allow any module to be missed. A slight omission will affect subsequent development;

9. How to complete the decomposition within the time stipulation, otherwise the overall progress will be delayed;

Component extraction

To extract common components based on interaction, the following operations need to be performed

　1. Divide the interactive draft according to levels and extract similar parts;

　2. Divide it further and extract smaller components;

　3. Ensure that each component is relatively independent, and There is no duplication of other components;

　4. The separated components are as simple as possible and can be reused;

　5. For example, buttons, icons, paging, navigation, menus, lists, carousels Pictures, etc.;

6. Combining these components can restore the interactive draft;

Release optimization

When the project is released, the following optimizations are required

　1. File cache. Configure a long-term local cache to save bandwidth and improve performance; use content summaries as the basis for cache updates to achieve precise cache control, and at the same time realize non-overwriting release of resources to ensure smooth upgrade

　2. Static resources CDN deployment, optimized network request response

　3. Resource merger and optimization. File merging, modularization will lead to a large increase in HTTP requests; image optimization, including image compression and sprite image merging (it seems that iconfont is now popular for this), etc.

The above is the detailed content of Knowledge points of front-end architecture. For more information, please follow other related articles on the PHP Chinese website!