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
原文链接:https://my.oschina.net/u/3994299/blog/2995695
ale.js 对比其他框架相关推荐
- Vue.js 对比其他框架
对比其他框架 这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想要回答的. 客 ...
- 简单高性能的 JavaScript 组件框架 - Ale.js
老实说,写这篇文章其实是为了宣传我的框架,目前(在写这篇文章时)是beta.1版,还没有正式版发出. 那么接下来我们就来详细对比一下 React 和 Vue: 客观来说,作为 Ale 的核心开发者,我 ...
- html 简单机器人对话页面,简单的js聊天机器人框架BotUI
Botui是一款简单的js聊天机器人框架.Botui基于Vue.js,通过简单配置,就可以制作出一个功能简单的聊天机器人,非常神奇. 使用方法 在页面中引入botui.min.css和botui-th ...
- NeurIPS 2020 :ReID任务大幅领先,港中文开源自步对比学习框架,充分挖掘无监督学习样本...
作者丨葛艺潇 来源丨https://zhuanlan.zhihu.com/p/269112325 编辑丨极市平台 导语:本文介绍一篇作者发表于NeurIPS-2020的论文: <Self-pac ...
- 使用 ale.js 制作一个小而美的表格编辑器(2)
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 使用 ale.js 制作一个小而美的表格编辑器(3)
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 关于node.js的web框架的应用及并发性能测试
"Node.js 是服务器端的 JavaScript 运行环境,它具有无阻塞(non-blocking)和事件驱动(event-driven)等的特色,Node.js 采用 V8 引擎,同样 ...
- node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...
- 转 10 个最佳的 Node.js 的 MVC 框架
10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到: 收藏 +322 Node.js 是一个基于Chrome JavaScript ...
最新文章
- 为什么静态方法无法直接调用非静态成员变量和方法
- 怎么把圆角变直角_明式圆角柜的还原(下)——信民木工DIY达人大赛作品
- 景安河南机房电力事故,部分主机和云服务器停机
- Linux的文件系统及其硬盘分区挂载原理
- lcd背光节能matlab代码,【技术分享】LCD背光驱动节电技术-LABC/CABC
- python xrange_Python学习中的知识点(range和xrange)
- Java 发展简史:初生遇低谷,崛起于互联网
- C语言/C++基础知识代码整理
- 《一页纸项目管理》——读书笔记
- HG8120C 端口映射 配置家用服务器
- 【千律】OpenCV基础:图像边缘检测 -- Laplacian 算子和 LoG 算子
- 使用dockerfile创建一个包含jdk和tomcat的镜像
- 量化新手初识Campisi模型
- Blinky.c(171): warning: #1-D: last line of file ends without a newline
- 模块划分-4 模块划分
- 1132: 数字字符统计
- C++输入和输出:控制台I/O(键盘和屏幕)及文件I/O详细笔记
- 论文解读:Combining Distant and Direct Supervision for Neural Relation Extraction
- Linux 两台主机之间建立信任关系方式及基本原理
- Kubernetes 1.23:双栈IPv4/IPv6、CronJobs、Ephemeral卷
热门文章
- 木板切割最优matlab,矩形木板最优切割方案的设计与实现
- 10.第三章 数字特征与特征函数(3)
- c语言程序输入自己班级学号,C语言中设计一个程序就是通过输入学号就能知道班级的程序...
- 在ie edge中消除默认出现的密码框小眼睛标志
- matlab 画折线图,matlab 双坐标折线图画法
- 新疆计算机系统集成资质年审,新疆涉密信息系统集成资质
- VMware中设置处理器数量的问题
- Eclipse插件大全 (下)
- springboot启动报错Bean with name ‘xxxxService‘ has been injected into other beans
- Greenplm小把戏 - 增加分区脚本