图片简介Svelte 是一个构建 web 应用程序的工具。它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。...这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。...你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。发展趋势开发者满意度从2019年开始, Svelte出现在榜单中。...2020年，Svelte在满意度排行榜中超越了react，跃升到了第一位。在过去的两年里，也是碾压三大框架的存在，还能与最新的 Solid 并驾齐驱（都是90%）。...在最新的《State of JS survey》中，Svelte 被预测为未来十年可能取代React和Vue等其他框架的新兴技术。
调查由23,765名受访者完成，结果如下： React：80％ Angular：56％ Vue.js：49％ Svelte：15％ PreACT：13％ 此外还考虑了同一项调查中的“框架意识”： React...作为Google在前端框提供的产品，于10年以AngularJS（或Angular 1）的形式诞生，并立即受到热捧，主要由于开发人员能够构建现在称为单页应用程序的第一个框架。...Svelte ? 由Rich Harris于16年发布，作为前端框架新成员，采用不同于其他框架的方法来构建Web应用程序。...在11年最初发布，但依旧在开发界流行： 它的历史可以追溯到React，Vue，Svelte和其他所有公司之前。该框架从未出现在前端炒作的最前沿，但依旧稳步前进。...Ember与Angular类似在应用程序开发中采用更多包含电池的方法，并提供构建现代前端JavaScript应用程序所需的一切。遵循六个星期的发布周期且稳定性极好。
这是因为在一个 bundle 的应用程序中，这些 imports/exports不需要或在多个组件之间共享。...对于每个框架，默认使用 Vite 来创建和打包构建（Svelte 使用 hyderable: false）。每个应用程序同时设置SSR的模式再构建一次。...显然在真实世界应用程序中，有许多其他因素：将从框架中导入更多功能，并将使用第三方库。大小曲线将受到项目中纯组件代码的百分比的影响。...对以上所有的问题的答案回答可能是肯定的 —— 但现在我们需要明确的是"框架大小"是比单单比较 Hello World 应用程序的大小的更加细致的话题，这项研究就是为了证明这一点。...其实尤大总体来说就是想要凸显出在框架的对比中，单单使用 Jacek Schae大神 统计的 那个 RealWord 应用程序来说是有些不公平的，应该需要更加细致的对比。
简介 Svelte 是一个构建 web 应用程序的工具。它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。...这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。 你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。...你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。 发展趋势 开发者满意度 从2019年开始, Svelte出现在榜单中。...2020年，Svelte在满意度排行榜中超越了react，跃升到了第一位。在过去的两年里，也是碾压三大框架的存在，还能与最新的 Solid 并驾齐驱（都是90%）。...在最新的《State of JS survey》中，Svelte 被预测为未来十年可能取代React和Vue等其他框架的新兴技术。
现在随着各种新应用的崛起，到底是选择 Bootstrap、Angular、React、Vue 还是 Svelte，让开发人员很犯难。...70%），在 SSR 模式下大 110%； 在理论上，如果一个应用程序包含超过 15.04 / 0.78 约等于 19 个 todomvc 大小的组件，则 Svelte 应用程序将最终比 Vue 应用程序体积更大...此外，今年 9 月 Svelte Kit 团队宣布此框架正式进入候选发布阶段，意味着其稳定性终于得到了保证。...迁移过程中沉淀下来的经验 Sophie 表示，除了上述收益之外，还有其他一些关键因素值得探讨： 更高的性能、更流畅的体验。在编译完成之后，技术团队马上就感受到了应用程序的“瘦身”成效。...与其他框架相比，Svelte 提高了加载速度，帮助应用程序告别了曾经嵌入在逻辑代码之外的“运行时”。 更佳开发者体验。
在过去的两年中，Svelte得到了很多的赞扬，它远远不是“另一个前端框架”。它在2019年JS州调查中获得“年度突破”，随后在2020年满意度排名第一。...另一种选择是使用vite驱动的模板，或者使用SvelteKit，一个基于Svelte的框架，用于构建具有内置路由功能的成熟应用程序——但在本中，我们将尽可能保持它的简洁。...Svelte的语法是HTML的超集，所以任何在HTML文件中有效的内容在Svelte文件中也是有效的。 现在的问题是如何把动态的部分放进去。...这也是为什么Svelte应用程序的包大小如此之小的原因:所有不需要的东西都不会出现在输出中，所以Svelte可以省去运行时中所有不需要的部分。...我们的迷你应用程序现在完成了。这还不包含顶部栏和背景渐变，但现在你应该很容易添加这一点。
根据前端框架 Svelte 的创始人 Rich Harris 的说法，第一次重大修订的工作正在进行中。此前，该团队发布了 SvelteKit，这是一个用于构建 Web 应用程序的全栈框架。...“现在 SvelteKit 已经发布，并且已经非常稳定且得到广泛使用，我们的注意力将转回到 Svelte 本身上，”Harris告诉 The New Stack。...它使 React 不再需要在自己的应用程序框架中拼凑起来。” 简而言之，如果开发人员正在使用 Svelte 构建应用程序， SvelteKit 支持并提供了最佳方法来实现这一点，他解释道。...如果页面需要在无需重新加载的情况下更新，它也可以从服务器获取数据，使开发者能够创建 API 端点，以便在同一应用程序中甚至第三方也可以使用数据，他说。...随着 Vercel 的支持，情况已经发生了变化，一些客户现在正在使用 Svelte 。
在官方的介绍中，Svelte 即是一个前端 UI框架，同时也是一个 编译器。...在《State of JS survey of 2020》报告中，它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。...在最新的开发者感兴趣的前端框架中，Svelte更是超过传统的知名框架Vue和React，排在第一位。...这就意味着，基于运行时框架本身所依赖的代码也会被打包到最终的构建产物中，结果是不可避免增加了打包后的体积。下图是常见的前端框架运行时的大小。...如果需要修改端口号，可以打开package.json 文件，然后在启动命令里修改环境变量 PORT。
What 什么是 Svelte？ 答：Svelte 是一个构建 web 应用程序的工具。...Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，关键区别有 3 点： 编译时间不一样； 无虚拟 Dom； 响应式原理不一样； 哈~ React、Vue、Svelte...Svelte 像 LOL 中的 暗夜猎手·薇恩，虽然身板也很脆弱，但异常灵活 ，能有很大的秀的空间、门槛偏高，适合高手。...那咱好不容易学会了虚拟 Dom，现在又跟我说取消虚拟 Dom，为什么？ 答：Svelte 的编译策略决定了它跟 Virtual DOM 绝缘。...再分享几个有意思的数据：Svelte 在 2020 前端框架满意度排行榜中超越了react，跃升到了第一位，但在 2021 又被 solidJS 给超越了。
，但不同的是Svelte在构建/编译阶段将应用程序转换为理想的 JavaScript 应用，而不是在运行阶段 解释应用程序的代码。...一个简单的经验法则是：被更新的变量的名称必须出现在赋值语句的左侧。...这就意味着，框架本身所依赖的代码也会被打包到最终的构建产物中,因此Vue和React等框架打包后的体积相较于Svelte会相对更大。 ...下面是Jacek Schae的统计，使用市面上主流的框架，来编写同样的Realword 应用的体积： 代码量小 举个例子，Svelte中，可以直接使用赋值操作符更新状态，而在React中，我们要么使用...不错的运行速度 前端框架性能对比，结果中Svelte 略逊于Vue, 但好于 React。
不过，Cypress 测试并不能直接无缝迁移到我们的 Svelte 应用程序中。...这主要是因为我们在迁移过程中并未总是将 data-cy 属性一并移植，同时某些在 React 应用程序中适用的选择器在 Svelte 中并不直接兼容。但经过一些轻微的调整，我们很快完成了迁移工作。...在调试 Cypress 不稳定性的过程中，我们积累了大量经验，这使得迁移过程相对顺利。 有一点我想提一下，那就是在 Svelte 应用程序中，我们不得不在测试中增加了更多的 cy.wait 调用。...虽然它现在仍处于预发布阶段，但在我们的情况下，我们急需尽快发布生产应用程序（尽管 “尽快” 可能只是 “三周”）。因此，我们不愿依赖 alpha 软件，尤其是当我们对 Svelte 还不是很熟悉时。...在学习一个新框架的过程中，当遇到的错误既可能是因为自己的误解，也可能是因为框架本身的问题时，会面临诸多挑战。 另外，我们不想选择 Svelte 5 的另一个原因是其库生态系统尚未完成迁移。
如果你有什么好的想法，或者翻译中存在什么错误，欢迎指正，非常感谢。 一.介绍 欢迎来到Svelte的教程。它将使你轻松学会构建一个快速的小型web应用程序。...什么是SvelteSvelte是一个构建非常快速的web应用程序的js库。 它是一个类似于react和vue这样的js框架，它们共同的目标是使交互式用户界面的构建变得更容易。...但是Svelte有一个关键的不同：Svelte在构建时能够转换成理想的JavaScript，而不是在你的应用程序运行时解释你的代码。这意味着你无需负担由于框架抽象或者在应用首次加载时产生的性能损耗。...你可以使用Svelte构建你的整个应用程序，或者你可以在现有的代码基础之上渐进式的使用Svelte。你也可以将组件作为独立的包在任何地方使用，不会有依赖常规框架的使用成本。...理解组件 在Svelte中，一个应用程序由一个或更多的组件组成。组件是一个可复用的独立的代码块，他由HTML，CSS，JavaScript封装而成。文件后缀写为.svelte。
Svelte在2019年中成为后起之秀，接下来，让我们来简单的了解一下，这个新的框架。 “ Svelte是一种构建用户界面的全新框架。...像React和Vue这样的流行框架会在浏览器中完成大部分工作，而Svelte会将这些工作转变为在构建应用程序时发生的编译步骤。” 以上这段话是在他们的官方网站上所描述，但这到底是什么意思？...sveltejs / template svelte-todo cd svelte-todo 现在，我们已经有了一个适用于小型应用的汇总结构模板，现在，我们可以开始动手了。...target svelte应用程序将绑定HTML元素。...Svelte会自动将所有样式的范围调整到每一个组件，因此不需要BEM或者其他的CSS界定方法，但是要到达HTML标签，我们需要进入全局的范围中，幸运的是，我们现在可以使用:global{element}
翻译 | 红薯 出品 | OSC开源社区（ID：oschina2013） 在 JavaScript 前端开发框架中，Svelte 算是一个新来的搅局者，在网上我们已经听到很多关于 Svelte 的哔哔...「Svelte 与 React」 Svelte 和 React.js 两者都是基于组件的 JavaScript 框架，主要用于 Web 应用的开发。最主要的区别是 Svelte 没有使用虚拟 DOM。...诸如 React 和 Vue 这类传统的框架，它们的大部分工作都在浏览器上执行，而 Svelte 在构建应用的过程做就了大量的工作。 ...我只想从开发人员的角度看看，在使用 Svelte 和 React 开发应用程序时，感觉好吗？有趣吗？直观吗？ 开工！...Svelte 提供了一个详细文档来介绍这个问题。 「React」 现在已经引入了 useState 钩子，所以只需要让它工作起来即可。
写在开头 近期我有写两篇文章，一篇是:petite-vue源码解析和掘金编辑器的源码解析，发现里面用到了Svelte这个框架 加上最近React17，vite大家也在逐步的用在生产环境中，我于是有了今天的思考...vite的不打包理念：直接使用浏览器支持的esm模块化 WebContainers技术：让浏览器直接运行node.js import from remote,从一个个远程地址直接引入可以使用的依赖 现在很火的...传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。 与使用虚拟（virtual）DOM 差异对比不同。...Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM 上面是官方的介绍，我们看看知乎这篇文章https://zhuanlan.zhihu.com/p/97825481,感觉他写得很好...所谓基于runtime的框架就是框架本身的代码也会被打包到最终的bundle.js并被发送到用户浏览器。
前面讲到笔者已经将 svelte 运用到公司中的实际项目中，并稳定的运行了有一阵子了。在运用到实际项目前，也是在网上到处搜集 svelte 能够胜任的佐证。...数量： 图4 svelt github star 本文第一版写作时是62500个 star，现在2周过去，涨了约600个star，当前是63100个star。...既不容易用错，也不需要浪费太多的精力去学习一个框架各种约定的规则。 丰富的特性 图8 svelte 官网特性展示 现在前端框架该有的 feature， svelte 一个都没有落下。...生态不够成熟 svelte 诞生到现在有6年的时间，虽然已经有一定数量的使用者，但大公司使用的案例还是比较少。这也导致大家对这个新兴框架敬而远之。...过程中感受的是现阶段的 svelte 已经相当成熟，开发过程中遇到的问题，基本可以通过官方文档，社区找到解决方案。整体的体验是很顺滑的。
Svelte 不使用虚拟 DOM diffing 之类的技术，而是编写代码，当你的应用程序的状态发生变化时，外科手术式地更新 DOM。”...在 2010 年左右，声明性框架的早期，DOM 的 API 更加简单，更加冗长。而使用命令式的 JavaScript 编写 Web 应用程序则需要大量的模板代码。...Svelte 约为 2KB，但生成的代码大小不同。 现在看来，在保持包大小上，现在的框架要优于 React。虚拟 DOM 要求使用很多 JavaScript。...我们在使用和调试 Web 应用程序时，所见到的代码和我们所编写的完全不一样。我们现在依靠同样品质的调试工具，逆向设计出一个站点，并把它和我们自己的代码中的 bug 相关联。...在 Svelte 中，库本身的包大小很小，但你要传输和调试一大堆神秘的生成代码，这些代码是 Svelte 对反应性的实现，根据你的应用需求定制。
在 JavaScript 前端开发框架中，Svelte 算是一个新来的搅局者，在网上我们已经听到很多关于 Svelte 的哔哔。因此我决定试试这个家伙，顺便跟 React 做个简单的比较。...Svelte 与 React Svelte 和 React.js 两者都是基于组件的 JavaScript 框架，主要用于 Web 应用的开发。最主要的区别是 Svelte 没有使用虚拟 DOM。...诸如 React 和 Vue 这类传统的框架，它们的大部分工作都在浏览器上执行，而 Svelte 在构建应用的过程做就了大量的工作。 ...我只想从开发人员的角度看看，在使用 Svelte 和 React 开发应用程序时，感觉好吗？有趣吗？直观吗？ 开工！...Svelte 提供了一个详细文档来介绍这个问题。 React 现在已经引入了 useState 钩子，所以只需要让它工作起来即可。
一些亮点包括： 信号（Signals）：信号是多个框架（包括现在的 Angular ）用于跟踪应用程序状态的一种新的方法。...与一般的浏览器扩展不同，Nuxt Dev Tools 作为一个浮动面板出现在你的应用旁边的浏览器中，这使得它们能够提供非常详细和视觉上丰富的界面。...Svelte 在 JavaScript 框架的世界中，性能始终是开发者追求的核心。在这方面，Svelte 框架显得独树一帜。...Svelte 5 引入了一项名为 Runes 的新特性，该特性改变了你在 Svelte 应用中管理响应式的方式。Runes 背后运用信号来实现细粒度的响应式。...这些仅是 Svelte 5 新 Runes 语法的简要概述，你现在就可以在单个组件的基础上或整个应用中尝试这种新特性。
无论您是刚开始编程还是已经是一名经验丰富的开发人员，在这个行业中，学习新的概念和语言/框架是跟上快速变化的必要条件。...然后是Svelte和通用框架，例如Next.js或Nuxt.js。还有Gatsby 和 Gridsome 和 Quasar …，以及，以及。...为了帮助你在2020年成为前端大师，我收集了9个不同的项目，每个项目都有不同的主题和不同的JavaScript框架或库作为技术栈，您可以构建它们并将它们添加到学习计划中。...待办事项不一定是最热门的话题，但这确实可以帮助您提高Svelte技能。看起来像这样： ? 您将学到什么 本教程将向您展示如何使用svelte3制作一个应用程序，从开始到结束。...总结 在本文中，我向您展示了可以构建的9个项目，每个项目都专注于另一个JavaScript框架或库。 现在，选择权全由您自己决定：您是否会使用以前未使用的框架来尝试一些新的东西？
领取专属 10元无门槛券
手把手带您无忧上云
