你认为的前后端一体化开发是怎样的?
在你看到这篇文章之前,你目前使用的前后端开发形式是怎样的?
是后端交给java,前端开发尽职尽责写前端页面? 还是前端开发揽下了BFF层,使用别的协议与java之类语言进行通信? 抑或是前端揽下了所有的活,从前端到运维,全都做掉了?
无论是何种形式,都存在前端开发、前后端接口协调、后端开发这么三种形式存在,那你有没有想过,如果前端开发者来完成这一整套开发模式,并且前端调用前端接口跟调用本地的函数一样便利,这是一种什么样的开发体验呢?
全新的开发体验
为了有丝滑的开发体验,我们隆重介绍下面这个新的应用框架:[malagu]([GitHub - muxiangqiu/malagu: Malagu Development Framework]https://github.com/muxiangqiu/malagu)。
我们以上一篇文章CLI生成的模板项目sample-app为例,sample-app的目录结构:
这个目录也是malagu项目的通用目录结构,我们在src/common
目录下定义前后端接口,如下:
export const WelcomeServer = Symbol('WelcomeServer');
export interface WelcomeServer {
say(): Promise<string>;
}
然后你要做的事情就是:
- 在node端上实现这个接口
- 在browser端上引用接口
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端的开发人员还需要告知前端页面的各种接口的入参和返回值吗?
完完全全不需要了,你看前端写接口的姿势应该是下面这样的。
前端调用接口
如下gif图片的这般调用,简直不要太爽了~
借助于ts的类型系统,调用方法直接提示,入参直接提示,返回值直接提示,这样的开发流程下,效率提高的不止一点点~
思考
当然,这样的开发模式并不是说完全没有缺点。
首先它需要一个很好的业务场景,那就是公司真的会用node来实现一些业务,比如BFF,目前应用很多。
其次你能接受示例代码中RPC的这种调用方式,它封装起来的调用接口很类似GraphQL,在浏览器看到的请求是这样的:
响应是这样的:
{"kind":"http","id":0,"content":"{\"jsonrpc\":\"2.0\",\"id\":0,\"result\":\"Welcome to Malagu\"}"}
再次,这个使用示例只是最最简单的,真正的应用场景其实还会涉及到鉴权、认证、版本兼容、升级,这些额外的因素都需要考虑的,这里只是抛砖引玉,让大家多一个新的思路~
关于malagu的使用实例可以关注豆米的博客的源码,欢迎提issue。
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 你认为的前后端一体化开发是怎样的? 的内容有疑问,请在下面的评论系统中留言,谢谢。