Detailed description of component-based front-end development process

Background Students who work on the front-end know that if there are too many pages, things will become messy, so we need to unify the development process. The quality of the development process directly affects the efficiency of page development and indirectly affects the duration of the game.

Goal of the development process Pages can be completed quickly.
Through componentization, code reuse is ensured to avoid duplication of work.
Ensure that the page can run efficiently after it goes online.

Scope of development process File storage standards.
The organizational structure and coding standards of the code.
Release strategy.
The development tools necessary to support the entire process.
Each team has its own development process specifications. In fact, there is no best process specification, only the most suitable one. The following introduces a set of general development process specifications that are summarized and summarized based on the development processes of multiple teams.

Folder Specification Assume the project folder is p/. This folder contains:
p/assets/ stores development tools
p/dev/ stores project files in development status
p/dpl/ stores the common component library of the project
p/release/ stores released project files (the files here are all compressed)
The structure in p/dev/ is :
p/dev/website1/public/ Projects shared by the entire site (store files shared by the entire site)
p/dev/website1/project1/ Project 1
p/dev/website1/project2/ Project 2
....
The structure within each project is:
p/dev/website1/project1/page1.html
p/dev/website1/project1/assets/page1.js
/dev/website1/project1/assets/page1.css
p/dev/website1/project1/assets/images/
p/dev/website1/project1/include/page1.inc
The structure within p/dpl/ is :
p/dpl/system/ system js module
p/dpl/controls/ UI module
p/dpl/widgets/ Business components The structure of each folder is as follows:
p/dpl/system/category1/component1.html
p/dpl/system/category1/assets/component1.js
p/dpl/system/category1/assets/component1.css
p/dpl/system/category1/assets/images/
The structure inside p/release/ is:
Depending on the online file specification, it can also be the same as p/dev/.

Component-based development implementation
1. JS and CSS used by the entire site
The js and css used by the entire site are synthesized by selecting some components from p/dpl/ using tools. Put it in p/dev/website1/public/assets/common.js (or .css)
2. JS and CSS that are not shared by the entire site
A component can be loaded in a web page using the following code:
?using("System.Category1.Component1");
var comp1 = new Component1();
Among them, System.Category1.Component1 will be mapped to p/dpl/system/category1/assets/component1.js (or .css).
In development state, using will load components synchronously. After the page is published, using will be replaced by the source code of the corresponding component without the need for dynamic loading.
3. Asynchronous loading of js and css
The process itself does not provide the function of asynchronously loading components. Any third-party module loader can be used in the project to implement asynchronous loading.
4. Reuse of HTML Write include("include/topbar.inc") in the HTML file to embed the corresponding HTML fragment into the page.

Page publishing Page publishing mainly does these things:
Inline includes and usings, etc. to reduce the number of page requests.
Compress js and css.
Re-change the file location to meet the actual project needs (for example, you need to extract js and css, and filter html)

<<: Example code for implementing a pure CSS pop-up menu using transform

>>: Tkinter uses js canvas to achieve gradient color