Before and after the end of the separation triple Q: Why separation? How to separate? Interface Specification separated?

• 1 Introduction

• 2. Why separation

• 3. What is the separating

• 4. How do Separation

• The interface specification V1.0.0

• 6. The next big front-end

1 Introduction

With the rapid development of the Internet, showing the front pages, interactive experience more flexible, dazzling, but also in response to experience increasingly demanding, high concurrency requirements characteristic of back-end services, high availability, high performance, scalability, also even more demanding, leading to the front and rear end R & D focus on their respective areas of expertise Plow

Yet another problem caused by: both the front and rear ends of the docking interface little attention, there is no agreement the interface specification in the case of dry their own.

This leads us to project in the product development process, the interface FBI docking workload accounted for front and rear ends in about 30% -50% or even higher. FBI often butt end of the interface between the front and rear FBI and docking systems are the soft underbelly of the entire product research and development projects.

The main intention of this paper is to standardize agreed in advance to avoid unnecessary problems communicating FBI produced, so that everyone pleasant stay focus on their areas of expertise.

2. Why separation

Refer to two articles:

http://blog.jobbole.com/65509/
http://blog.jobbole.com/56161/

Development model currently available front and rear ends: "backend based MVC age", as shown below:

Maintainability marked improvement, MVC is a very good cooperative mode, from the architectural level allows developers to know what code should be written in any place. In order to make easier the View layer altogether, you can also choose Velocity, Freemaker and other templates, making the template can not write Java code.

Function appears weaker, but it is this limitation that the front and rear ends clearer division. However, it is still not clear, the typical problems of this stage are:

Front-end development of severe dependence development environment, the development of low efficiency.

In this architecture, the front and rear ends of collaboration has two modes: one is to write front-end demo, written after, to make the back-end sets of templates. Taobao is now still early, including a large number of business lines is this pattern.

The benefits are clear, demo locally developed very efficient. Lack of back-end sets of templates is also needed, it is possible to set wrong, after also need to set the front end to determine the cost of back and forth communication adjustment is relatively large.

Another collaboration model is responsible for front-end browser-side View layer template development for all development and server-side, Alipay is this pattern.

UI benefits are related to the front-end code is like to write, do not be too concerned about the back-end, front-end development is the lack of binding heavy back-end environment, the environment has become an important factor affecting the efficiency of front-end development.

Front and rear end still tangled duties

Velocity template is still pretty strong, variables, logic, macros, and other features, can still be achieved through a variety of business logic context variable to get. In this way, as long as the weak front-end that will often be asked to write a lot of back-end business code in the template layer.

In addition there is a big gray area is the Controller, page routing features such as front-end should be most concerned about, but it is implemented by the backend. Controller and Model itself will often tangled, people looked the business code of teeth often occur in the Controller layer. These problems can not all be attributed to the quality of programmers, or JSP enough.

Limitations on the front-end play.

Performance Optimization If you only do very limited space at the front, so we often need to cooperate in order to back-end collision sparks, but due to the back-end framework limitations, it is difficult to use Comet, Bigpipe and other technical solutions to optimize performance.

The total, just why code refactoring as:

• Separation of Concerns

• Segregation of Duties

• The right people do the right thing

• Better to build a model

• Rapid response changes

3. What is the separating

We now need to do before and after the separation of the first stage: "Based on Ajax brought SPA era", as shown:

In this mode, the front and rear end of the division of labor is very clear, the key point of the front and rear end of the collaboration is Ajax interface. It looks so wonderful, but looking back to look at it, which is not very different era JSP.

The complexity of the browser moved from the JSP server-side in the JavaScript, the browser becomes very complicated. Similarly Spring MVC, this era began to emerge browser layered architecture, as shown below:

For this SPA stages, before and after the end of the separation has several important challenges:

Front and rear ends of the interface conventions.

If the backend interface mess, if the back-end business model is not stable enough, then the front-end development will be very painful.

This one in the industry has agreed to API Blueprint and other programs and sediment interfaces, Ali, and many teams have similar attempts, through the interface rules, interfaces, platforms and other ways to do it.

With rules and interfaces with the rear end of the precipitation it may also be used to simulate the data, so that the front and rear ends may be implemented efficiently in parallel development of the agreed interface.

The complexity of the front-end development control.

