无框架的框架:我们为什么没有早点想到这一点?
在不遇到复杂性壁垒的情况下,你无法使用原生 JavaScript 编写复杂的应用程序。但是编译器可以为你做到这一点。
等等,这个新框架有运行时? ugh。谢谢,我拒绝。– 2018年的前端开发者
我们向用户发送了太多的代码。像许多前端开发人员一样,我一直否认这一事实,认为在页面加载时提供 100kb 的 JavaScript 没什么问题——只需使用少一张 .jpg!——并且真正重要的是应用程序交互后性能。
但是我错了。100kb 的 .js 不等于 100kb 的 .jpg。它不仅会影响网络时间,还会影响应用程序的启动性能,还会影响解析和评估脚本的时间,在此期间浏览器会完全无响应。在移动设备上,这些毫秒会很快累积。
如果你不相信这是一个问题,请关注 Twitter 上的Alex Russell。Alex最近在框架社区中没有结交很多朋友,但他并没有错。但是,Angular、React 和 Ember 等框架的替代方案——Polymer——尚未在前端世界中获得广泛关注,当然,这与营销无关。
也许我们需要重新思考整个事情。
框架真正解决了什么问题?
普遍的观点是,框架使管理代码的复杂性变得更容易:框架使用虚拟 DOM 差异等技术抽象了所有繁琐的实现细节。但事实并非如此。充其量,框架将复杂性转移,从你必须编写的代码转移到你没有编写的代码中。
相反,React 等想法如此广泛且理所当然地成功的原因是,它们使管理概念的复杂性变得更容易。框架主要是用于构建你的思想的工具,而不是你的代码。
鉴于此,如果框架实际上不在浏览器中运行会怎么样?如果它将你的应用程序转换为纯原生 JavaScript,就像 Babel 将 ES2016+ 转换为 ES5 一样?你无需支付交付庞大运行时的前期成本,并且你的应用程序会变得非常快,因为在你的应用程序和浏览器之间没有抽象层。
介绍 Svelte
Svelte 是一个全新的框架,它正是这样做的。你使用 HTML、CSS 和 JavaScript(以及一些你可以在 5 分钟内学会的额外内容)编写组件,并在构建过程中,Svelte 将它们编译成小型独立的 JavaScript 模块。通过静态分析组件模板,我们可以确保浏览器的工作量尽可能少。
TodoMVC 的Svelte 实现 压缩后大小为 3.6kb。相比之下,React 加上 ReactDOM没有任何应用程序代码压缩后约为 45kb。浏览器评估 React 的时间大约是 Svelte 启动并运行交互式 TodoMVC 的 10 倍。
并且一旦你的应用程序启动并运行,根据js-framework-benchmark,Svelte 非常快。它比 React 快。它比 Vue 快。它比 Angular、Ember、Ractive、Preact、Riot 或 Mithril 快。它与 Inferno 竞争,Inferno 可能是目前世界上最快的 UI 框架,因为Dominic Gannaway 是一位巫师。(Svelte 删除元素的速度较慢。我们正在努力解决这个问题。)
它基本上与原生 JS 一样快,这很有道理,因为它就是原生 JS——只是你无需编写的原生 JS。
但这不是重点
嗯,这很重要——性能非常重要。但是,这种方法真正令人兴奋的是,我们终于可以解决 Web 开发中一些最棘手的问题了。
考虑互操作性。想要npm install cool-calendar-widget
并在你的应用程序中使用它?以前,你只能在使用(正确版本)该小部件设计所用框架的情况下才能做到这一点——如果cool-calendar-widget
是用 React 构建的,而你使用的是 Angular,那么,很抱歉。但是,如果小部件作者使用了 Svelte,则可以使用任何你喜欢的技术构建使用它的应用程序。(待办事项清单:将 Svelte 组件转换为 Web 组件的方法。)
或代码分割。这是一个好主意(仅加载用户初始视图所需的代码,然后稍后获取其余代码),但存在一个问题——即使你只最初提供一个 React 组件而不是 100 个,你仍然必须提供 React 本身。使用 Svelte,代码分割可以更有效,因为框架嵌入在组件中,并且组件很小。
最后,我作为开源维护者一直在苦苦挣扎的一件事:你的用户总是希望优先考虑他们的功能,并且低估了这些功能对不需要它们的人的成本。框架作者必须始终在项目的长期健康与满足用户需求的愿望之间取得平衡。这非常困难,因为很难预测——更不用说阐明——逐渐膨胀的后果,并且需要强大的软技能才能告诉人们(他们可能一直在热烈地宣传你的工具)他们的功能不够重要。但是,使用像 Svelte 这样的方法,许多功能可以完全免费地添加到不需要它们的人,因为如果不需要,编译器就不会生成实现这些功能的代码。
我们才刚刚开始
Svelte 非常新。还有很多工作要做——创建构建工具集成、添加服务器端渲染器、热重载、过渡、更多文档和示例、入门套件等等。
但你已经可以使用它构建丰富的组件,这就是我们直接发布稳定版 1.0.0 的原因。阅读指南,在 REPL 中试用,然后前往GitHub帮助启动前端开发的下一个时代。