Front-end project architecture
Article directory
Frame selection criteria
The selection of a framework requires consideration of many factors, such as whether the technology can meet business needs, browser support, whether the framework itself is mature, team members’ mastery of the technology (or framework), and whether someone can control the overall situation. Whether the learning cost is acceptable, the stability of the technology (framework) itself, its community, maintainers, etc.; during project implementation, we generally pay attention to the need to have reusable components, package and deploy them conveniently, and it is best to learn It should not be too complicated to facilitate capacity building, save recruitment costs, etc.
Based on the above factors, do some analysis onvue.js, react, and AngularJS, the three most popular frameworks at present: a>
angular:
Complete MV* framework, including templates, two-way data binding, routing, modularization, services, filters, dependency injection and other functions
shortcoming:
-
The error message display of the verification function is relatively weak and requires a lot of template tags to be written.
-
The framework is heavy and the learning curve is steep
React：
-
The problem of repeated rendering of subcomponents requires manual optimization
-
You can use redux for state management, functional, immutable, patterned, and time travel
-
Can use JSX, full javascript capabilities
-
A more prosperous community ecology
View
-
JSX can be used, but it is recommended to use a template language instead of JSX
-
Slow learning curve and easy to get started
-
More lightweight, single page
-
The framework is stable, updated and optimized, and the community is active
Component reuse is a dimension that every project will focus on. Appropriate components with single responsibilities will greatly improve the development efficiency of new features and the maintainability of the project, and can also be easily tested. The components of Vue and Component are relatively flexible and lightweight, and can be seamlessly integrated into legacy systems by adding dependencies. For systems from 0 to 1, new practices can also be used to build projects, such as ES6, Webpack and other technologies. Angular officially recommends using TypeScript, which requires separate construction and packaging, making it inconvenient to integrate with legacy systems.
In terms of the learning curve dimension, Vue.js and React focus more on creating components that are reusable, easy to test, and can be flexibly integrated. Of course, with the support of other extension components and some scaffolding plug-ins, you can also easily build a front-end application construction framework that adopts the latest practices. Their biggest advantages are on-demand customization, smooth learning curve, and small but refined applications.
Relatively speaking, Angular is a large and comprehensive framework. They focus more on the construction of large-scale front-end projects, shielding developers from the underlying details of project construction, and propose their own set of solutions. The difficulty of using them is to get through the steep learning curve in the early stage. The advantage is that due to the use of standardized development methods, development productivity and development efficiency can be greatly improved in the later stage.
In summary, based on the current learning situation of team members, the difficulty of getting started with the framework, and the application of business needs, it is recommended to use vue.js< a i=2>.
Exception handling
Exception handling generally mainly reflects two aspects:
-
Verify exception handling on the front end, such as information verification, error messages, warnings, etc.
-
The other is front-end and back-end interaction exception handling. The front-end encapsulates methods according to the interface structure encapsulated by the back-end. Such as interface request errors, software and hardware prompt information, etc. The front end only needs to display different prompt content according to the corresponding situation.
Automated build (Packaging)
Automated construction is a very important part of the front-end architecture process. Architects can spend more time and energy on it. This process has a great relationship with the development efficiency of the entire team and the quality of the project. It allows development students to During the development process, you only need to care about the business logic and will not be disturbed by other issues. At present, the choices of automated construction tools include webpack, grunt, gulp, fis, etc. Each has its own advantages and disadvantages. Just choose one according to the actual situation of the project.
The automated build process mainly needs to consider and solve the following parts:
-
Improve development efficiency: hot loading, separation of development and production code
-
Optimized performance: code merging and compression, file version number, on-demand loading, image optimization
-
Improve code quality: modularization, ES6+Babel compilation, css preprocessing, eslint code inspection, useless code snippet filtering
There will be a lot of room for optimization in the project's architecture at the beginning. During the development process, deficiencies need to be continuously optimized, so the project's architecture process is a process of continuous improvement.
Basic components
If we introduce some mature UI frameworks, most of the basic components of the project will be solved, such as pop-up boxes, dates, paging and other controls. The basic components emphasized here are the secondary encapsulation of these UI controls, such as drop-down boxes, multi-select boxes, etc. The second type are common components, such as head, tail, loading state, empty state, etc. These can be considered in advance during the architecture process.
If you use the vue framework, you can choose element-ui for development. The official introduction of Element is a set of desktop component libraries based on Vue 2.0 for developers, designers and product managers. It provides various components commonly used in our projects, which can basically meet the needs.
public method encapsulation
During the project development process, we will encounter many method reuses. We extract these methods and encapsulate them into public methods. Avoid code redundancy or coverage caused by multiple definitions. For example: format date, obtain the label value corresponding to the list based on the value value, request request method, string processing method, etc.
Directory structure allocation principles
A clear directory structure will make the entire project appear logical, facilitate source code management, and make it easier for developers to identify different folders and files, so that they can quickly find specific codes for specific files, greatly reducing the impact on the entire project. Understanding the cost also allows new students to get started quickly. The following is a recommended base directory structure:
