简单高性能的 JavaScript 组件框架 - Ale.js

[18510047382]

老实说，写这篇文章其实是为了宣传我的框架，目前（在写这篇文章时）是 beta.1 版，还没有正式版发出。

那么接下来我们就来详细对比一下 React 和 Vue：

客观来说，作为 Ale 的核心开发者，我们肯定会更偏爱 Ale，认为对于某些问题来讲用 Ale 解决会更好。但是在此，我们想尽可能地公平和准确地来描述一切。其他的框架也有显著的优点，例如 React 庞大的生态系统，或者像是 Angular 和 Vue 有着众多应对大型项目的解决方案。我们会尝试着把这些内容全部列出来。

React

React 和 Ale 几乎极其相似。事实上，React 就是初期 Ale 的灵感来源，它们都有：

• 在状态（数据）更新时只更新必要的 [使用 diff 算法]
• 提供了 响应式 和 组件化 的视图组件。
• 将注意力集中保持在核心库，而将其他功能交给相关的库。

由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Ale 更好的地方，比如更丰富的生态系统。

性能

这里我们仅针对 组件定义 和 组件渲染 做了测试，所以测试结果不能代表全部性能。但是可以确定的是，Ale 在这两个方面要胜过 React：（定义一次组件并渲染 1000 个元素）

• Ale: 46~52 (ms)
• React: 307~336 (ms)

当然，我们还做了关于响应式动态渲染的测试，结果展示 Ale 再执行动态渲染时比 React 要快 2.5 倍。

造成 React 的速度这么慢的原因，当然可能是因为我们用Babel进行动态渲染。但是不要忘记，Ale 并不需要编译，如果提前编译好 React，这对 Ale 就有一些不公平了。

HTML & CSS

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。

Ale 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。我们下面会详细分析一下。

JSX vs Templates

在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。

使用 JSX 具有下面这些优势：

• 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
• 开发工具对 JSX 的支持相比于现有可用的其他 Ale 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。

但是事实上，Ale 也提供了渲染函数，甚至 Ale 抛弃了传统的 Mustache(JSX) 模板，选择了不是那么普及的渲染函数，这其中包括以下几个方面：

• 依赖于 JavaScript 自身完整的编译器，使得我们不再需要手动编写模板渲染函数，这样做可以有效提高 Ale 模板编译的整体速度，因为渲染函数比模板引擎更加接近 JavaScript 编译器本身。
• 当你在 JSX 模板里添加 JavaScript 表达式时，一些编译器并没有相应的语法提示。同时，在一些场景中，你真的需要 JavaScript 完全编程的能力。

规模

向上扩展

好吧，说句实话，Ale 真的不是针对大型应用设计的，我们设计它的初衷就是希望它能够处理几乎全部的中小型应用需求。

相比之下，React 提供了强大的路由来应对大型应用。并且 React 社区在状态管理方面非常有创新精神 (比如 Flux、Redux)，这一点是 Ale 所不能比拟的。

向下扩展

React 学习曲线陡峭，在你开始学 React 前，你需要知道 JSX 和 ES2015，因为许多示例用的是这些语法。你需要学习构建系统，虽然你在技术上可以用 Babel 来实时编译代码，但是这并不推荐用于生产环境。

不过 Ale 向下扩展后就极其类似于 jQuery。因为你只要把如下标签放到页面就可以运行：

<script src="ale.js"></script>
复制代码

然后你就可以编写 Ale 代码并应用到生产中，你只要用 min 版 Ale 文件替换掉就不用担心其他的性能问题。

由于 Ale 的起步阶段不需学习任何复杂的知识点，比如 ES2015 以及 JSX，所以开发者只需不到半小时的时间阅读指南就可以立即建立简单的应用程序。

原生渲染

React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发，对开发者是非常棒的。相比之下，Ale 在这方面就显得薄弱一些。但是我们并没有就此收手，随着 Ale 慢慢发展起来，这些构建系统会相应发布，敬请期待。

体积

和 React 相比，Ale 显得极其轻量，Ale 的压缩文件（非 g-zip ） [包含操作 DOM 的 API ] 只有大约 8kb 大小，而 React 的核心库加 DOM 库则有着惊人的 108kb。

Preact 和其它类 React 库

类 React 的库们往往尽可能地与 React 共享 API 和生态。因此上述比较对它们来说也同样适用。它们和 React 的不同往往在于更小的生态和更高的性能。但是因为这些库无法 100% 兼容 React 生态中的全部，所以部分工具和辅助库可能无法使用。或者即使看上去能工作，但也有可能随时发生不兼容，除非你用的这个类 React 库官方与 React 保持严格一致。

Vue

到了对比最重要框架的时候了。之前我们说过 React 是早期 Ale 的灵感来源。事实上，Ale 的更多灵感来源于 Vue，这也是为什么 Ale 提供的部分特性和 API 都极其类似 Vue。

不过，尽管 Ale 与 Vue 在某些地方有相似之处，但是我们还是推荐你同时安装 Ale 和 Vue，因为 Vue 可以使 Ale 的开发变得更加高效。不过如果你不想这么做，也可以只安装一个框架。

复杂性

在 API 与设计两方面上 Ale.js 都比 Vue 简单得多，并且更加适合初学者学习，因此你可以快速地掌握它的全部特性并投入开发。

灵活性和组件化

与 Angular 相比之下，Vue.js 是一个更加灵活开放的解决方案。但是在 Ale 中，这种情况将会发生改变。

事实上，Vue 在不同组件间强制使用单向数据流，这使应用中的数据流更加清晰易懂，但是同时也限制了组件之间的灵活操作。在 Ale 中，只存在复合组件，并不存在父子组件，而复合组件中的任何组件都可以互相操作，因为它们共用一套数据。

性能

这里我们和 React 一样，也仅针对 组件定义 和 组件渲染 做了测试，所以测试结果不能代表全部操作的性能。但是可以确定的是，Ale 在这两个方面要胜过 Vue：（定义一次组件并渲染 1000 个元素）

• Ale: 46~52 (ms)
• Vue: 181~228 (ms)

TypeScript

Vue 为 TS 提供了官方的 类型声明 和 组件装饰器，但并不是所有人都想用 TS。在中小型规模的项目中，引入 TS 可能并不会带来太多明显的优势。在这些情况下，用 Ale 会是更好的选择。

体积

单独的 vue.min.js 文件体积有 88kb 大小，而 Ale 仅有大约 8kb 大小，相比 Vue 来说还算是比较轻量的。

学习曲线

就这点来说，两个框架都差不多，无非就是需要你具有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，你就可以非常快速地通过阅读指南投入开发。

但是具体来说，Vue 的 API 面积比起 Ale 要大得多，你也因此需要理解更多的概念才能开始有效率地工作。当然，Vue 本身的复杂度是因为它的设计目标就是针对大型的复杂应用。但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好。

Angular

当然，编者对于 Angular 的了解并不是很多，所以并不能很好地做出对比。在此，我们希望更多有经验的开发者能够帮助我们撰写对比 Angular 的文章，具体你可以点击下方 编辑页面，然后前往 Github 做出提交，感谢你的支持与理解！

补充

其实之前在性能方面还有一点需要补充，因为 Vue 和 React 采用虚拟 DOM 和 diff 算法。而 Ale 实际上是直接遍历真实 DOM 树，然后采用 diff 算法对比差异，这一点类似于 Angular 的脏检查，性能会受到一些影响。不过，这种方式也免除了需要创建虚拟 DOM 树的麻烦。

如果你看完了这篇文章，想更深入地了解 ale.js ，请访问：Github 、 Gitee 或 cn.alejs.org