Engineering infrastructure--front-end infrastructure

sequence:

Engineering infrastructure: construction of coding specifications, API specifications, front-end and back-end collaboration, environment deployment, micro-services, micro-front-ends, performance, security defense, statistical monitoring, visualization, etc.;

Back-end infrastructure: Back-end specification documents, back-end templates, security, logs, microservices, RESTful API, middleware, databases, distributed, permission control, server performance concurrency, etc.;

1. Front-end infrastructure:

Front-end specification documents, front-end scaffolding, front-end templates, front-end component libraries, front-end tool libraries, front-end BFF, front-end CI/CD construction and deployment, front-end data embedding, etc.;

2. Front-end documents:

Newcomer documents (company, business, team, process, etc.), technical documents, business documents, project documents (old, new), planning documents (monthly, quarterly, annual), technical sharing meeting documents

3. Front-end documents:

Vue project templates, Nuxt.js project templates, micro front-end project templates, BFF project templates, management background project templates, React project templates, Node related project templates, other templates, etc.

4. Front-end scaffolding (CLI)

Quickly create projects, standardize code, mock data, integrate micro-frontends, commit hooks, automated deployment, aggregate tool functions, Hooks, etc., quickly get started with plug-ins/modules, and continue to build. . .

5. Front-end component library (UI Design)

Ant Design, Element UI, Vant UI and more

6. Front-end responsive design or adaptive design

7. Front-end tool library (like Hooks / Utils)

Front-end tool libraries, such as Day.js, axios, loadsh, etc.
query parameter analysis, device device analysis, environment distinction, localStorage packaging, Day date format packaging, Thousands thousandth formatting, anti-shake, throttling, array deduplication, Array flattening, sorting, judgment type, etc.

8. Front-end tool automation (Tools)

Eslint/Prettier automation, Stylelint automation, Git commit automation, etc.

9. Interface data aggregation (BFF)

Backends For Frontends mainly aggregates complex backend microservices into a friendly and unified API for various clients (wireless/Web/H5/third-party, etc.);
insert image description here

insert image description here

10. Front-end SSR promotion

Server-Side Rendering (Server-Side Rendering) refers to the page processing technology that completes the splicing of the HTML structure of the page by the server, sends it to the browser, and then binds status and events to it to become a fully interactive page.

  • Separation of front and rear ends;
  • The loading speed of the first screen is fast;
  • Good for SEO;

11. Front-end automated build deployment (CI/CD)

Every time you git commit the code, it will automatically deploy the project to the test environment, pre-production environment, and production environment for you, so you don't need to manually package and cv to multiple servers and environments every time;
insert image description here

12. Full-link front-end monitoring/data embedding system

  • Behavioral data: time, place, person, interaction, content of interaction;
  • Quality data: browser loading status, error exceptions, etc.;
  • Environmental data: browser-related metadata, geography, operators, etc.;
  • Operational data: PV, UV, conversion rate, retention rate (very intuitive data);

13. Front-end visualization platform

Data visualization, graph visualization, VR panoramic visualization, mid-background visual visualization
https://github.com/akira-cn/moyu
insert image description here

14. Front-end performance optimization

insert image description here

15. Front-end low-code platform construction (under construction)

  • Reduce development costs;
  • What you see is what you get;
  • One-stop research and development;
  • technological convergence;
  • Low professional threshold;
  • Friendly to newcomers, quick to get started;

16. Micro Frontend (Micro App)

Split your large front-end application into multiple small front-end applications, so that each small front-end application has its own warehouse and can focus on a single function;
micro front-end

Guess you like

Origin blog.csdn.net/MoXinXueWEB/article/details/127749609