这个星期五的帖子致力于翻译昨天在
Medium发表的一篇有趣的文章。 我决定为自己学习一种新的翻译类型，因此，如果某处出现问题，请不要踢太多。 如果可能的话，甚至通知PM中的错误和错别字。
谢谢，祝您阅读愉快！
Web平台的新功能和已编译的框架如何定义Web开发的下一个时代的故事。
图片：
Stefan Bucher如今，诸如
Angular ，
React和
Ember之类的框架对于开发复杂的Web应用程序至关重要。 在过去的十年中（
Angular在2010年发布），这些框架的使用已成为我们许多人事实上的标准。 它们帮助我们构建代码，管理应用程序状态以及基于可重用组件构建复杂的接口。
但是，您知道，JavaScript是最昂贵的Web资源，它直接影响我们页面的交互性。 而且，我们的Web应用程序的JavaScript代码的大小比以往任何时候都大。 平均网页大于3MB，大于原始《毁灭战士》游戏的大小。 作为开发人员，我们可以拥有快速的互联网和负担得起的资费计划，但是我们的用户可能没有这一切。
根据
Alex Russell的说法
，我们所有资源的大小都超过130KB，这可能意味着在标准电话和移动网络上无法满足5秒的下载间隔。 但是，某些我们最喜欢的框架可能会自己承担更多费用。
我们可以利用框架提供的优势，但同时避免使代码膨胀吗？ 在为开发人员带来便利的同时，提供出色的用户体验吗？ 我相信这一点。 而且我相信我们正在进入Web开发的新时代，这将由它决定。在这个时代，我们的框架将开始消失。
斯维尔特
这种趋势的一个例子是
Svelte ，“神奇消失的UI框架”（
关于Habré的文章“神奇消失的UI框架”-大约）。
Svelte是一个“编译时”框架，在客户端上没有特定的运行时。 我们习惯于向用户发送大型JavaScript包，并希望他们的浏览器能够解析和执行脚本。 但是
斯维尔特不是那样工作的。 而是将您的应用程序编译为小型，独立的原始JavaScript模块。 换句话说，当应用程序交付给用户时，
Svelte将会消失！
使用
Svelte开发的应用程序的一个示例是
Pinafore ，它是Microsoft的
Nolan Lawson创建的去中心化社交网络的
Mastodon PWA客户端。 Pinafore
在Web Page Test中显示出
非常快的结果，在
Lighthouse中获得98分。
Svelte本身非常简约，但是也有
Sapper （基于Svelte
App Mak er-大约）-基于它的功能齐全的框架。 受Next.js的启发，
Sapper包括服务器端渲染，代码分离，作用域样式，声明性路由和热重装。 此外，
Sapper入门模板默认情况下还提供PWA，Web应用程序清单和具有自动资源缓存的服务工作者。
我问诺兰，他对使用
Svelte和
Sapper有 什么感觉。 他告诉我，与
斯维尔特共事是“梦想”。
萨珀 “还不成熟”，对他有些问题，但他也很高兴。 我也开始在一个新项目中使用这两个框架，到目前为止，功能性和高操作速度的结合确实让人感觉完美。
模版
Svelte 启发了Ionic的另一个项目：
Stencil 。
同样，目标是采用“最流行框架的最佳概念”，但同时要达到更好的性能：
“借助……传统框架和捆绑技术，该团队努力满足渐进式Web应用程序在各种平台和设备上在快速和慢速网络上均能很好运行的延迟和代码大小要求。” -stenciljs.com
为了了解
Stencil的组成，我
从Rob Bearman找到了有用的
介绍 。 还有
马克西米利安（Maximilian）的
视频 。
Stencil的结果是一个标准的Web组件（有关Web组件的更多信息，请参见下面的Web组件），而不是特定于
Stencil的 。 这意味着您可以根据需要将其与其他框架结合使用（但本文介绍的是框架如何消失而不是繁琐！）。
另外，我想指出的是，尽管
Svelte文档并没有对此给予太多关注，但是
Svelte组件也可以直接编译到Web组件中（
这是一个示例 -如果
在此处设置
customElement- 我们会得到结果 ）。 但是，
Svelte （以及
Rollup和许多其他令人惊奇的东西！）的创建者
Rich Harris告诉我，他认为目前使用此功能没有任何特殊的好处。
Stencil看起来也像Google知名度更高的
Polymer ，但在退出时完全消失了。 但是，我并没有过多地使用Polymer来进行详细评论。 也许他也应该受到更密切的关注。 最新的
第3版开始使用
ES模块 （请
参见下文），而不是
HTML Imports ，并使用
npm代替
Bower 。 还有一个
PWA入门套件 ，推荐
Alex Russell作为构建高效Web应用程序的最佳工具。 它为您
立即提供了
PRPL模式（推送，渲染，预缓存，延迟加载）。
下一代角
感谢Rich Harris让我知道Angular也遵循这一趋势！
Angular Elements是
Angular 6的 一项创新功能，使您可以将Angular组件导出为自调整Web组件。 目前，它仍然需要“ Angular的最小独立版本”，但是它们“正在使用可在基于其他框架构建的Web应用程序中使用的自定义元素”。
此外，
Ivy是Angular中的新一代渲染器，旨在显着减小生成的代码的大小。 （尽管仍然值得一看：出于友好竞争的精神，Rich
比较了 Svelte和Ivy
的 Web组件
的编译
结果 ！）
流行的框架采用这种方法非常酷，这使得它们的最终代码也更加紧凑。 我们希望随着越来越多的Web应用程序转向一种新方法，这将对整个Internet的性能产生重大影响。
此外，越来越多的先决条件使得我们很快将根本不需要框架。 框架当然可以简化开发并继续提供有用的附件，但是Web平台本身提供了比以往更多的功能...
Web平台为框架
我的同事
Ada Rose Cannon在我的文章
“ Rube Goldberg机器”和
随后的谈话中描述了如何将新的CSS和JavaScript函数“视为嵌入在Web平台中的框架”。
例如，CSS自定义属性（俗称CSS变量）可能意味着您不再需要像
Sass这样的CSS预编译器。 CSS Grid现在可以使您免于加载Bootstrap。
“您不需要使用CSS网格的框架。 CSS Grid是一个框架。”
- 雷切尔·安德鲁 （ Rachel Andrew）
Web组件
Web组件特别强大，并且是这种趋势的关键。 它们包括以下功能-自定义元素，Shadow DOM和HTML模板-
尚无处可用 ，但是，正如
Ada所说 ，它们具有很好的支持，并且
多文件为它们提供了更好的支持，因此您今天就可以使用它们！
Ada和
Ruth John最近开发了一个Web应用程序，用于使用Web组件可视化音乐并
共享他们的课程 。
此外，如果您使用服务器端渲染（SSR）并通过
Progressive Enhancement来实现客户端，则可以通过Web组件等新功能感到更加安全。
我个人的喜好是建立出色的SSR体验，然后将其增强为单页应用程序。
- 艾达·罗斯加农炮
同构ES模块
您现在也可以使用
ES模块 ！ 同样，浏览器支持非常好，您可以使用
“ nomodule” fallback支持较旧的浏览器。
实际上，如果您同意SSR +渐进增强方法，您甚至可以使用ES模块，而不必使用构建工具将其转换为其他浏览器，因为较旧的浏览器仍可以在没有JavaScript的情况下运行。 使用
ESM模块加载器，我们还可以
直接在NodeJS中使用ES模块 。
这非常好，因为我们可以在前端和后端（即“同构渲染”）重用脚本，而不必像铃鼓跳舞一样。 我们可以构建前端代码，而不必将脚本粘合在一起，在页面上放置许多脚本标记或使用客户端加载程序。
这正是艾达（Ada）在本月的
第一次Twitch演讲中所展示的。 还有一个
博客条目，带有说明。
我希望在我们开始进入Web开发的新时代时能够分享自己的想法。 一个不那么依赖传统UI框架，CSS库和捆绑器的时代。 一个时代，我们发送更少的字节并更快地加载Web应用程序。 濒临灭绝的框架时代。
感谢Nolan Lawson，Rich Harris和Ada Rose Cannon对本文的帮助和启发。 本文也在我的个人博客上发布了 。***
我想从我自己身上注意到，不幸的是，目前只有哈布雷（Habré）上的我写过
斯维尔特（Svelte） 。 因此，俄语中有很多有关此出色框架的信息。
如果您是初次见到他，您可能有兴趣阅读有关此主题的其他文章：
谁想积极监视它的发展-欢迎访问俄罗斯电报频道
SvelteJS 。 我们将很高兴见到您！
祝贺大家夏天和我们团队取得的胜利！ 周末愉快！ 万岁！