JavaScript 的轻框架开发

浏览数：34 / 时间：2015年06月08日

http://www.open-open.com/news/view/1d64fed

为什么我们不用 Angular, Ember 或者 Backbone！

Muut 是一个特殊的论坛平台，它也有着巨大的梦想！当后端的性能已经极大优化的同时，前端也有着自己的目标：简单API，小体积，快速迭代。写代码就像在纸上先起个草稿，然后写入到许多文件中即可（猜译）。任何一个前端框架，比如，Angular 或者 Ember 都没问题！

下面是我们自己实现，而不用它们的原因。

首先是 API 方面的因素

开发 Muut 客户端时，我们基本的要求是简单的 API。它必须易用，没有额外的属性方法，不应该提供新的编程习惯（即不要制造另类的代码语法）。它应该易上手。不仅最终用户用它，而且个人也要用它，因为所有的网页界面都建立在它之上。

开始设计API之前，通常要先打好草稿。一个干净的桌子、一支笔、一张纸。我开始站在使用者角度构思API。从没有一切框架开始。

API 在 MVC 中是一个模块，要用 POJO（Plain Old JavaScript Object）的形式。因为框架提倡API的设计必须"single source of truth“。API不仅能跑在浏览器上，也能在后端（node.js）执行。它必须完全独立且易单元测试。

我不喜欢交差相关的方法及属性把API搞杂乱。Backbone.Model.extend 和 Em.Object.extend 都添加了大量的方法，给用户使用增加了复杂度。违背简单的目标，它不被我们接受！

小体积

更小的文件会更快加载，节省带宽。这是看得见的利益。更大的优势就是代码维护。小代码更容易把握，更快学会，更少的条条框框。

目前 Muut 客户端压缩后是 89kb，gzipped压缩后是 32kb。这比其它的论坛平台要小10 倍。体积明显很重要，当一半的网络访问来自于移动设备，开发人员就会寻找小工具来完成他们的工作。

下面的表会让你知道，我们使用的具有独立功能的工具应该是多大的体积。下面列的是我也在使用的，我正好做一下对比，以下均是minified后的大小：

模版、绑定、表单验证	Backbone.js	33.9kb
语法加亮，支持20+语言	Rainbowjs	28kb
提示，遮罩层，下拉框、标签切换等	Misc. tools	20kb
WebSocket communication	socket.io	40kb
Markdown 分析器	markdown-js	23kb

在实际的项目开始之前，这些大概就已经有150kb了。

当前，Muut的包含界面视图、控制器（api与视图之间的结合代码）等合并后再minified，仅40kb。一个框架应该是多大呢？框架的目标是更小的工作量去达到目标，所以它应该很小。40 kb是容易管理并继续在之上进行开发。在事情复杂化之前，我还可以增加大量功能。

全面掌控

Muut 使用原生的 pushState 方法来控制URLs,John Resig‘s "微模版" (6) 来显示视图，内部的模型与视图的交互使用自定义事件。而不使用路由及自动数据绑定的功能。

每个事情都完全按照我们预期的执行，出现bug也容易找到。这里没有不可知的，不明道理的代码。这里没有秘密，并且调用堆栈也很浅。我们可以针对特殊需要而去组织代码，而这里没有固定的框架来控制必须如何做。

不混合编程样式

没有外部包更新

没有这依赖hell

每周都能愉快发布新版本！

特殊需求

Muut客户端只是一个包含全部HTML代码的JavaScript文件。当文件加载后它会在一个单独的anchor(A)标签中渲染自己。项目的打包与启动与传统的单页面程序有很大不同。

Muut服务端必须能够随时通知客户端。客户端与服务端以一种点对点的双向模式进行通信。

我们通过WebSocket发送JSON-RPC消息，而不会考滤使用REST：像Muut这种实时程序不能构建在REST之上，因为REST所采用的是一种请求-响应模式并且它不能理解push事件等东西。

现在的框架，例如ember数据，是面向REST的，并且它们的示例和文档也是基于REST的。WebSocket示例有遗漏，或只是试验性的。Muut所面临的挑战是很独特的。

技术锁定

如果你查看了任何编程语言的框架史你会发现它也是一部失败史。框架来了又走了。今天的JavaScript框架都很年轻。Backbone, Angular和Ember现在可能很流行，但几年后就不一定了。

我们来看下Angular (蓝), Backbone (黄) 和 Ember (红)的Goole Trends（谷歌公司的一项搜索产品） (2):

技术分享

JavaScript是世界上最流行的编程语言，并且提供了多种编程风格。但事物也在以一种不可思议的速度变化着。因此使愤怒的框架社区不断推翻曾经最好的应用构建方式。

没有最好的方式.

有许多不同的替代方式,目前Angular正处于巨大的增长之中. "AngularJS允许你的应用程序拓展HTML." 这是最好的方式吗? Backbone和Ember是否正处于危险的境地?2012年在X框架中有所投入的公司,可能马上会意识到,他们的开发团队已经在谈论下一个新技术了. 作为使用这些框架其中之一的开发者,我担心他们的生命周期.

另一方面,让我们来比较一下jQuery和Angular (3):

技术分享