Svelte
Svelte
Svelte 简介
在最新的《State of JS survey of 2020》中,它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。如果你不确定自己是否该了解 Svelte,可以先看一下 Svelte 的一些发展趋势。
开发者满意度
从2019年开始, Svelte出现在榜单中。刚刚过去的2020年,Svelte在满意度排行榜中超越了react,跃升到了第一位。
开发者兴趣度
在开发者兴趣度方面,Svelte 蝉联了第一。
市场占有率
如果你在19年还没有听说过Svelte,不用紧张,因为svelte 当时仍是小众的开发框架,在社区里仍然没有流行开来。
Svelte 优势有哪些
我们先来看一下 Svelte 和React,Vue 相比,有哪些优势。
No Runtime —— 无运行时代码
React 和 Vue 都是基于运行时的框架,当用户在你的页面进行各种操作改变组件的状态时,框架的运行时会根据新的组件状态(state)计算(diff)出哪些DOM节点需要被更新,从而更新视图。
这就意味着,框架本身所依赖的代码也会被打包到最终的构建产物中。这就不可避免增加了打包后的体积,有一部分的体积增加是不可避免的,那么这部分体积大约是多少呢?请看下面的数据:
常用的框架中,最小的Vue都有58k,React更有97.5k。我们使用React开发一个小型组件,即使里面的逻辑代码很少,但是打包出来的bundle size轻轻松松都要100k起步。对于大型后台管理系统来说,100k 不算什么,但是对于特别注重用户端加载性能的场景来说,一个组件100k 多,还是太大了。
如果你特别在意打包出来的体积,Svelte 就是一个特别好的选择。下面是Jacek Schae大神的统计,使用市面上主流的框架,来编写同样的Realword 应用的体积:
可以看出,Svelte的bundle size大小是Vue的1/4,是React的1/20,体积上的优势还是相当明显的。
Less-Code ——写更少的代码
在写svelte组件时,你就会发现,和 Vue 或 React 相比只需要更少的代码。开发者的梦想之一,就是敲更少的代码。因为更少的代码量,往往意味着有更好的语义性,也有更少的几率写出bug。
下面的例子,可以看出Svelte和React的不同:
React 的代码
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
Svelte 的代码
let count = 0;
function increment() {
count += 1;
}
虽然用上了16版本最新的 hooks,但是和svelte相比,代码还是很冗余。
在React中,我们要么使用useState钩子,要么使用setState设置状态。而在Svelte中,可以直接使用赋值操作符更新状态。
如果说上面的例子太简单了,可以看下面的统计,分别使用 React 和 Svelte 实现下面的组件所需要的代码行数
下面还是 Jacek Schae 老哥的统计,编写同样的Realword 应用,各个框架所需要的行数
Vue 和 React 打了平手,Svelte 遥遥领先,可以少些 1000 行代码耶!早日下班,指日可待。
Hight-Performance ——高性能
在Virtual Dom已经是前端框架标配的今天, Svelte 声称自己是没有Virtual Dom加持的, 怎么还能保证高性能呢?
性能测评
Jacek Schae 在《A RealWorld Comparison of Front-End Frameworks with Benchmarks》中用主流的前端框架来编写 RealWorld 应用,使用 Chrome 的Lighthouse Audit测试性能,得出数据是Svelte 略逊于Vue, 但好于 React。
另外一个前端框架性能对比的项目也给出了同样的答案:https://github.com/krausest/js-framework-benchmark。
Svelte 劣势
说完了 Svelte 的优势,我们也要考虑到 Svelte 的劣势。
和Vue, React框架的对比
在构建大型前端项目时,我们在选择框架的时候就需要考虑更多的事情。Svelte 目前尚处在起步阶段,对于大型项目必要的单元测试并没有完整的方案。目前在大型应用中使用 Svelte , 需要谨慎评。
类目 | Svelte | Vue | React |
---|---|---|---|
UI 组件库 | Material design ( 坦率的说,不好用 ) | Element UI / AntD | AntD / Material design |
状态管理 | 官网自带 | Vuex | Redux/MobX |
路由 | Svelte-router | Vue-router | React-router |
服务端渲染 | 支持 | 支持 | 支持 |
测试工具 | 官方网站没有相关内容 | @vue/test-utils | Jest |
我们在用 Svelte 开发公司级别中大型项目时,也发现了其他的一些主要注意的点
- 没有像AntD那样成熟的UI库。比如说需求方想加一个toast提示,或者弹窗,pm:”很简单的,不用出UI稿,就直接用之前的样式好啦~“
但是 Svelte 需要从0开始 ”抄“ 出来一个toast或者弹窗组件出来,可能会带来额外的开发量和做好加班的准备。
Svelte 原生不支持预处理器,比如说less/scss,需要自己单独的配置 webpack loader。
Svelte 原生脚手架没有目录划分
暂时不支持typescript,虽然官方说了会支持, 但是不知道什么时候.
还需要注意的一点是,React / Vue等框架自带的runtime虽然会增加首屏加载的bundle.js,可是当项目变得越来越大的时候,框架的runtime在bundle.js里面占据的比例也会越来越小,这个时候我们就得考虑一下是不是存在一个Svelte生成的代码大于React和Vue生成的代码的阈值了。
参考资料
最新文章
- Flip Game 分类: POJ 2015-06-15 14:59 22人阅读 评论(0) 收藏
- SQL查看一张表中是否存在记录
- 两张table数据同步--使用触发器
- Fix Elementary Boot Screen (plymouth) After Installing Nvidia Drivers
- 修改AspNetSqlMembershipProvider的密码规则
- mysql分页pagination
- [HAOI 2008]硬币购物
- iOS开源加密相册Agony的实现(三)
- Android开发基础规范(二)
- node03
- ConcurrentHashMap 与 Hashtable
- PDFBOX详解
- 关于STM32 ADC自校准的个人理解
- (转)centos 7 Tomcat 8.5 的安装及生产环境的搭建调优
- Automate Tdxw
- java程序的运行方式
- LumiSoft.Net 收发邮件
- 发行NEO的NEP-5合约代币
- kubernetes dashboard 二次开发
- Java Persistence with MyBatis 3(中文版) 第一章 MyBatis入门
热门文章
- 2.PyQt5【窗口组件】对话框-Dialog
- [NOIP2017 普及组]跳房子 【题解】
- 1月12日内容总结——文件和文件索引、链接、系统时间、克隆、定时任务、paramiko模块、公钥私钥、paramiko代码封装
- Docker命令的自动补齐
- zookeeper 部署
- 合肥光源纵向震荡数据源相关PV的增补
- ClickHouse exception, code: 62, host: hadoop102, port: 8123; Code: 62, e.displayText() = DB::Exception: Syntax error: failed at position 183 (end of query):
- [java安全基础 02]反射
- 组织炎症水平高的RA患者接受TNF拮抗剂治疗的效果更好
- CKeditor页面公式不显示