Skip to content

midway serverless: get scratch to serverless for front end developers

Jump to bottom
Lellansin Huang edited this page Aug 21, 2020 · 1 revision

The cloud isn’t this mystical thing, it really is, it’s server computers, and hard drives and processors, all sitting somewhere in the physical world.

Every time has its opportunities. And Now CloudNative is coming, all the cloud providers have been ready to change the way we develop. As front-end developers, are we ready to join this new area, to hug the sweets of change or rose with thorns?

There’re already many products and framework for us to compare and use to join. With the practice and summary of Alibaba on-premise, we are integrating existing framework with serverless products, and hope to simply the way which cloud function develop of community now.

This post is for telling how to get scratch to SSF (serverless for front-end) developers。

Step 1 ignore platform

The front-end developers of Alibaba had practiced about Midway Web Framework last year. It’s not easy to convert traditional application to Serverless form, which shows us sugar may become barrier.

When we handle a simple HTTP request, it’s straightforward to rewrite the Web API to a new function. As for certain application, depending on its routes, there could be 1, 2, 3, 4, … 100 APIs. Well, actually from the request to the response, there’re barriers waiting us across the entire flow.

First barrier, which provider should we choose? There would be many advertisements about it when we seeking for it on search engines. Well, midway-serverless provide a consistent template project to avoid it. To quickly start, we need install the CLI tool.

npm i@midwayjs/faas-cli -g

Using f -v to check if is success. Most of our features start with this CLI tool. It have been integrating many providers like Alibaba Cloud (Function Compute), Tencent Cloud (Serverless Cloud Function) etc, with develop/debug/deploy etc support.

Let start the first example.

f create
❯ faas-standard - A serverless boilerplate for aliyun fc, tencent scf and so on
 faas-layer - A serverless runtime layer boilerplate

Output code form:

// midway IoC decorator
@Provide()
export class MyFirstFunctionClass {
  
  // first function
  @Func('api.user')
  async myFn1() {
  
  }
  
  // second function
  @Func('api.book')
  async myFn1() {
  
  }
  
  // third function
  @Func('api.store')
  async myFn1() {
  
  }
}

midway-serverless using typescript & class, so that every function can be reusable with OOP approach.

Setp 2 better functions form

There are common forms about FaaS handler, like this:

// for events
exports.handler = (event, context, callback) => {
  callback(null, 'hello world');
};

// for HTTP
exports.handler = (request, response, context) => {
  response.send('hello world');
};

For front-end developers, there already were CSR, DevOPS and FullStack Dev etc, as for the Koa family we got use to, how could we get a better practice?

Don’t worry, let check out the midway serverless solution.

// Midway IoC decorator to declare this class to be provided
@Provide()
export class MyFirstFunctionClass {
  
  @Inject()
  ctx;
  // first function
  @Func('api.user')
  async myFn1() {
    this.ctx.body = 'hello world';
  }
  
  // second function 
  @Func('api.book')
  async myFn1() {
    this.ctx.type = 'html';
    this.ctx.body = '<html><body>hello world</body></html>';
  }
  
  // third function
  @Func('api.store')
  async myFn1() {
    const data = await request('http://xxxx/api/data.json');
    this.ctx.set('X-HEADER-TIMEOUT', 2000);
    this.ctx.body = {
      data: {
        success: true,
        result: data
      }
    };
  }
}

it’s obvious that multi function would become clearer, and easy to quick start.

In the other side, we can almost reuse the Midway Web Framework’s decorator, even arbitrarily port the IoC-formed code between Midway Web and Midway Serverless.

Step 3 watching changes

After coding, if we are using the common mode to develop a serverless app, then we should start a container like docker or package the code to publish to to platform for further test and regression.

Both is not friendly to developers, we prepare a new way to optimize, that we can just start a watching deamon to do it like front-end developers always do, writing codes and just refresh the browser.

f invoke -p

Server already started at http://127.1:3000, with ability about test and debug.

Step 4 deploy

After coding and testing, we can deploy the project to Cloud providers, which we can simplely config with f.yml file.

// f.yml
provider:
 name: aliyun // Alibaba Cloud

And deploy it.

f deploy

We saw a lot of solutions, no OP, pay per request, low cost and simplified logic, so that serverless mode can be popular. There is gap between essence and traditional application development. Serverless configures aggregated resources through YML, and the platform provides resource services. And, the business only needs to write a single logical code. After the logic is simplified, it is no longer necessary to consider reuse, iteration, even maintenance and management.

Conclusion

There are several things at all:

  1. avoid vendor-lock and selecting, focus on code.
  2. avoid duplicating efforts, reuse Web application codes.
  3. avoid test on docker or platform, do it local.

midway serverless is a serverless framework to help guys to enjoy. It is also a framework for future capability collaboration and production on the Cloud. The handling of these pitfalls is only a small part of it. In fact, its complete capability would be stronger. It provides more traditional capabilities such as dependency injection, decorator customization, business configuration management, componentization, and even customized runtime and private deployment. These solutions is comming soon.

Quick Start

Clone this wiki locally