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

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

是后端交给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。