Rocket Chat，一个纯前端技术构建的开源产品

这周向大家介绍一个有趣的产品，Rocket Chat。Rocket Chat是一个开源的产品，在功能上它是Slack的替代开源产品，与国内的企业微信或钉钉非常类似，但主要是集中在聊天这一块。

有趣的到不是它是开源的产品，而是它是一个完全由前端技术构建的产品。这个做法也算是非常特别了。

技术构成

首先，从Rocket Chat的Github主页上，我们可以大致了解到它的技术组成。

光是从这个图上就可以看到，这个产品主要编程语言，不是JavaScript就是TypeScript。

具体下来说，使用到的一些前端技术主要包括

•语言：JavaScript / TypeScript•后端框架：NodeJS•移动端开发框架：React Native•跨平台桌面开发框架：Electron•前端框架：Preact

框架简述

对这些技术或框架做下简单的介绍

JavaScript / TypeScript

JavaScript就不用解释了，不管做不做前端开发，对这个语言都应该有所了解才对。

而TypeScript则是基于JavaScript之上，增加了静态类型检查的一门语言，由于JavaScript过于灵活，当项目越来越大时，基于JavaScript的代码越发难以控制与维护。这就使得TypeScript这些年越来越流行，它在易读性，可维护性上远远优于JavaScript.

TypeScript是微软的杰作。TypeScript与Java语言非常类似，后端Java程序员应该会觉得非常熟悉。

 public async queryFavors(): Promise<Contact[]> {
  const querySQL = "select * from contact_relation_ cr left join contact_ c on c.userId  = cr.userId where cr.'type' == $type";
  const results: IContact[] = await this.getRepository().executeQuery<IContact>(querySQL, {
        $type: ContactRelationType.Favor
  });
  const favors: Contact[] = [];
  results.forEach(result => {
        favors.push(this.instanceFromDB(result));
  })
  return favors;
}

是不是和Java有点相似？

1.Node.js

Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时框架。Node.js是使用前端语言编写后端服务的一个非常有名的框架。

你可以使用JavaScript或TypeScrpt来编写Node.js的代码。

早些年，Node.js影响力非常大，主要是它的事件循环机制相对过往Java同步阻塞，非常高效，很多公司或程序员对这个都非常赞赏。不过近些年，Node.js在国内流行度在下降。

相比Java强大的生态，Node.js在生态上差了很多，而且JavaScript这门语言坦率的说，在面对复杂的后端业务上，相比起Java，在维护性上及阅读性上都有所差距。

不过, Rocket Chat使用Node.js来编写它的后端，证明了它仍然是值得考虑的后端选择。

2.React Native

移动端在跨平台解决方案上，最流行的两个可能就是React Native与Flutter了。

在跨平台解决方案上，React Native是先行者，它也是前端技术，React Native与React同出一门，都是Facebook的杰作。

不过这几年，React Native的风头似乎没有Flutter大。Flutter的实现机制决定了它在性能上更高效，所以也更吸引人。

当然，对于前端团队来说，使用React Native也能编写出非常好的移动app，肯定比不熟悉的Flutter来得更容易。

3.Electron

我前几周才专门就这个技术写了几篇文章。文末我会给出访问链接。

Electron是时下非常流行的跨平台桌面开发技术，它是基于Node.js + Chrome内核的实现。你可以使用前端技术来绘制UI，又可以使用Node.js与原生操作系统打交道，比如存储文件或读取数据库等。

这使得基于Electron来开发一个跨平台桌面应用的性价比非常之高。

事实上，基于Electron的东西现在非常多，比如Slack,PostMan,Visual Studio Code,draw.io,Mongo Compass,Motrix等，国内也有阿里云网盘桌面端，迅雷X等都是基于Electron的实现。

关于Electron，可以参见我前几周的文章。链接在文末.

4.Preact

如果说起React，可能大家会非常熟悉。但Preact可能知名度就没有这么高了。Preact是什么呢？

Preact是一款轻量级的取代React的前端类库。它几乎完全兼容React，但更小，更快。（兼容是指它的写法与React几乎一样）

由于它的小和快，这使得一些习惯React，又觉得它太重了的，纷纷转向Preact。

Preact的轻小，又基本兼容React，使得它具有非常独特的魅力，

特例或常态？

那我们就会有一个疑问，这种完全基于前端技术来编写一整套产品的做法，究竟会是特例还是未来的常态？

完全使用前端技术的优势是非常明显的：

•整个团队使用同一套技术，沟通与协调更方便，成本更小•无论是React Native还是Electron，都是跨平台的解决方案，性价比极高

所以，类似Rocket Chat这样，使用前端技术构建一整套产品在成本及收益的考量上非常可取。

但我认为，有几个困难是导致这种选择并不会成为常态：

1.不同端的技术分裂发展很久了，不同端团队使用不同技术来完成自己方向的功能这是当前的主流做法。一个公司或团队想完全使用前端技术，在组织人员上就存在困难。2.虽然都是前端技术，但坦率的说，使用同样的JS或TS语言来写后端和写WEB网页，需要的是不同的思维。而这一点恰恰是当前很多前端人员缺少的，由于长期是开发WEB，他们在理解后端，移动端以及桌面端上可能并不是非常准确。

所以，除非一个团队具有一定数量的优秀的掌握前端技术又对其它端的编程有一定思维了解的程序员，否则完全使用前端来开发产品可能只是特例，并不会成为常态。

关于我

我是御剑，一个致力于实践与传播编码之道的全栈式程序员。