Most SPA interactive applications to function based, JavaScript thousands of lines of code is too normal. Organize a large number of JS code, and bind the View layer, etc., it is not easy.

The typical solution is the industry's Backbone, Backbone do but is still very limited, there is still a lot of blank areas need to challenge.

4. How do Separation

4.1 Segregation of Duties

• Front and rear ends only be programmed by the asynchronous interface (AJAX / JSONP)
  

• Front and rear ends are each have their own development process, build tools, test set

• Separation of concerns, front and rear ends become relatively loose coupling and independence

4.2 Development Process

• Back-end interface documentation to write and maintain, update API interface documentation at the time of change

• According to the back-end interface development interface documentation

• + Mock front-end development platform based on the interface documentation

• After development is complete submission to reconcile the test

The interface server automatically generates Mock Mock document data, i.e., the API implements the interface documents, the entire development process as shown below:

4.3 DETAILED DESCRIPTION

Now it has been basically completed the implementation of interfaces:

• Document Server Interface : Interface changes to achieve real-time synchronization to the front display;

• Mock interface data platform : You can change the interface to achieve real-time data to the front end Mock use;

• Interface specification defines : It is important, a direct interface definition on the workload and the front end of the implement logic, specifically define specifications see next section;

The interface specification V1.0.0

5.1 specification principle

• I.e., the interface returns the data show: the rendering logic to do the front end processing only;

• Prohibit the rendering logic across multiple interface call;

• Front-end focus on interaction, rendering logic, try to avoid business logic processing;

• A request response transmission data format: JSON, JSON data as simple and lightweight, to avoid the multi-stage JSON;

5.2 The basic format

5.2.1 Request basic format

Request GET, POST request must contain == key parameters into the body of all the requested data package JSON format, and place the body in the reference ==, for example:

GET request:

xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}
复制代码

POST request:

5.2.2 respond to the basic format

{
    code: 200,
    data: {
        message: "success"
    }
}复制代码

code: Processing Status Request

• 200: request handling success

• 500: Request processing failed

• 401: The request is not certified, the jump login page

• 406: The request is not authorized, unauthorized Tips page jump

data.message: message request processing

• code = 200 and data.message = "success": Successful request processing

• ! Code = 200 and data.message = "success": request processing is successful, the general message prompts: message content

• code = 500: request processing fails, prompt warning message: message content

5.3 Response entity format

{
    code: 200,
    data: {
        message: "success",
        entity: {
            id: 1,
            name: "XXX",
            code: "XXX"
        }
    }
}复制代码

data.entity : entity data returned in response to

5.4 response list format

Data.List : response returned list data

5.5 response page format

• data.recordCount: The current page number of records

• data.totalCount: The total number of records

• data.pageNo: current page number

• data.pageSize: page size

• data.totalPage: Pages

5.6 Special content specification

5.6.1 the drop-down boxes, check boxes, radio buttons

Determined by the backend interface unifying logic is selected, and if selected by isSelect marking, for example:

Down is prohibited boxes, check boxes, radio buttons to select logic determination processing by the front end, a rear end determined by the unified logic returns to the front end of the selected display;

5.6.2 Boolean type

For a Boolean type, JSON data transmission always used to mark 1/0, 1 is / True, 0 NO / False;

5.6.3 Date Type

To the date type, JSON all string data transmission, particularly for business and fixed date format;

6. The next big front-end

Currently the front and rear end of the separation mode we are using belongs to the first stage, due to the use of some of the technical jquery, etc., for some page display, data rendering is quite complex, not able to reach a good reuse. For front-end is still a great amount of work.

The next stage may be in terms of front-end engineering, technical framework for the selection of front-end modular reuse aspects, can do more to consider. That is to usher in a "front-end-based MV * era." Most of the companies are in the basic separation stage.

The last stage is the Node bring the full stack of the times, to fully control the front page, URL, Controller, routing, back-end applications has gradually weakened as real data services + business services, and can only do do is provide data, business logic, attention to high availability, high concurrency.

END

Long press the map two-dimensional code, civet cats immediate concern [technical] nest

Ali, Jingdong, the US group, beating top technical experts based in bytes

IT people to create a "temperature" technology nest!

Reproduced in: https: //juejin.im/post/5d08de14e51d45598611b972