The _node.js of the front and back end separation based on Node.js

Basic introduction

Start with an important concept, "template". In a broad sense, a template in the Web is a page that fills the data to generate a file. Strictly speaking, it should be the template engine that compiles the generated pages with the files in a particular format and the data provided. Templates are roughly divided into front-end templates (such as Ejs) and back-end templates (such as Freemarker) that are compiled on both the browser side and the server side.

As a part of the students on the spot is not very understanding of node.js, here to add the relevant knowledge node.js. Official on the internet for his definition of event-driven, asynchronous or something will not say. Here, borrow a picture from the Pauling book to explain the structure of the node.js. If you know Java students can be understood as a JS version of the JVM. Browsers generally include renderer and JS script engine, take Chrome browser as example, use WebKit kernel renderer, V8 script engine, and Node.js use V8 engine. In short, it is a JS operating environment, just like the browser's F12 debugging tools, but Node.js no DOM and BOM.

This picture depicts some of the information surrounding node.js, such as NPM's excellent package Manager and Cnode community, and GitHub, to some extent contributing to Node.js's prosperity and providing technical support.

Big companies are often the bellwether of technology, such as Google's angular, Facebook's react, and now they're hot. There are only 3 big companies listed here as examples. Taobao Midway IS. structure is needless to say, the domestic node.js forerunner Pauling from Taobao. Where to go there is a technical framework that should be called "QTX". 360-month Shadow led the 75 team out of a ES6/ES7 Web server framework--thinkjs, at that time, our technical director is very optimistic, but because I do not have time to learn ES6 and plug-ins are not rich enough, so still choose a more mature express.

To get to the end, this table lists the 3 ways in which I have been approached for the development of the front and rear separation. The first is the most common back-end language template that uses Java, SEO friendly, cache utilization and reduce the burden of browser rendering is relatively good, the biggest problem is the template file coupling is too high, out of the problem who do not want to solve, the front-end staff can not see the data, the backend staff do not understand the page, The template file is like a hot potato. The second is the current implementation of our project mobile end, using the angular framework (angular instructions can be seen as the front-end template) and Nginx This reverse proxy server, so that the front and back end completely decoupled, only through Ajax interactive data. This scenario is just the opposite of the previous one's strengths and weaknesses. The performance of front-end templates is always a problem, especially on the mobile side, especially on low-end mobile devices. The last one is a new project using Node.js as a front-end server, the responsibility of the front-end from the browser to the template layer, to solve all of the above problems, but there are also new problems, this problem will be analyzed later.

Of course, the whole stack development in small projects is also very suitable. For the traditional jsp/php development, the communication cost of the whole stack development is lower, the developer can understand the whole function module more easily, so that the design of the product will be reduced better. In particular, now appear in the JS-language based on the whole stack development: meteor and mean technology, but also make the front and back end of the development of a language directly, and then with the MongoDB, data from the browser to the database without escaping direct use, not to write SQL, the development cost is greatly reduced.

This time to build a node.js server to use some plug-ins. The famous express does not need to introduce a lightweight Web server framework. Using the handlebars template engine is also a coincidence, because the EXPRESS4 default is it, handlebars is worthy of "weak logic" template engine, the proposition is to reduce the template logic, as far as possible only with variables and paging, based on its design concept, I only expanded two helper. Specific article: the use of https://yalishizhude.github.io/2016/01/22/handlebars/superagent or because of EXPRESS4, because its test code with SuperTest, SuperTest is based on superagent, so superagent is used to forward and initiate requests. Superagent is still too weak, long connection can not be established, or recommend the request plugin. Restfuleapi it's nothing. Introduction, front-end server and browser, front-end server and back-end server are used in this set of specifications, is basically the URL to the resources, additions and deletions to the specific request method, state code to express the results, etc. ~ Gulp packaging Tools, webpack research for a long time, found that every additional page to modify the configuration file, this too painful, and then give up.

Development process

If this sharing is mainly about how to Node.js as a front-end server to achieve the front and rear separation, then there is no good to tell, look at the article Taobao ued good. In fact, the biggest problem is the increase of communication cost, specifically the definition and debugging of interface. In the traditional development process of the diagram above, the definition of interface is put on the interface server, then the front and back end are debugged locally according to the data of the interface document, then the joint is adjusted. This link is the front and back end of the time to start tearing, this parameter is wrong, that return value is not correct, in short, a waste of time. Next look at how this problem is solved in our project ~

The front and back end because of the problem of interface tearing has been, as a conservative I believe in iterative development, so the first step is to add a mock server. The magic of this server is based on the interface of the document automatically generated fake data, the implementation of the interface is API, the front-end students no longer have to write the data dead to test. No way, who called me is the front-end development, first think of their own people, hey ~ Of course, this is only to a certain extent conducive to front-end development, the backend interface and document inconsistencies will also occur when the problem. What to do?

Accidentally in the wave of the Great God's blog to see the old horse's a special article on the separation of the front and back, one of the important concept is that the contract test is also called a bilateral test bar. The core concept is to solve the problem of remote coupling. The parameters of the front and back end of the calibration, requires everyone to follow the interface document development. By its inspiration, add the Json-schema rule, realize the HTTP request parameter check, who does not follow the rules to change.

This redmine is our earliest interface document manager and has no function other than recording and viewing functions.

Swagger is known as the world's most popular interface document server, the interface is beautiful, plug-ins are also more, you can directly generate test code for the back-end language. However, the deployment of the time has not played, and YAML format is not as good as JSON habits, abandoned it.

This is now our project on the document server and mock server, based on mean technology implementation of the server, basic functions:

By using the MOCKJS plug-in, random data can be generated dynamically based on Json-schema to verify interface parameters and save Test status and interface response time. Simple JSON editor with login check function, can be logged after the interface debugging mock server in accordance with API server to respond to requests, interface update automatically update

Some questions

Node.js is the wing of the front engineer, and does the wings become an angel or a demon? This is to see if you can solve the problem of using it.

First, the workload of the front-end will undoubtedly increase, but the cost of communication will be reduced. Node.js single-threaded server stability is not good enough, but the robustness of the code and the perfect log can be effectively circumvented. Callback. There are too many solutions to this problem, Node.js Q/async modules and Es6/es7. Node.js Debugging. Although I have been rejecting the IDE, I have to admit that Webstorm is really handy for debugging. I also use the Node-inspector, the interface is similar to the chrome developer tool, looks quite familiar.

If you are a back-end programmer, you should be more cluster node.js. Interface integration work to the front-end server for processing, while the coupling with the front-end greatly reduced workload and efficiency are reduced.

There are two points of experience

Although the use of node.js has a certain cost of learning, but for the front-end developers are still very friendly. And the front-end use of node.js words, whether the technical content or workload will be improved, thereby enhancing the importance of the post. The current end developer is able to create more value to qualify for a higher salary ~ in the work of the proposed less suggestions to the feasibility plan, while the technical advance research rather than write a simple HelloWorld.

Summarize

It may be said that you introduce this set of things so complex, it is too troublesome to use, but also face-to-face communication. To this question I can only use Tencent Advanced UI engineer Yugo in the "web of the entire stack engineer self-cultivation," an example. Once he electric face a small company's front owner asked him how to manage the code, the other said directly with FTP upload, and complained that his men always update the wrong code, and asked him why not to SVN or git, he said it is not as easy as manual update. The truth of this story is my answer to the question ~

PPT Download Address