Talking about what is front-end engineering, talking about engineering

Talking about what is front-end engineering, talking about engineering
1. What is front-end engineering?

Since the title of front-end engineers, the development of front-end is changing with each passing day. Compared with other mature fields, although the front-end is a rising star, its brutal growth is incomparable to other fields. Despite the rapid development of front-end technologies, the overall front-end engineering ecosystem has not followed up simultaneously. At present, the vast majority of front-end teams still use a very primitive "cutting graph (FE)-> set template (RD)" development mode. In this mode, the front-end development is not the original state of drastic cultivation, however, the efficiency is very low.

The front-end engineering problems are different from those of traditional software engineering, but they face the same problems. Let's first review the traditional software development process model:

The running and maintenance in is neither a serial relationship nor an absolute parallel relationship. Maintain the entire process from coding to running.

If computer science is to solve a specific problem of the system, or more commonly, It is code-oriented, then the engineering solution is to improve the production efficiency of the entire system. Therefore, software engineering is more inclined to manage and methodology than software engineering is a science.

Software Engineering is a broad topic that everyone can understand. The above is my personal understanding and is for reference only.

How to Improve front-end EngineeringCode-> test-> MaintenanceStage production efficiency.

Some people may think that the demand analysis and design stages should be included. In the software development model displayed, these two stages are specific to the front-end development field. The more appropriate title should be functional requirement analysis and uidesign, completed by the product manager and UI engineer respectively. The API requirement analysis and API design should be included in the coding stage.

2. Problems in front-end Engineering

To solve the front-end engineering problem, we can start from two perspectives: development and deployment.

From the development perspective, the problems to be solved include:

There are two solutions to these two problems:

From the deployment perspective, the main problems to be solved are resource management, including:

To solve the above problems, we need to introduce the build/compilation phase.

2.1 Development specifications

The purpose of the Development specification is to unify the coding specifications of team members, so as to facilitate team collaboration and code maintenance. There are no uniform standards for Development specifications. Each team can establish its own set of standards.

It is worth mentioning that JavaScript development specifications, especially when ES2015 becomes increasingly popular, it is necessary to maintain a good coding style. I recommend the eslint specification of Airbnb.

2.2 module/componentized development 2.2.1 module or component?

Many may confuse modular development and componentized development. Strictly speaking, components and modules are two different concepts. The main difference between the two lies inGranularity. The description of component and module in Documenting Software ubuntures is as follows:

A module tends to refer first and foremost to a design-time entity. ... information hiding as the criterion for allocating responsibility to a module.
A component tends to refer to a runtime entity. ... The emphasis is clearly on the finished product and not on the design considerations that went into it.

In short, a module suggests encapsulation properties, with less emphasis on the delivery medium and what goest on at runtime. Not so with components. A delivered binary maintains its "separateness" throughout execution. A component suggests independently deployed units of software with no visibility into the development process.

To put it simply, the module focuses on the encapsulation of attributes, focusing on the design and development stages without the focus on the runtime logic. Module is a white box, while component is a software unit that can be deployed independently. It is oriented to runtime and focuses on the functionality of the product. Component is a black box and its internal logic is invisible.

In general, the module can be understood as a part, such as a screw on a tire, while the component is a tire, which is a whole with a complete function. Specifically in the front-end field, a button is a module, and a nav containing multiple buttons is a component.

There has been a long debate between modules and components, and some programming languages have even blurred their implementations. This is also true in the front-end field. The third-party dependency directory installed by bower isbower_componentWhile the npm installation directory isnode_modules. There is no need to fight for this. A team only needs to unify their thinking and ensure development efficiency. It doesn't matter whether the name is module or component.

I personally prefer the idea of component black box and module white box.

2.2.2 necessity of modular/componentized Development

As the scale of web applications grows, the demand for modular/componentized development becomes increasingly urgent. The core idea of modular/componentized development is governance, which mainly targets the development and maintenance stages.

Many colleagues in the industry have made a very detailed introduction to the Discussion and Practice of componentized development. The focus of this article is not to focus on the detailed solution of componentized development. I collected some information for reference:

3. Build & compile

Strictly speaking, build and compile are two completely different concepts. The two have different granularities. compile is used to compile a single file. build is based on compile to compile all files. There is another concept in many Java ides: make. Make is based on compile, but only the modified files are compiled to improve production efficiency. This article does not discuss the deep running mechanism of build, compile, and make. The build and compilation phases described in the previous sections are referred to as the build phases.

3.1 Role of building in front-end Engineering

Before discussing how to organize the construction task, we will first discuss the role of the build phase in the front-end engineering system.

First, let's take a look at the current time (2016), what is a typical web frontend/backend collaboration mode. See:

Is a mature front-end collaboration system. Of course, due to the popularity of Node. js, it will be discussed later.

