What is web front-end architecture

Web front-end architecture is a collection of tools and processes designed to improve the quality of front-end code and achieve efficient and sustainable workflows. There are 4 cores of web front-end architecture: 1. Code (HTML, CSS, JavaScript); 2. Process, how to use tools and processes to build an efficient and error-free workflow is an important consideration; 3. Testing, creating coverage An extensive testing program can ensure that old code can still run normally; 4. Documentation, design documentation is a tool for you to communicate with others.

The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

Today, with the rapid changes in Web front-end technology, Web front-end projects are becoming more and more complex. The front-end architecture will also evolve with our ever-changing iterative needs and architectural technology. It is an issue that not only architects but also each of our developers must pay attention to.

1. The origin of web front-end architecture

At the CSS Developer Conference on October 13, 2014, in a crowded room at the New Orleans Convention Center "Raising the flag of front-end architecture" in the room has become a common appeal of developers working on the front line. After that, developers who were trying to figure out who they were and what role they played in the company found that they had been playing the role of front-end architect but had never held the title or lacked the confidence to do so. Fight for the power that comes with this position.

A few weeks after the conference, many people changed their profile on Twitter to "front-end architect."

2. What do you understand by the web front-end architecture?

Front-end architecture is like architectural design. During the construction process, architectural designers need to design and plan plans, and follow up the construction process. This is similar to the work of a front-end architect, except that the latter builds websites rather than buildings. Architects put more effort into designing the composition of a project than pouring concrete. In the same way, front-end architects focus more on developing tools and optimizing processes than writing specific code.

Front-end architecture is a collection of tools and processes designed to improve the quality of front-end code and achieve efficient and sustainable workflows.

Front-end design architecture is not a once-and-for-all job. No design is perfect at the beginning, and no plan can be completed in one step.

The particularity of the front-end architecture

The front-end is not an independent subsystem, but spans the entire system

Dispersion: Front-end engineering

Abstraction, decoupling, and combination of pages

Controllable: scaffolding, development specifications, etc.

Efficient: framework, component library, Mock platform, construction and deployment tools, etc.

Abstract

Page UI abstraction: components

General logic abstraction: domain entities, network requests, exception handling, etc.

三、Principles of web front-end architecture

##1. System design

Imagine if a building does not have a clear structural design, all If all the important matters are directly decided by the construction workers, then there may be a situation like this: one wall is built with stone, the second wall is built with bricks, the third wall is built with wood, and the fourth wall is left open because of the pursuit of fashion. null.

Although the overall appearance and style tone of the website are completely determined by experienced visual designers, front-end architects control the front-end development methods and system design philosophy behind it. By designing system specifications that all front-end developers follow, front-end architects create a clear picture of the final shape of the product and code.

Once the front-end architect establishes the specifications of the system design, the project will have a standard to measure the quality of the code. Otherwise, how can we judge whether the code meets the standards? A well-designed system should have a complete inspection mechanism and make appropriate trade-offs to ensure that the code in the system has substantial value and is not simply piled up.

2. Work planning

After having a clear structural design, you need to formulate a development workflow. What steps does a developer need to go through to write a line of code and submit it online? To give the simplest example, this process involves logging into the server using FTP, modifying a file and saving it. However, for most projects, the complete workflow may use multiple tools, such as version controllers, task schedulers, CSS processors, documentation tools, test components, and server automation tools.

The goal of a front-end architect is to design a system that runs smoothly. This system can not only start up efficiently and quickly, but also continuously provide effective feedback through language analysis, test cases, documentation and other methods, and greatly reduce human errors caused by repeated operations.

3. Supervision and follow-up

Front-end architecture design is by no means a once and for all task. No design is perfect from the start, and no plan is perfect in one step. Customer and developer needs change over time. A development process that works well at one stage may later need to be restructured to improve efficiency and reduce errors.

A very important ability of a front-end architect is the ability to continuously optimize the work process. Today's various build tools allow us to easily change the way we work and notify every developer.

Some people ask whether front-end architects are equivalent to management roles and no longer need to write business code. Front-end architects not only have to write more code, but they also have to be able to use multiple programming languages ​​and use a lot of tools. The amount of code has not decreased, only the readers of the code have changed. Front-end developers write code for end users, while front-end architects write code for the developers on the team.

4. The core of web front-end architecture

1. Code

In the final analysis, all Websites are composed of a bunch of text files and resource files composed of HTML, CSS, and JavaScript. When we're faced with the amount of code that goes into making a website, it becomes clear how important it is to set expectations for code and resources.

2. Process

How to use tools and processes to build an efficient and error-free workflow is an important consideration. Workflows are becoming increasingly complex, and so are the tools used to build them. These tools bring amazing results in increasing productivity, speeding up efficiency, and maintaining code consistency, but they also come with the risk of over-engineering and abstraction.

3. Test

To build a scalable and continuously optimized system, we must ensure that the new code is well compatible with the old code. Our code is not They will exist in isolation. They are all part of a larger system. Creating a comprehensive test plan can ensure that the old code can still run normally.

4. Documentation

Design documentation is a tool for you to communicate with others, to explain what your design decisions are, to explain what your design decisions are and why. Your decision is a good one. Unless a key member of the team is leaving, few will realize the importance of documentation.

These four cores are the foundation for building a scalable and sustainably optimized system.

(Learning video sharing: Getting started with web front-end)

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