没有JS的前端:体积更小、速度更快!(32)

发布于2019-04-20 11:57:30

Slimvoice是一款几乎不包含JavaScript的Web App。2014年,我基于Angular 1开发了Slimvoice的第一个版本,使用了Node.js后端和MongoDB(这些技术在当时风靡一时)。 2015年,我决定对UI进行彻底的改造,并使用React重新设计和构建。对于新版本,我想证明我们可以通过出色的设计提供出色的用户体验,同时大幅降低代码复杂性,最大限度地提高可靠性,并最大限度地降低最终用户的成本。

在这篇文章里,我将分析我在前端方面所做出的一些决定,并分享我在这个过程中学到的一些无JavaScript UI技巧。

单页应用程序

总的来说,网站肥胖问题并没有任何好转。我厌倦了加载速度慢、不太可靠的Web App。最近有没有人试过在Asana中修改卡片的描述?真是慢得要死!在你输入内容时,UI会出现很严重的延迟。首先,我住在一个农村地区,网速只有2MB。在使用热缓存时,Asana UI需要14秒才能使用。其次,看一下下面这个App,它由10多MB未压缩的JavaScript组成。这需要执行大量的代码,真的是难以接受!

对于一个中等复杂度的“渐进式Web App”,你需要一个团队来实现它。到最后,代码库的很大一部分都是前端代码。要按正确的顺序加载代码是一个件很困难的事情。代码越多,敏捷性就越差。代码是负债,而不是资产。JavaScript库一直在变大,而且我不认为很多人对它们的实际需求进行过批判性的评估。人们经常用KB或MB来衡量JavaScript,就好像它只有下载成本一样。但其实不是这样的。除了下载,还需要CPU解析和执行它们。所有这些加起来都是成本。

我发现了一个与前端开发有关的秘密。很少有人知道这个,所以不要轻易告诉别人。如果不使用JavaScript,你的App就不会发生崩溃。HTML不会抛出异常。代码越少越好。

普通的HTML和CSS

对于Slimvoice,我想要违背一下JavaScript的炒作热潮,对整个App进行服务器端渲染。你可能会说:“用户在使用App时必须重新加载每个页面,这一定很慢”!我很鄙视这种说法!所有资产文件都经过gzip压缩并进行了缓存,在发生交互时只需要加载HTML。我并没有使用加载指示器。但它的加载速度比我用过的很多PWA都要快。如果你不相信,请打开开发者工具的网络面板,将Slimvoice与其他一些流行的PWA进行比较。

复选框和标签

当然,对于某些交互,是不能重新加载页面的。下面是我最喜欢的一个向静态HTML页面添加交互功能的技巧。我将这个技巧用在Slimvoice的下拉菜单、模态面板和过滤UI中,所有这些都不包含JavaScript。

1.创建一个<div id="myToggledUI">,其中包含一些你想要显示或隐藏的UI。

2.创建一个<input type="checkbox" id="myToggle" style="display: none;”>,在DOM中创建一个不可见的复选框。

3.无论你希望将哪个DOM节点作为切换控件,请将它放在标签中,其中for属性与复选框的id属性要匹配。

4.添加下面的CSS。

#myToggledUI {
    display: none;
}
#myToggle:checked ~ #myToggledUI {
    display: block;
}

这段CSS的意思是说,在被选中的#myToggle元素前面的#myToggledUI元素要显示出来,否则就隐藏起来。~是一个很有意思的运算符!这是完整的示例

下面是一个使用<label></label><div>和复选框构建的模态面板。“Cancel”按钮是另一个<label>,对应的是同一个复选框,可以通过单击它来关闭模态面板。模态面板后面的灰色遮罩(position: fixed;)也是同一个复选框的<label>,所以单击模态面板的外面部分也会关闭它。没有使用React组件,没有使用事件监听器,只有简单的HTML。

你也可以添加你喜欢的CSS。这里没有使用ReactCSSTransitionGroup。

<details>/<summary>元素

<details><summary>标签很少使用,但在很多情况下是完全可接受的。我在Acknowledments页面上使用它们来显示和隐藏Slimvoice使用的各种开源软件许可。没有JavaScript,简单快捷,到处都可以运行。

遗憾的是,你无法控制它的外观,但我不认为为了显示小三角形而强制用户加载几兆字节的JavaScript是值得的。

表单和输入验证

很多输入都内置了验证选项。Mozilla文档提供了非常全面的描述

变干净

不过,我确实在新版Slimvoice中使用了一些JavaScript,但只在无法以任何其他方式复制交互时才使用。例如,我实现了客户列表的模糊搜索,让用户可以轻松过滤客户。你可以看一下代码,并不复杂。

我想让发票行可以拖放排序,所以我使用Mithril作为发票的编辑UI。它是整个项目中唯一的JS依赖项(而且只在一个页面上),等将来有时间我想把它完全替换掉。因为App中只有很少的JavaScript,也无所谓要不要将它们最小化,所以我没有那么做。

未来

普通的HTML输入框可以满足我的大部分需求,但我希望HTML规范能够有更多的创新,提供更多类型的输入框,并完全消除对JavaScript的依赖。

1.为什么我们不能有一个标准的搜索元素,用来在客户端过滤下拉框(类似于Angular 1的ng-repeat | filter:)?

2.有一个可以拖放排序的标准HTML元素不是很好吗?

3.更高级的验证功能,例如比较两个不同表单字段的相等性。

4.不hack或编写奇怪的CSS就可以使用模态面板或复选框。

为什么HTML规范的UI选项会停滞不前,导致我们需要自己构建JavaScript驱动的元素?我认为拥有一套更健壮的标准UI元素比WebVR、WebBluetooth或者其他任何正在酝酿的疯狂想法都重要得多。

结论

这样可行吗?绝对没问题。完全加载最大的页面也只有230 KB。因为缓存和压缩了所有东西,后续浏览的每个页面大约只有6 KB,比我见过的具有相同功能的SPA都要小得多。Slimvoice速度快,体积小,但不会影响用户体验。到目前为止,用户都很喜欢它。

我的代码一点都不复杂。我很乐意将整个代码库交给其他人,而且不需要跟他们解释任何东西。

我编程已经十多年,并且在六年的时间里一直在开发Web App。在那些年里,JavaScript和PWA已经被证明不是那么好,它们的缺点很明显,却经常被忽略。在可预见的未来,我将完全放弃将JavaScript作为主要编程语言。

英文原文:https://dev.to/winduptoy/a-javascript-free-frontend-2d3e

更多内容,请关注前端之巅。