ale.js 对比其余框架

欢迎！咱们相信你来这里的目的就是为了解 Ale 与其余大型框架的区别，这也正是咱们想要在此回答的。

客观来讲，做为 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