能替代 Vue 和 React 的框架,长什么样子?

简介: 能替代 Vue 和 React 的框架,长什么样子?

2022年,StackOverflowQ (https://stackoverflow.com/) Developer 调查中,Svelte 成为最受开发者欢迎的 Web 框架。


c266f8fb9f014a91a94df55f6def45de.png


Svelte 是一个全新的构建用户界面的 Web 应用程序。Svelte 读法是[/ sfet,本意是苗条的,细长的,优美的。从2019年开始,受到了非常多的关注,是开源社区目前最热门的前端框架。


Svelte 与诸如 React 和 Vue 等 JavaScript 架类,都怀揣着一颗让构建交互式用户界面变得更容易的心。


但是有一个关键的区别,Svelte 在构建/编译阶段会将应用程序转换为直接应用的 JavaScript 代码而不是在运行阶段解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。


Svelte 可以被用来构建整个应用程序,也可以被逐步融合到现有的代码中。你还可以将组件直接作为独立的包 (package)交付,并且不会有传统框架所带来的额外开销。


在 StackOverflow 今年的调查中,Svelte 成为众人聚焦的明星,而它目前的使用量也仅次于 Vue 位列第四,大有替代 Vue 、React 的趋势。


d9d1387c330c4007a5b7b6e934d500cc.png


专统架(如 React 和 Vue) 在浏览器中需要做大量的工作。与使用虚拟 (virtual) DOM 不同Svelte 将这些工作放到构建应用程序的编译阶段来处理。有人甚至直接将 Svelte 看作前端的“编译器而不是框架或者库,由此可见 Svelte 和其他框架的核心差异。


Vue 作者尤雨溪Q,曾经对 Svelte 有一段极为恰当的描述:


Svelte 的核心思想在于[通过静态编译减少框架运行时的代码量J


举例来说,当前的框架无论是 React Angular 还是 Vue,不管你怎么编译,使用的时候必然需要T引入] 框架本身,也就是所谓的运行时 (runtime)。


但是用 Svelte 就不一样,一个 Svelte 组件编译了以后,所有需要的运行时代码都包含在里面了,除了引入这个组件本身,你不需要再额外引入一个所谓的框架运行时!


果然,大佬讲话就是这么恰到好处的不多不少“刚刚好”。


b2ff496e2ddb4369bc5a6cc8fb54727d.png


而在我看来,Svelte 是否适合在大型项目中应用,还有待观察。虽然核心思想是不需要“运行时”,但是项目组件越多,运行时的代码量也就越多,且组件间的代码重复率也就越高,除此之外,现阶段的周边生态确实外于基本荒若的状态。


但是,如果你对偏原生前端开发有执念,Svelte 绝对让你浑身舒畅。


因为 Svelte 可以将组件作为独立的包 (package) 交付,所有如果你是在微前端架构下,做组件级开发,Svelte 就是神兵利器。


如果你对 Vue 比较熟悉,那么学习 Svelte 会让你感觉 so easy,因为 Vue 和 Svelte 都在 Template阵营,学习成本很低。



目录
相关文章
|
12天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
14天前
|
开发框架 缓存 前端开发
|
15天前
|
前端开发 JavaScript API
blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性。
探索多种博客引擎:Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress, Nuxt.js 和 Middleman。了解Gatsby,基于React的静态站点生成器,以其特性如React基础、静态生成、广泛插件支持、简便部署和现代开发流程脱颖而出。安装Gatsby需先安装Node.js,然后通过`gatsby-cli`创建新站点。开发涉及编写页面、本地开发、生成静态文件及部署。尽管Gatsby具有现代化和高性能优势,但也存在学习曲线和配置复杂性的挑战。
|
16天前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
16天前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
16天前
|
JavaScript 前端开发 API
Vue与React数据流设计比较:响应式与单向数据流
Vue与React数据流设计比较:响应式与单向数据流
|
17天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
17天前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
36 3
|
17天前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
28 1
|
19天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
23 0