This article is written by zhangwei

preface

In the preface, I would like to raise three questions:

1. What does front-end developer learn about Node development?

2. What problems can Node development help us solve?

3. What is the Koa framework?

Meaning of Node development

In recent years, as the scope of the front end has grown, so has the focus of front-end developers. Most people’s definition of the front end is to be responsible for the page display, do not need to care about the data. However, with the development of business, more front-end developers began to pay attention to the definition of interfaces, front-end and back-end interactions, and the design and implementation of data structures. Node is easier to use than traditional C, C++, Python, Java and other languages, and its syntactic features are easily accepted by front-end developers because Node should be the first choice for front-end learning. Learning Node can define a clearer architecture, help the front end expand the scope of the business, and mean more possibilities.

Problems solved by Node development

The definition of the front and back end is becoming increasingly blurred, and in many companies’ medium and large projects, the architecture has evolved from a traditional front and back two-tier structure to a front, middle and back three-tier structure. At the same time, the front-end developers know best what data structures they need, so it’s a good idea to leave the definition of data structures to the front-end developers. In addition, it is possible to separate the more intimate parts of the backend and client side into middleware, such as server-side rendering, data aggregation, interface forwarding, and so on.

basis

Definition of the Koa framework

The Koa framework is a Web framework based on Node implementation.

In contrast to the Express framework, the callback function is discarded and exception handling is effectively enhanced.

The callback function is discarded because Koa uses promises in conjunction with Async functions to implement asynchrony, solving Node’s callback hell. The Express framework implements error handling through error-handling middleware, which throws out errors layer by layer to be handled by error-handling middleware. Koa, on the other hand, uses global error event listening, so that error handling is written in the outermost layer.

Development of the Koa framework

Development of the Koa framework:

Express => Koa => Koa2 (The history of the Koa framework is essentially the history of the Node Web framework)

This is essentially a change in the way middleware is implemented:

Linear structure => Generator + CO library =>Promise+Async

Express framework

Express is implemented by encapsulating HTTP in Node.js.

Cons: Express is based on ES5 syntax, so the only way to implement asynchronous code is callback. When there are many levels of nesting, the familiar problem of callback hell arises.

Koa1.0

Koa1.0 is a web framework rewritten based on generator Es6.

Koa2.0

Koa2.0, based on Koa1.0, uses Es6 syntax for reconstruction, and uses Promise to realize Async.

Express Middleware Implementation

Express linear model middleware is implemented through a stack.

The source code parsing

Middleware related parts:

  1. The Router folder deals with the logic of routing.

  2. Pplication. Js loads all the core methods.

  3. Express.js inherits application.js and exposes the interface.

Application. js contains two important methods, proto.use and proto.handle.

Proto. use stores the middleware we need to mount on its own stack property.

The core idea of Proto. Handle is to take out and execute the middleware in stack by recursively calling the next method.

Why Express is linear in the middle?

When there is asynchronous code, asynchronous code (NEXT) execution is skipped and the current queue of events is waiting to complete, so the output of the code is linear.

Implementation principle of Koa middleware

Koa’s middleware implementation differs from Express’s in that Express uses a linear model and Koa uses an onion ring model.

Onion circle model features: All requests are executed twice through one middleware; Very convenient implementation of post-processing logic.

The source code parsing

The biggest middleware implementation difference between Koa and Express is the use method.

In Koa’s use function, the middleware is pushed, and a recursive call to the middleware array in the compose function returns a promise chain. The core of the process is to call the compose function and convert the array of middleware functions to the compose function const fn = compose(this.middlewaire); Fn is then called, which executes all middleware functions in turn; Context CTX is also used throughout all middleware functions.

conclusion

In a word, the significance of learning Node development for a front-end developer is summarized: short term small gain, medium term high gain, long-term inevitable trend. We can have richer tools for business improvement and a deeper understanding of front and back end interaction. Compared with Express, Koa framework is more suitable for future front-end development both in structure and syntax, so it is recommended to use Koa framework for front-end extension development.