前端开发，不用 JavaScript 行不行？！

当前大前端环境下，JavaScript 被数百万的网页用来改进设计、验证表单、检测浏览器......那如果说前端开发中，不使用 JavaScript 到底行不行？

作者 | Matt Reyer

译者 | 姜松浩

责编 | 屠敏

出品 | CSDN（ID：CSDNNews）

以下为译文：

注：Slimvoice（https://slimvoice.co/）是我构建的一个应用程序，在该项目中，我记录如何利用尽可能少的JavaScript来开发。本文属于“一个没有JavaScript的Webapp”系列文章中的一篇。

前言

2014年，我在Angular 1上使用Node.js后端和MongoDB构建了Slimvoice的第一个版本（这样的方式当时风靡一时）。

2015年，我决定彻底改造用户界面并重新设计，并选择在React中重建它。事后来看，所有这些都是无用功。

在新版本中，我想证明，通过出色的设计可以提供出色的用户体验，大幅降低代码的复杂性，并且可以最大限度地提高可靠性，还能够最大限度地降低端用户的使用成本。我有一个非常自豪的前端开发经验。在这里，我将分享我在前端做出的改变，并且分享我在此过程中学到的一些无JavaScript的UI技巧。

单页应用

这些年，网站臃肿问题对整个web来说没有任何改善。我厌倦了缓慢加载的不太可靠的webapp。有没有人试过在Asana中修改卡片的描述？它的速度很慢！当你输入时，用户界面会毫无理由地滞后。首先，我住在一个只有2 Mbit / s互联网连接的农村地区。使用热缓存情况下，Asana UI需要14秒才能使用。其次，你可以在下面的图片看到该应用程序由超过10MB的未压缩JavaScript组成。这说明要执行的大量代码。这怎么可以接受？

使用具有中等复杂程度的“渐进式Web应用程序”，你需要一组人员才能完成这样的工作。这样就会导致，最终你的代码库中会有很大一部分仅用于前端。严肃地讲，以正确的顺序加载东西是一个难题，我们为此需要投入更多的插件(参见Redux and friends)。如果你可以取消所有这类的插件会怎么样？你拥有的代码越多，你的敏捷性就越低。代码多是一种累赘，而不是一种财富。就像焦油一样。JavaScript库一直在变大，我不认为很多人正在批判性地评估它们的实际需求。人们经常以KB或MB来衡量JavaScript，就好像它只是一个下载成本。但事实并非如此。你还必须等待CPU解析/执行它。这一切都要加起来。

而精益求精。我发现了一个关于前端开发的秘密，我将和你分享。很少有人知道这一点，所以不要睁大眼睛张大嘴巴表示惊讶。如果你不使用JavaScript，你的前端不会崩溃。HTML不会抛出异常。更少的代码总是更好的。

尽情的向Elm呼喊，因为它真的是太棒了。

普通的旧HTML和CSS

为了Slimvoice，我想与现代JS炒作的套路相反，使应用程序完全由服务器呈现。你可能会说“啊！但是Matt！用户在使用你的应用程序时必须重新加载每一页，这一定很慢！”我想说不会。我的所有资源都被压缩和缓存的，只留下HTML在你进行交互时进行传输。我没有加载spinner。这比我长时间使用的许多PWA要快。不要相信我的话，打开你的开发工具网络面板，并将Slimvoice与一些流行的PWA进行比较。哦是的，我没有在控制台中调试的JavaScript异常。要么页面出现在你的屏幕上，要么就没有。

Checkbox/Label技巧

当然，有些交互就会重新加载页面是不可行的。这里是我最喜欢的方式，就是向其他静态HTML页面添加交互性的技巧。我将这个用于Slimvoice中的所有下拉菜单，模态和过滤UI，所有这些都没有用到JavaScript。

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

2. 紧接着，创建一个 <input type="checkbox" id="myToggle" style="display: none;">。这将在DOM中创建一个不可见的复选框。

3. 无论您希望将哪个DOM节点用作切换控件，请将其包装在 <label for="myToggle"></label>标记中，其中for属性与复选框的id匹配。

4. 使用下述CSS将其全部挂起。

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

这个CSS表示应该显示紧跟在已选中的的#myToggle元素之前的#myToggledUI元素，否则将被隐藏。 〜这个运算符非常酷！这是一个完整的工作示例。

这是一个用<label>，<div>和一个复选框构建的模态。“取消”按钮是同一个复选框的另一个<label>，因此单击它会关闭模式。模态后面有一个灰色叠加（position: fixed;），对于同一个复选框，也恰好是<label>，因此单击模态外部也会将它关闭。没有React组件。没有单击事件侦听器，只是简单明了的HTML。     

没有JavaScript！

我在这里没有这样做，但是你可以添加任何你喜欢的CSS转换到这个技术中。这里没有ReactCSSTransitionGroup。

