What 什么是 Svelte？ 答：Svelte 是一个构建 web 应用程序的工具。...Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，关键区别有 3 点： 编译时间不一样； 无虚拟 Dom； 响应式原理不一样； 哈~ React、Vue、Svelte...可以粗暴简单这样记忆，Svelte 和 Vue 是一对，SolidJS 和 React 是一对。...书写风格 Svelte 和 Vue 很像；而 SolidJS 和 React 很像； Why 总在说预编译，为什么要预编译？...答：Svelte 的编译策略决定了它跟 Virtual DOM 绝缘。
崭露头角的 Svelte 应该是其中的选项之一。图片简介Svelte 是一个构建 web 应用程序的工具。它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。...有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。...这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。...图片Svelte 性能还不错，至少没有我们预期的那么糟糕。PS：sveltedom 是把数据和真实dom之间的映射关系，在编译的时候就通过AST等算出来，保存在p函数中。...同时，这也说明“如果项目中涉及了dom操作越多，那这个p函数就越大，编译后的代码提交就会增大”。
虽然Svelte在本世纪20年代初才进入主流，但它存在的时间其实要长得多。...GitHub的第一次提交是在2016年末，它的创造者是Rich Harris，一个开源奇才，他最著名的另一项发明是Rollup。...我们本可以对简单的动态属性做同样的工作，但这种方式为我们节省了一些代码——在Svelte中经常遇到的思考模式。 当用户按下enter键时，我们希望将新书标题添加到列表中。...Svelte对.svelte文件实际做了什么，它什么时候处理它? 答案是: Svelte实际上是一个编译器!在代码加载到浏览器之前，它就完成了大部分工作。...我们的迷你应用程序现在完成了。这还不包含顶部栏和背景渐变，但现在你应该很容易添加这一点。
我想使用 16.x 来编译我的应用程序。在 GitHub Action 的编译日志中，可以看到正在使用Node 14.x 版本。...将以下代码添加到您的 package.json 文件中。...每次你向受监视的分支推送提交或接受拉取请求时，系统都会自动运行一次生成，并将你的应用和 API 部署到 Azure。...通常使用不需要服务器端渲染的库和框架（例如，Angular、React、Svelte、Vue 或 Blazor）来生成静态 Web 应用。...这些应用包括构成应用程序的 HTML、CSS、JavaScript 和映像资产。对于传统 Web 服务器，这些资产与任何所需的 API 终结点一起由单个服务器提供。
今天大师兄要介绍的 Svelte 应该是其中之一。 简介 Svelte 是一个构建 web 应用程序的工具。它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。...有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。...这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。 你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。...Svelte 性能还不错，至少没有我们预期的那么糟糕。 PS：sveltedom 是把数据和真实dom之间的映射关系，在编译的时候就通过AST等算出来，保存在p函数中。...同时，这也说明“如果项目中涉及了dom操作越多，那这个p函数就越大，编译后的代码提交就会增大”。
因此Rich 为 Ractive投入了大量的心血，花光了他所有的周末和晚上的空余时间去开发项目。这也是他第一次为开源投入了大量的经历，为今后的开源事业奠定了很好的基础。...因此 Rich 说已经有了一种新的编译方案，能够使得编译后的代码小于输入代码，真实令人期待~ 还谈论到目前正在考虑类似 Error boundaries、Suspense、React Server Component...如何划定核心库和生态库的界限？...但是你也被迫需要去创造一些周边生态库（路由管理、状态管理以及如何去管理你的 CSS） 这确实造就了关于 React 中非常多的 CSS 以及 JS 库的创新，但是同时带来的问题就是选择困难症，就像 Rich 提到的关于 如何将...CSS 添加到 React 中 这件简单的事情，都没有一个答案。
在探索解决方案的道路上，我意外地发现了 svelte-dnd-action 这个库。当时，它最新的提交竟然就在 18 小时前！天哪，我真是羡慕不已！...同时，我们也对应用程序进行了结构化调整，以便能够复制粘贴大约百分之二十的与查询和修改数据相关的代码，只需稍作修改即可。 整个重写过程仅花了三个星期的时间。...2 月 26 日完成了初始提交，到 3 月 15 日，Svelte 应用已经部署并投入生产。我们已经开始开发新功能，并且进展迅速。...若将每六周的 React 开发时间与一天的 Svelte 开发时间相对应，那么我们将在半天内就赚回重写应用程序所花费的时间。当然，这种说法可能稍显（更为）乐观！...有了符文和 untrack 函数，确保响应性在正确的时间和位置发生变得轻而易举，而不再是不受控制的。
自从 shadcn/ui 在 GitHub 上第一次提交以来，到现在已经有一年了。该项目是一个可重用的组件集，可以复制和粘贴到应用程序中用于构建组件。这样就不用安装库了。...其次，作为一个 JavaScript 库，Htmx 使开发人员能够仅仅使用 HTML 来创建交互式 Web 应用程序。...在前端框架中排名第三的是 Svelte。Svelte 是一个基于编译器的前端框架，利用声明式语法和反应性来构建高性能、可维护的 Web 应用程序。...备受期待的 Svelte 5 有望引入重大改进和诸多新特性，进一步增强开发体验和应用程序性能。...Next.js 14 于 2023 年发布，最显著的变化是 Turbopack Optimizations 缩短了页面初始加载时间，改进了性能，减少了代码。
之所以没有考虑 React，是因为它的学习过程太耗时间，而且也不提供能开箱即用的解决方案。Vue 和 Svelte 在这方面的优势明显更大。...Svelte 和 Vue 的另一主要区别，就是减少了浏览器与应用程序之间的层数，从而实现性能优化、加快任务完成速度。 第十，自动更新。借助声明变量，Svelte 能够自动更新开发者数据。...关于前端堆栈的Escape Benchmark 迁移方法 时间：Sophie 团队选择在 8 月份进行迁移，因为这时的应用程序使用量较低。...在编译完成之后，技术团队马上就感受到了应用程序的“瘦身”成效。与其他框架相比，Svelte 提高了加载速度，帮助应用程序告别了曾经嵌入在逻辑代码之外的“运行时”。 更佳开发者体验。...Svelte 通过将逻辑（JS）、结构（HTML）和样式（CSS）组合在同一文件中，大大优化了面向组件代码的可读性和可维护性。其独特之处，就在于所有元素都会被编译在同一.svelte 文件当中。
借助 Server Actions，我们可以定义可以直接从 React 组件中调用的服务端功能，消除了手动 API 调用和复杂状态管理的需要，这在数据变更和表单提交等方面特别有用。...作为最终用户，这些变化意味着你会看到稍微更快的构建时间，以及对于像 Vue TypeScript 和其他依赖于 Vue 解析器的插件执行时间的改进。...它以高效的编译策略受到开发者的亲来，不同于直接将代码传送至浏览器，Svelte 的编译器会将 Svelte 代码转换成高度优化的 JavaScript 代码。...通过使用 state Rune 声明响应式状态，不同于简单地使用 let 声明，state Rune 清楚地向你和编译器指示数据声明为响应式状态。...Astro Dev Toolbar：Astro Dev Toolbar 提供了一套强大的工具，用于调试和优化 Astro 应用程序。
Svelte："Svelte 是一种全新的构建用户界面的方法。传统框架如 React 会在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。”...Svelte 对 UI 在编译时做了大量处理。 Lit 使用现有标准，并添加了一些轻量级功能。 框架为我们解决什么问题？ 声明式编程 声明式编程是一种在不指定控制流的情况下定义逻辑的范例。...框架的表现力越强，包体积越小，同时构建工具和编译时间的负担就越大。 Svelte 声称虚拟 DOM 是纯粹的开销。...我同意，但 “编译”（如 Svelte 和 SolidJS）和自定义客户端模板引擎（如 Lit）是不是也是一种不同类型的纯开销呢？...在 ReactJS 和 SolidJS 中，我们创建了可以转换为命令式代码的声明式代码，在 DOM 中添加或删除这个标签。在 Svelte 中，会直接编译生成这样的代码。
这恰恰就是Svelte要做的东西，它采用了Compiler-as-framework的理念，将框架的概念放在编译时而不是运行时。...Svelte会在代码编译的时候将每一个状态的改变转换为对应DOM节点的操作，从而在组件状态变化的时候快速高效地对DOM节点进行更新。...•public文件夹，这个文件夹是用来存储项目的静态文件（index.html, global.css和favicon.png）和rollup编译生成的静态文件（build文件夹底下的bundle.js...，还保留了如React.createElement，setState等框架函数的调用代码，而Svelte编译完之后，框架代码会被转化为操作原生DOM节点的代码。... 接着我们再为刚刚新增的表单添加一个提交按钮，用户填完书本的信息后点击提交会新建一个book对象，新建的book对象会被加到books列表中去： ...
) 组件使用各自框架的在线 SFC 编译器进行单独编译 Vue: sfc.vuejs.org @3.1.4 -> todomvc.vue.js Svelte: svelte.dev/repl @3.38.3...-> todomvc.svelte.js 编译文件使用 Terser REPL 压缩，然后删除 ES imports 和 exports。...也就是说，在理论上，如果一个应用程序包含超过15.04 / 0.78〜= 19个 Todomvc 大小的组件，则 Svelte 应用程序将最终比Vue应用程序体积更大。...在更广泛的意义上，本研究旨在展示框架如何在compile-time 编译时和runtime spectrum 运行时找到一个平衡点：Vue 在源码上使用了一定的 compile-time 编译时 优化，...其实对于 Svelte 这个包大小这个问题，其实很早之前在 Svelte Github 中也对 React 和 Svelte 进行了广泛的讨论。 ?
作者 | Michael Rambeau 编译 | 郭露 出品 | CSDN（ID：CSDNnews） 01 最受欢迎的项目：zx、Vite和Next.js 今年最受欢迎的项目是谷歌的zx，...Vite是一个构建工具，可通过esbuild编译器提供出色的性能。Vite最初借助 Vue.js 社区提供支持，但如今Vite已兼容主要UI框架：React、Svelte和Lit。...与Next.js类似的是，Svelte拥有自己的元框架，即SvelteKit，可构建高性能应用程序。 排名第五的是Solid，是React的替代工具之一。...NAPI-RS可让JavaScript和Rust进行交互。 而Next.js则非常看好swc的发展，作为一个可扩展的Rust编译器，swc可将Babel插件移植到Rust上。...Bun采用的是Zig，而Turborepo和esbuild均采用的是Go。 在monorepo中广泛采用的仍然是Lerna。而单引擎工具Nx能够大幅减少构建时间，其覆盖范围一直在快速扩大。
作者 | Michael Rambeau 编译 | 郭露 01 最受欢迎的项目：zx、Vite和Next.js 今年最受欢迎的项目是谷歌的zx，可在JavaScript或TypeScript...Vite是一个构建工具，可通过esbuild编译器提供出色的性能。Vite最初借助 Vue.js 社区提供支持，但如今Vite已兼容主要UI框架：React、Svelte和Lit。...与Next.js类似的是，Svelte拥有自己的元框架，即SvelteKit，可构建高性能应用程序。 排名第五的是Solid，是React的替代工具之一。...NAPI-RS可让JavaScript和Rust进行交互。 而Next.js则非常看好swc的发展，作为一个可扩展的Rust编译器，swc可将Babel插件移植到Rust上。...Bun采用的是Zig，而Turborepo和esbuild均采用的是Go。 在monorepo中广泛采用的仍然是Lerna。而单引擎工具Nx能够大幅减少构建时间，其覆盖范围一直在快速扩大。
Vite 是一个构建工具，可通过 esbuild 编译器提供出色的性能。...Vite 最初借助 Vue.js 社区提供支持，但如今 Vite 已兼容主要 UI 框架：React、Svelte 和 Lit。...与 Next.js 类似的是，Svelte 拥有自己的元框架，即 SvelteKit，可构建高性能应用程序。 排名第五的是 Solid，是 React 的替代工具之一。...而单引擎工具 Nx 能够大幅减少构建时间，其覆盖范围一直在快速扩大。其竞争者 Turborepo 在被 Vercel 收购后抢占了巨大的市场。...JavaScript 中的 CSS 测试框架 移动开发 桌面开发 静态站点 状态管理 GraphQL 结论 为构建更好的网站和应用程序，元框架时代已悄然来临。
写在开头 近期我有写两篇文章，一篇是:petite-vue源码解析和掘金编辑器的源码解析，发现里面用到了Svelte这个框架 加上最近React17，vite大家也在逐步的用在生产环境中，我于是有了今天的思考...我们所有的一切开始，都直接启动一个浏览器即可 浏览器中的webIDE,可以直接引入远程依赖，浏览器可以运行Node.js，使用的都是esm模块化，不需要打包工具，项目启动的时间和热更新时间都非常短，构建也是直接可以在浏览器中构建...传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。 与使用虚拟（virtual）DOM 差异对比不同。...Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM 上面是官方的介绍，我们看看知乎这篇文章https://zhuanlan.zhihu.com/p/97825481,感觉他写得很好...Babel或者TypeScript之类的编译器来将JSX转换为浏览器能够理解的JavaScript语言。
频繁更新的开销：在频繁更新时，虚拟DOM需要更多时间进行计算工作。 大型项目的性能成本：即使现代框架进行了优化，比较和计算虚拟DOM的成本依然存在，特别是在构建虚拟DOM树时。...总结来说，Svelte代表了一种新的前端开发范式，通过编译时优化和减少代码量，提供了一种高效、简洁的开发体验。这对于追求性能和简洁性的开发者来说，是一个有吸引力的选择。...这一过程体现了Solidjs如何将声明式的代码编译为能够直接操作DOM的命令式代码，从而提高运行时性能。 3、“真正的响应式” Solidjs在其官网上被标榜为“真正的响应式”。...Svelte和Solid：超越虚拟DOM的前端框架 Svelte和Solid的崛起不仅标志着虚拟DOM的淡出，更多的编译时任务的加入，也展示了开发的新可能性。...在DOM操作时间方面，Solid似乎表现更佳，而Svelte在内存使用和启动时间方面有更好的数据。
从Todolist入门Svelte框架 Svelte入门 Svelte-重编译框架-编译器即框架 Svelte和React、Vue这些JavaScript框架类似，希望开发者更好的去构建交互式界面...，但不同的是Svelte在构建/编译阶段将应用程序转换为理想的 JavaScript 应用，而不是在运行阶段 解释应用程序的代码。...Svelte也没有采用Vue、React等流行框架都采用的虚拟DOM而是直接编译生成DOM，可以避免diff操作，理论上性能和手写原生js相同。 ...他设计 Svelte 的核心『通过静态编译减少框架运行时的代码量』，也就是说Vue 和 react 这类传统的框架，都必须引入运行时 (runtime) 代码，用于虚拟dom、diff 算法。...而Svelte直接编译生成DOM,理论上性能和手写原生js相同。Svelte应用所有需要的运行时代码都包含在bundle.js里面了，除了引入这个组件本身，你不需要再额外引入一个运行代码。
例如已经基本上将框架编译掉的Svelte或是Snowpack，这些工具能够利用现代JavaScript功能（例如ES模块）来提供更平稳，更快速的开发体验，几乎不需要配置，也不需要依赖于太多已安装软件包。...单页申请 接着我们来设置一个单页应用程序，试试Vue 运行npm init @vitejs/app并选择Vue模板后，可以获得Vite，Vue和一个来编译Vue的Vite插件。...Vite本质上是针对各自库和复杂Web应用程序的，进行了优化的Web应用程序框架。以后一定会出现为Vite创建Vue + Vue路由器+ Vuex模板的形式，我们预感这会比Nuxt更好。...不仅如此，对于React和Next.js，Svelte和Sapper / SvelteKit也是如此。 如果没有经过测试的Web应用程序框架可以选择所需的语言，Vite绝对是最优选择。...在这里，测试者尝试导入了一个100kB的JavaScript库，并添加了2万行CSS，将文件类型更改为TypeScript和Sass，强制Vite分别使用TypeScript和Sass编译器进行编译。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
