Copyright notice: More articles please visit my personal website Keyon Y, reprint please indicate the source.

preface

Recently, the company has a new project, due to the shortage of staff at the back-end, I resolutely proposed to use the scheme of node middle layer, which was supported by the boss, so a big single attempt came. Node middle layer allows the front end to do site routing, page rendering, SEO optimization, for the previous never contact with these content of the front players, it is a good opportunity to exercise our website architecture. Plus, it’s a great opportunity to learn more about Node and prepare for the coming era of front-end engineering.

Why choose node middle tier

Before talking about this topic, I would like to share with you an article ([exploration] NodeJS middle tier construction), which makes me understand the Node middle tier more deeply, especially the last PPT from Taobao.

Applicable scenarios for existing development patterns

Each of the development modes mentioned by Yubo has its own application scenarios, and no one completely replaces the other.

  • For example, the back-end oriented MVC has high business efficiency in doing some synchronous presentation, but it will be more difficult to communicate with the back-end development when it comes to the page combining synchronous and asynchronous.
  • Ajax mainly spa-type development mode, more suitable for the development of APP type scenarios, but only suitable for APP, because SEO and other problems are difficult to solve, for many types of systems, this development mode is too heavy.

Front end separation

In terms of responsibilities, the node middle layer realizes the separation of front and back ends:

  • Front end: Responsible for the View and Controller layers
  • Back end: Only responsible for Model layer, business processing/data, etc

Take our company for example, the previous project of the front desk of the website was MVC based on the back end. When we met the pages combining synchronous and asynchronous, it was very painful to communicate with the back end frequently.

For the front end, the space to play is very limited, for example: performance optimization, only in the front end is very limited, it needs to work with the back end to achieve, for example, in the later part I will write about no refresh loading.

The front-end master Controller, you can do routing design, website directory structure, website front-end architecture. Once you’ve mastered View, you can write and bind data using a back-end template engine (JADE/PUG,Ejs, SWIG, etc.). Not to mention, puGs and mixins allow us to functionalize HTML and make it much more efficient.

NodeJS allows the front end to do this without having to learn a new language.

Based on NodeJS “full stack” development

The following diagram illustrates the Node middle layer in a very simple way

Performance issues in the middle tier

With an additional layer of communication, there is bound to be some performance loss. But what is lost in layering is surely made up for in other gains, and proper layering can make responsibilities clear and collaboration easier, greatly improving development efficiency. You can also optimize communication methods and protocols to minimize loss as much as possible.

Take my company’s website for example: A static detail page with a lot of (dynamic) data, user profiles, comment information, orders, etc., requires 5 or 6 asynchronous requests. Node middle layer can broker these requests and easily implement Bigpipe.

On a PC you might think it’s ok to send 5 or 6 asynchronous requests, but on a wireless end it’s expensive to set up an HTTP request on a client’s phone. With this optimization, performance is improved several times.

Why JAVA/PHP when Node can do everything?

Our intention was to separate the front end from the back end, and to think about that kind of defeats our intention. Even with Node replacing Java/PHP, there is no guarantee that we won’t encounter some of the problems we face today, such as unclear responsibilities. Our goal is to layer development, professional people, focus on doing professional things. The JAVA/PHP based infrastructure is already strong and stable, and much better suited to doing what the current architecture does.

The tasks on the front end are more important

In the common development pattern of front and back end separation, the back end provides the routing structure and data binding of the page for the front end, and the front end only needs to cut the page and a little logic.

In the middle layer of Node, the front end not only needs to cut pages and do page logic, but also needs to do URL design, page data binding, joint tuning and communication, and also needs to consider SEO issues, pseudo static pages, title/keyword Settings, site map, even including error logs and so on.

Although the front-end workload has increased, the modulary-based development has improved overall efficiency. For back-end programmers, the interface integration work to the front-end server for processing, and the front-end coupling degree is greatly reduced, workload and work efficiency are reduced.

In addition, due to the separation of the front and back ends, the tests can be separated, specifically testing the interface and specifically testing the UI layer.

conclusion

I think full stack nodeJs-based development will become more and more popular in the future, which will lead to the engineering of the front end. But there is still a long way to go before Node full-stack development becomes a stable and convenient development tool. The company’s trading platform project is a good practice. Next, please continue to pay attention to my summary of this project, hoping to bring you inspiration.

Continue to pay attention to the other articles in the series of Node middle layer practice (1) — NodeJS based on the full stack of Node middle layer practice (2) — Build project framework Node middle layer practice (3) — Webpack Configuration of Node middle layer practice (4) — template engine PUG Node middle Layer practice (5) — Express-middle layer logic processing