The thought and practice of (fine) separation of the front and back ends (i)

Preface

Many attempts have been made to address the problems posed by the traditional Web development model, but the scenarios are similar because of the front/back-end physical divide. As a bitter experience, today we rethink the definition of "front and back", introducing the Nodejs that the front-end students are familiar with, trying to explore a new pattern of the front and back end separation.

A discussion on Nodejs-based full stack development (based on NODEJS-front and back-end separation)

With the rise of different terminals (PAD/MOBILE/PC), more and more requirements for developers, the browser-side response has been unable to meet the high requirements of the user experience, we often need to develop customized versions for different terminals. In order to improve development efficiency, the need for the separation of the front and back ends is becoming more and more important, the backend is responsible for the business/data interface, the front-end is responsible for presentation/interaction logic, the same data interface, we can customize the development of multiple versions.

This topic has been discussed more recently, and Ali some BU is also making some attempts. After discussion for a long time, our team decided to explore a set of NODEJS based on the front and back-end separation scheme, there are some constantly changing understanding and thinking, recorded here, also want to see the students participate in the discussion, help us improve. first, what is the front and back end separation.

At the beginning of the discussion in the group I found that everyone's understanding of the separation of the front and back ends is different, in order to be able to discuss on the same channel, first on what is "back-end separation" agreement.

A common example of a front-and-back separation is Spa (single-page application), where all the presentation data used is provided by the backend via an Asynchronous Interface (AJAX/JSONP), and the front end is displayed.
In a sense, spa did do the back-and-end separation, but there are two problems with this approach: in Web services, the proportion of spa classes is small. In many scenarios there are synchronous/synchronous + asynchronous blending modes, and spa is not a common solution. At this stage of the spa development model, interfaces are usually provided in accordance with the presentation logic, and sometimes in order to improve efficiency, the backend will help us to deal with some of the presentation logic, which means that the backend is still involved in the view layer of work, not the real back-end separation.

Spa-style separation of the front and back, is from the physical layer to differentiate (think as long as the client is the front-end, the server is the back end), this method has been unable to meet the requirements of the separation of our front and back, we think from the division of responsibility to meet the current use of our scenario Front end: Responsible for view and controller layer. Backend: Only responsible for model layer, business process/data etc.

Why to do this division of responsibility, will continue to explore later. second, why to the front and back separation.

On this issue, Yuber's article on the evolution of the Web research and development model is very comprehensive, we have to think about: 2.1 The existing development model for the application of the scenario

Yuber mentioned several development models, each has its own application scenarios, no one completely replace the other one. For example, the backend-oriented MVC, do some synchronous display of the business efficiency is very high, but encountered synchronous asynchronous combination of pages, and back-end development communication will be more troublesome. Ajax as the main spa development model, more suitable for the development of app type scenarios, but only for the app, because SEO and other problems are not easy to solve, for many types of systems, this development is too heavy. 2.2 The front and back end responsibility is unclear

In the complex system of business logic, we are most afraid of the maintenance of the mixed code, because there is no constraint, m-v-c each layer may appear other layers of code, over time, there is no maintenance at all.
Although there is no way to completely solve this problem, the separation can be greatly alleviated. Because at the physical level you can't do that. 2.3 Development Efficiency issues

Taobao's web is basically based on the MVC framework WEBX, the architecture determines that the front-end can only rely on the backend.
So our development model is still, the front-end to write a good static demo, the back-end translation into a VM template, the problem of this model is not said, was spit for a long time.
Directly based on the back-end environment development is also very painful, configuration installation is very cumbersome to use. To solve this problem, we invented various tools, such as Vmarket, but the front-end is still to write VM, and rely on backend data, the efficiency is still not high.
In addition, the back end can not get rid of the strong focus on the show, so concentrate on the development of the business logic layer. 2.4 Limitations of the front end

Performance optimization If only the front end of the space is very limited, so we often need back-end cooperation to crash the spark, but due to the back-end framework constraints, we can not use Comet, bigpipe and other technical solutions to optimize performance.

In order to solve some of the above mentioned problems, we have made a lot of attempts to develop a variety of tools, but there has not been much improvement, mainly because we can only in the back-end of the small space that we divide to play. Only by truly separating the front and back ends can we solve the above problems completely. third, how to do the front and back separation.

How to do the front and back separation, in fact, the first section has the answer: Front: Responsible for view and controller layer. Backend: Responsible for model layer, business process/data etc.

Imagine if the front end mastered the controller, we can do URL design, we can decide on the server to synchronize the rendering, or according to the view Layer data output JSON data, we can also according to the performance layer requirements are easy to do Bigpipe,comet, Socket and so on, is entirely the need to determine the way to use. 3.1 Based on Nodejs "whole stack" type development

If you want to achieve the hierarchy of the above diagram, it is necessary to have a Web service to help us achieve the front and back end of things, so we have the title mentioned "based on Nodejs of the full stack-type development"

