阅读 314

你认为的前后端一体化开发是怎样的?

在你看到这篇文章之前,你目前使用的前后端开发形式是怎样的?

是后端交给java,前端开发尽职尽责写前端页面? 还是前端开发揽下了BFF层,使用别的协议与java之类语言进行通信? 抑或是前端揽下了所有的活,从前端到运维,全都做掉了?

无论是何种形式,都存在前端开发、前后端接口协调、后端开发这么三种形式存在,那你有没有想过,如果前端开发者来完成这一整套开发模式,并且前端调用前端接口跟调用本地的函数一样便利,这是一种什么样的开发体验呢?

1、全新的开发体验

为了有丝滑的开发体验,我们隆重介绍下面这个新的应用框架:malagu

我们先移步到这篇文章malagu框架的简单介绍,了解一下malagu框架。

好的,了解完了,我们继续~~

malagu框架的简单介绍CLI生成的模板项目sample-app为例,sample-app的目录结构:

这个目录也是malagu项目的通用目录结构,我们在src/common目录下定义前后端接口,如下:

export const WelcomeServer = Symbol('WelcomeServer');

export interface WelcomeServer {
    say(): Promise<string>;
}
复制代码

然后你要做的事情就是:

  • 在node端上实现这个接口
  • 在browser端上引用接口

1.1、node端实现接口

实现say方法:

import { WelcomeServer } from '../common/welcome-protocol';
import { Rpc } from '@malagu/rpc';

@Rpc(WelcomeServer)
export class WelcomeServerImpl implements WelcomeServer {
    say(): Promise<string> {
        return Promise.resolve('Welcome to Malagu');
    }
}
复制代码

那这个时候后端还需要使用诸如yapi这类的平台去维护这些接口吗?node端的开发人员还需要告知前端页面的各种接口的入参和返回值吗?

完完全全不需要了,你看前端写接口的姿势应该是下面这样的。

1.2、前端调用接口

如下gif图片的这般调用,简直不要太爽了~

借助于ts的类型系统,调用方法直接提示,入参直接提示,返回值直接提示,这样的开发流程下,效率提高的不止一点点~

2、思考

当然,这样的开发模式并不是说完全没有缺点。

首先它需要一个很好的业务场景,那就是公司真的会用node来实现一些业务,比如BFF,目前应用很多。

其次你能接受示例代码中RPC的这种调用方式,它封装起来的调用接口很类似GraphQL,在浏览器看到的请求是这样的:

响应是这样的:

{"kind":"http","id":0,"content":"{\"jsonrpc\":\"2.0\",\"id\":0,\"result\":\"Welcome to Malagu\"}"}

再次,这个使用示例只是最最简单的,真正的应用场景其实还会涉及到鉴权、认证、版本兼容、升级,这些额外的因素都需要考虑的,这里只是抛砖引玉,让大家多一个新的思路~

关于malagu的使用实例可以关注豆米的博客的源码,欢迎提issue。

关注下面的标签,发现更多相似文章
评论