没有JavaScript！

<details>/<summary>元素

<details>和<summary>标签很少使用，但在许多情况下完全可以接受。我在Acknowledgements 页面上使用它们来显示和隐藏我在Slimvoice中使用的各种开源软件的许可证。快，简单，没有JavaScript，还可以到处工作。

遗憾的是，你无法控制它们的外观，但我认为制作一个与你的品牌标准相匹配的小型三角型并不值得让用户强制使用几兆字节的JavaScript。

Forms & Input验证

许多输入都内置了验证选项。Mozilla文档非常全面。

• 不要忘记required属性，该属性会阻止表单在填写特定字段之前提交。

• 数字输入有min， max 和step。

• 文本输入可以是 email类型，也可以是自定义 email。

• 文本输入具有minlength和maxlength。

• :valid 和:invalid的CSS选择器允许更好的用户体验。

没有JavaScript！

来得干净

我确实在新的Slimvoice上使用了一些JavaScript，但只有当交互无法以任何其他方式复现时。例如，我在客户端列表上实现了模糊搜索，以便你轻松过滤客户端。看一下生产代码（你可能需要在新选项卡中复制/粘贴URL，我的服务器会尝试阻止热链接）。这并不复杂。

我认为对一个清单项目进行拖拽式排序至关重要，因此我将Mithril用于清单编辑用户界面。可以说它是整个项目中唯一的JS依赖项（并且只在一个页面上），并且当我将来有一些时间时，我希望完全删除它。应用程序中的JavaScript很少，以至于如果我将其缩小，它甚至微不足道，所以我还没有这样做。去看看我的源代码。

未来

普通的HTML输入满足了我的大部分需求，但是我发现自己希望在HTML规范中有更多的创新来覆盖更多的JavaScript的输入，并完全消除对JavaScript的需求。

1. 为什么我们不能有一个标准的搜索元素来过滤客户端的列表（类似于Angular 1的 ng-repeat | filter: 的工作机制）？

2. 有一个用于拖拽排序的标准HTML元素不是很棒吗？

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

4. 能够在不感觉像黑客和写奇怪的CSS的情况下完成上面的模式/复选框技巧。

为什么HTML规范的UI选项停滞不前并将其留给构建自定义JavaScript驱动的元素？我认为拥有一套更强大的标准UI元素比WebVR，WebBluetooth，或者他们现在正在疯狂研制的其他任何更为重要。

结论

这样做有用吗？绝对有用。互联网上最大页面的重新加载量为230 KB。由于我正在缓存和解压缩所有内容，因此每个后续的网页浏览量大约为6 KB;远远小于我见过的具有同等功能的SPA。 Slimvoice快速而小巧但不会在UX上妥协。到目前为止用户都喜欢它。请自行访问https://slimvoice.co查看。

关于我的代码，绝对没有什么是复杂的。我很乐意将整个代码库交给其他人，而无需解释任何内容。我不知道有谁能真实地说出有关React/Webpack前端的信息。

我已经编程十多年了，并且在六年时间中，我一直在全职开发Web应用程序。在那些年里，JavaScript和PWA的优点已经证明了自己并没有那么的好，但是它们的缺点是巨大的，而且通常被忽视。并且在可预见的将来，我则会完全将JavaScript作为主要语言。

您可能不需要“渐进式Web应用程序”。这需要认真评估你的应用是否需要如此复杂。你的老板/客户可能会要求PWA，因为它很酷且很受欢迎，并且会以一堆理由支持PWA。这需要确保这些理由是合理的。

停止追随大众。不要让其他公司代表你这样做。你将在没有谷歌分析的情况下生存下来。你将在没有对讲机的情况下生存。让你自己的领域服务一切。

不要害怕。你可以自己建造它！你不需要一个框架！

不要跟风炒作。对为什么一种方法比另一种更好做出关键性的决定，不要管营销页面上说了什么或其他人都在做什么。销售这些酷新东西的人通常都在地毯下面扫除一些缺点。一切都有代价。

我对这个版本的SlimVoice的结果非常满意，但当然我在寻找将JavaScript使用率降到零的方法。我很乐意回答有关设计或开发经验的任何问题。

当然，感谢我的妻子，她设计了这个页面，帮助UI，并鼓励我写这篇文章！

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

本文为 CSDN 翻译，如需转载，请注明来源出处。作者独立观点，不代表 CSDN 立场。

---

 热 文 推 荐  

System.out.println("点个在看吧！");
console.log("点个在看吧！");
print("点个在看吧！");
printf("点个在看吧！\n");
cout << "点个在看吧！" << endl;
Console.WriteLine("点个在看吧！");
Response.Write("点个在看吧！");
alert("点个在看吧！")
echo "点个在看吧！"

点击阅读原文，输入关键词，即可搜索您想要的 CSDN 文章。

喜欢就点击“在看”吧！