Since the advent of Node. js, the front-end circle has been spreading a word: subversion. Front-end engineers need to use Node. js subverts the previous web development model. Simply put, it uses Node. javaScript replaces php, ruby, python, and other languages to build web servers. In this revolutionary movement, JavaScript is the source of confidence for front-end engineers. We will not discuss the comparison between Node. js and php, but from the feasibility perspective, the direction of big front-end attracts more and more front-end engineers.

In fact, the big front-end can also be understood as full-stack engineers. The concept of full-stack is not relevant to programming languages. The core competitiveness is the understanding and mastery of the entire web product from the past to the next.

In the big front-end mode, what role does the building play? See:

Under the big front-end system, front-end developers master the web server layer built by Node. js. Compared with the conventional front-end development system mentioned above, the role of mock server is omitted, but the role of building a front-end system has not changed. That is to say, whether it is a large front-end or a "small" front-end, the construction phase is completely consistent in the two modes. The role of the construction is to process static resources and templates, in other words:The core of building is resource management..

3.2 What should I do for resource management?

Front-end resources can be divided into static resources and templates. The template references static resources, and the two complement each other. Different Construction policies must be used for the two resources during the construction process.

Currently, most companies still place templates under the control of backend developers, and front-end developers write demos to backend programmers to "set templates ". This collaboration mode is very inefficient, and the template layer is assigned to front-end developers for greater efficiency.

3.2.1 static resource construction policy

Static resources include js, css, images, and other files. Currently, with the popularization of some new specifications and css pre-compilers, the static resources in the development phase are:

During the build phase, when processing these static files, the basic functions should include:

The functions mentioned above can be said to make up for the defects of the browser's own functions.Language-oriented, We can refer to these functions as pre-compilation.

In addition to the language itself, the construction of static resources also needs to considerPerformance factors. For example, in the development phase, the componentized development mode is used. Each component has an independent js, css, image, and other files. If you do not process each file and publish it independently, it will undoubtedly increase the number of http requests, this affects the performance of web applications. To address such problems, the build phase should include the following features:

In addition to compression, the preceding functions are completely automated. Manual configuration is required for the other two functions. For example, to improve the rendering performance of the first screen, developers need to minimize the number of synchronization dependent files during the development phase.

All the features mentioned above can be understood as BUILD functions at the tool level.

The building function mentioned above is only the basic function of the building tool. If you stay at this stage, it will be a passing build tool, but it will only stay at the tool level. Compared with some popular building products, such as fiis, which has the above compilation functions and provides some mechanismsImprove production efficiency in the development stage. Including:

We can also understand the features mentioned above as platform-level building features.

3.2.2 template creation policy

The relationship between templates and static resources is container-module. The template directly references static resources. after construction, the changes to static resources include the following:

In fact, the url includes file name changes. The reason why the two are discussed separately is to let readers distinguish the different effects of CDN and build on resources.

The purpose of template construction isAfter the static resource url and file name change, synchronously update the resource reference address in the template..

The argument is that html is rendered by the template engine on the client. In short, the document content is generated by JavaScript, and the server template only provides one shell and basic static resource reference. This model is becoming more and more common. Some mature frameworks also drive the development of this model, such as React and Vue. However, in order to improve the performance of the first screen, most web products still cannot rely on server rendering. Therefore, it is necessary to construct a template.

The specific construction policies vary according to the situation of each team. For example, some templates in the team are the responsibility of backend engineers. In this mode, the resource ing table mechanism of the system is a good solution. This article does not discuss specific construction strategies, which will be detailed in subsequent articles.

Template creation is a tool-level function.

3.2.3 Summary

Building functions can be divided into tool-level and platform-level functions:

• Tool Layer

• Platform layer

4. Summary

A complete front-end engineering system should include:

Development specifications and componentized development are oriented to the development stage. The purpose is to improve the team collaboration capability, improve development efficiency, and reduce maintenance costs.

Building tools and platforms solves a series of Engineering Problems of web products, aiming to improve the performance of web products and improve development efficiency.

With the popularity of Node. js, the definition of the front-end is becoming wider and wider, and it is in the whole web development system. The role of front-end engineers becomes increasingly important. The front-end engineering system discussed in this article does not involve Node. at the js layer, when a team enters the big front-end era, the front-end definition is no longer just a "front-end". I think the title of Web engineer is more appropriate.

When talking about modular processing in the building with a front-end architect, he mentioned an interesting point: the so-called compression packaging and so on for performance building, in fact, it is limited by the client itself. Imagine if the browser in the future supports large-scale concurrent requests, and the network latency is small to insignificant, do we still need to compress and package?
It is true that any architecture or strategy is a solution to the present, and it is not a single rule. Without the age, any technical discussion is meaningless.

Students at the front-end are welcome to join the front-end learning exchange group.

QQ Group for front-end learning and communication: 461593224