This picture looks simple and well understood, but has not been tried, there will be many questions. In Spa mode, the back end has been provided with the required data interface, the view front end is already controllable, why add Nodejs this layer. One more layer, how about the performance. Add a layer, the front end of the workload is not increased. Add one more layer of risk, how to break. Nodejs can do anything, why still want java.

These questions to say clearly is not easy, below said my understanding process. 3.2 Why to add a layer of nodejs.

At this stage, we mainly develop the pattern of the later MVC, which hinders the front-end development efficiency and makes the backend not focus on the business development.
The solution is to allow the front-end to control the controller layer, but if it is difficult to do in the existing technology system, because it is not possible to have all the front-end learning Java, install the backend development environment, write VM.
Nodejs can solve this problem very well, we do not need to learn a new language, we can do the previous development to help us do things, everything seems so natural. 3.3 Performance Issues

Layering involves communication between each layer, and there is a certain loss of performance. But reasonable layering can make the responsibility clear, also convenient collaboration, will greatly improve the development efficiency. The loss of layering will certainly be able to make up for other gains in return.
In addition, once the hierarchy is decided, we can optimize the communication method, communication protocol, minimize the loss.

As an example:
Taobao baby Details page after static, there are many need to get real-time information, such as logistics, promotions and so on, because this information in different business systems, so need to send 5, 6 asynchronous request to fill in the content.
With the Nodejs, the front-end can be in Nodejs to proxy these 5 asynchronous requests, but also easy to do bigpipe, this piece of optimization can make the whole rendering efficiency.
Maybe on the PC you think it's OK to send 5, 6 asynchronous requests, but on the wireless side, creating an HTTP request on a client's phone is expensive, and with this optimization, performance is raised several times.

Taobao details based on Nodejs optimization We are in progress, after the on-line I will share the optimization process. 3.4 Does the work on the front end increase.

Relative to only cut the page/do demo, it is definitely added a little, but the current mode has a link, communication, the process is very time-consuming, but also easy to make bugs, but also difficult to maintain.
Therefore, although the workload will increase a little, but overall development efficiency will improve a lot.

In addition, the cost of testing can save a lot. Previously developed interfaces are for the presentation layer, and it is difficult to write test cases. If you do the front and rear separation, and even testing can be separated, a dial people specialized test interface, a dial people focus on testing the UI (this part of the work can even be replaced by tools). 3.5 Increase the risk of the node layer and how to control it.

With the use of node on a large scale, the system/operation/security departments of the students will also be added to the infrastructure, they will help us to improve the various aspects of possible problems, security system stability. 3.6 node Can do anything, why also Java.

Our intention is to do the front and rear separation, if the consideration of this problem is a bit against our original intention. Even with node instead of Java, we have no way to ensure that we do not see the problems encountered today, such as unclear responsibilities. Our aim is to develop the layered, professional people, focus on doing professional things. The java-based infrastructure is already very powerful and stable, and it's better suited for the current architecture. Four, Taobao based on node of the front and back separation

Above, I understand that Taobao is based on node-front and back-end separation tiering, and node's scope of responsibility. Simple explanation: The top end is the service side, we often say the back end. The backend is a collection of interfaces for us, and the server provides a wide variety of interfaces for us to use. Because there is a node layer, there is no limit to what form of service. For back-end development, they are implemented only with interfaces that are concerned with business code. The node application is below the service side. The node application has a layer of model proxy to communicate with the server. This layer is mainly currently to erase the way we call different interfaces, encapsulating some of the model that the view layer needs. Node layer can also easily achieve the original VMCOMMON,TMS (Taobao Content management system) and other requirements. What framework the node layer uses is up to the developer to decide. However, it is recommended to use a combination of express+xtemplate, xtemplate can be used before and after the public. How to use node to decide for themselves, but the exciting is that we can finally use node easy to achieve the output we want: json/jsonp/restful/html/bigpipe/comet/socket/synchronous, asynchronous, how to complete the whole, Completely based on your scene. The browser layer does not change in our architecture, nor does it want to introduce node to change the knowledge you previously developed in the browser. The introduction of node, just put the front-end control of the part of the front to control.

We have two projects in the development, although not yet online, but both in the development efficiency, or in the performance optimization, we have tasted the sweetness. v. What else do we need to do? integrate node's development process into Taobao's existing SCM process. Infrastructure construction, such as Session,logger and other common modules. Best development Practice Online success stories everyone's understanding of the concept of node-back-end separation is safe ...

There is not much technology that needs to be innovated and researched, and there is already a lot of ready-made accumulation. In fact, the key is some process to get through and the accumulation of common solutions, I believe that with more project practice, this piece will slowly become a stable process. six, "Midway Is."

Although the "Nodejs based full stack development" model is exciting, there is still a lot to be done to make the entire stack of node based development a stable and acceptable thing, and we are working on the "Midway Is." project to solve the problem. Although we started soon, but is getting closer to the target.

http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/