JavaScript依赖反弹：神话般的渐进增强

在Louis最近的论坛主题中， 我们是否处于脚本依赖关系的强烈反对之中？ ，他评论说：

从某种意义上说，我认为我们在某种程度上依赖脚本依赖性，这可能是一件好事。

TL; DR

• 我同意。 网络专家PPK（ Angular的问题 ）和Jeremy Keith（ Angular的动量 ）和Jake Archibald（ 渐进的增强仍然很重要 ）也是如此。
• 尽管Web应用程序飞速发展，但几乎没有适用于JavaScript框架的Web应用程序。
• 渐进增强仍然是解决Web开发问题（如广泛的浏览器支持，维护和对应用程序进行过时验证）的最佳选择。

让我们定义我们正在讨论的术语…

什么是JavaScript依赖关系？

客户端框架的使用有所增加。 这些提供了类似于服务器端的编码模式，例如MVC，模板视图，可重用组件，表单验证等。 AngularJS可能是最著名和最受欢迎的，但它不是唯一的解决方案。

与服务器端框架不同，客户端替代方案必须在启用JavaScript的现代浏览器上运行。 没有JavaScript，它们将失败。 TIDAL是一种典型情况； 如果JavaScript不可用，则用户会看到空白页。 没有内容，没有错误，也没有注册表格。

尽管几乎没有任何借口不显示消息，但依赖JavaScript的应用程序有很好的用例：

• 样机
  由于客户端框架提供了丰富的组件和快捷方式，因此可以快速构建网站和应用程序模型。
• 仅限客户端的应用程序
  如果您的应用程序很简单，并且除了初始下载外不需要服务器交互，那么JavaScript框架可能是一个不错的选择（假定您可以删除不需要的东西）。
• 内部公司申请
  当您了解受众及其使用的设备时，强制执行JavaScript便不是问题。 Angular最初是为企业应用程序设计的。
• 复杂的界面
  考虑动作游戏，Google地图和文档。 开发无JavaScript替代方案是徒劳的。 Google创建了Google Maps的基本HTML版本，但实际上是一个不同的应用程序，于2010年停产。

还有其他情况，但是大多数面向公众的网站和应用程序不属于这些类别。 没有人会阻止您使用客户端框架，但是，当您有锤子时，一切看起来都像钉子。 再次引用路易斯：

开发人员似乎只是为了使用它而使用了华丽的新工具，而不是因为他们正在解决实际问题。

什么是渐进增强？

渐进增强（PE）不是一种技术，而是一种开发方法。 我在2009年编写了一些教程和示例 ，但自2003年以来就开始讨论该概念。

您可以建立基本的用户体验级别，然后在浏览器支持时添加更多高级功能。 将PE推至逻辑极限：

1. 您创建一个仅HTML的应用程序，其中所有重要处理都在服务器端完成。 它可以在任何浏览器中运行； 移动设备，Lynx，IE1.0或其他任何功能。
2. 您可以使用CSS增强布局。 CSS已支持PE，因为浏览器会忽略他们不了解的属性。 您可以使用诸如媒体查询或@supports规则之类的选项进一步增强它。 该应用程序仍然可以在任何地方使用，但是可以为具有现代CSS功能的浏览器提供更好的体验。
3. 您可以使用JavaScript增强功能。 JavaScript是最易变的层，因为不同浏览器对语言和API的支持各不相同。 假设它可以运行，则在使用这些工具之前先对其进行测试。 例如，当支持canvas或SVG时，您可以将数据表转换为漂亮的图表。

每个浏览器都会收到它可以处理的最佳应用程序。 可能没有两个浏览器会提供完全相同的体验。 移动优先响应设计和较少使用的离线优先设计是渐进增强技术的示例。

让我们研究一下对PE的批评。

误区：没人禁用JavaScript

很少有人知道JavaScript是什么。 很少有浏览器允许用户（轻松）禁用JavaScript。

这是绝对正确的。

体育评论家随后得出结论：

那些没有JavaScript的人应该得到他们应得的

假定JavaScript每次都能达到您的应用程序要求的水平是危险的。 每个人都有JavaScript，对吗？ 说明了这一点。

渐进增强功能与满足禁用JavaScript的用户无关 。 这是关于增强某些JavaScript功能可用时的体验。 当禁用JavaScript但用户仍然得到某些东西时，该应用程序可能会提供一个糟糕的界面。

误区：没有人使用旧的浏览器

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

我们所说的“旧”是什么意思？ 对于大多数开发人员而言，它是十二个月前发布的任何浏览器。 并非每个人都可以使用最新和最出色的应用程序：

• 大型组织和政府部门
• 残疾人
• 发展中国家的人
• 社区的富裕阶层
• 任何使用iPhone 5.0或Android 4.0及更低版本的用户。

这些部门对您可能并不重要。 但是它们永远都不重要吗？

渐进增强功能不对您的受众群体做任何假设。 对于客户端框架而言并非如此。 那些无法使用您的应用程序的人将从服务器日志中消失。 它很快成为一种自我实现的预言： “没有人使用我们的应用程序在旧的浏览器上，因此我们可以按原样进行……”

误解：渐进增强是反JavaScript的

渐进增强包含网络的基本优势。 有可能开发一个站点或应用程序，该站点或应用程序可以在世界任何地方的任何支持Web的设备上运行。 该设备越好，用户体验就越好。

客户端框架使JavaScript成为绝对依赖。 您不再需要为网络编码。 您的应用程序将Web用作特定运行时引擎的传递机制。 浏览器是您的操作系统，更新可能会破坏您的应用程序。

误解：逐步增强使用户和设备的假设

PE就是不做假设。 您不会假设任何东西-这是该技术的核心前提。

JavaScript框架会让您以为每个人都在功能强大的设备上使用功能强大的浏览器。 我们之前已经做了这些假设。 与假设每个人都在宽带上有什么不同吗？ 还是所有人都拥有至少960像素宽的17英寸屏幕？ 还是每个人现在都将永远使用IE6？

误解：逐步增强意味着支持古老的浏览器

渐进增强批评家认为您将花费所有时间来处理旧版浏览器。 实际上，情况恰恰相反：您无需使用旧的浏览器，因为适当的后备就位。

支持旧的浏览器是PE的好处- 并非目标 。 您可以支持最低的浏览器，但可以建立自己喜欢的基准 。

例如，我目前正在开发一个应用程序，在该应用程序中，运行大多数JavaScript都需要addEventListener 。 IE8及更低版本将因此无法显示功能增强。 我可以解决这个问题，但由于它是没有OldIE用户的企业应用程序，因此不值得投资。 但是，IE8用户仍然可以使用该系统，并且可以根据需要对其进行改进。

误解：JavaScript框架应用更酷

您可以使用PE技术创建外观相同的应用。 由于大多数JavaScript框架都提供了一系列外观良好的预先开发的小部件，因此造成了混乱。 那些相同的小部件可以在逐步增强的应用程序中使用，但是如果没有JS，它们将退回到基本HTML替代方案。

PE还允许您使用尚未在任何浏览器中出现的现代HTML，CSS和JavaScript API。 考虑Fetch API -XMLHttpRequest的现代替代品。 它的支持很少，但是我可以毫无问题地使用它，因为我可以回退到XMLHttpRequest或服务器请求。

JavaScript框架牢牢地牢牢抓住了现在，而不是将来。

误解：渐进增强阻碍了网络发展

或者，更具体地说，客户端框架处于最前沿并推动网络向前发展。

对不起，但这是一种幻想。 类似于AngularJS的框架实现了神奇的功能，但是深入浅出，您仍然在使用HTML，CSS，JavaScript和DOM操作。 充其量只是个抽象。 最糟糕的是，这会分散注意力。

您的客户端框架仅与为其开发的浏览器一样好。 AngularJS 2.0是一个完整的重写，因为当AngularJS 1.x发布时，诸如Object.observe()和Web Components之类的功能并不普遍。 该框架迫使您使用较旧的技术，但对您隐藏了实现。

PE允许您使用任何现代API，而不会破坏您的应用程序。 最好从Angular 1升级

误区：JavaScript框架使开发更简单

这部分是正确的-但仅当您开始构建应用程序时。 您可以访问一系列控件，这些控件可以缩短初始开发时间。 但是，您就陷在该框架的范围之内，以后可能会导致问题。

假设您的应用程序已经运行了一段时间，并且客户端需要对BrowserX的支持。 它是由主要客户使用的，并不是特别古老。 例如Blackberry浏览器，iPhone 4，Android 3.3等。他们可能期望几天的开发时间，但是如果您JavaScript框架不兼容，这可能是不可能的。

使用PE技术开发的应用可能永远不会出现这个问题。 您可能已经支持该浏览器。 可以添加更多增强功能，而无需进行重大重写。

误区：渐进式提高是努力的两倍

这是批评家最喜欢的报价。 唯一表示PE付出过多努力的人是从未尝试过或以某种方式失败的人。

如果您从一开始就不考虑，那么PE只需花费两倍的时间。 尝试将PE改型为现有应用程序注定要失败-对于依赖JavaScript的应用程序尤其如此。

让我们考虑一个简单的示例，例如来自搜索查询的结果的分页列表。 第一页加载返回所有HTML。 它速度很快，JavaScript无需执行任何操作。 在后台，我们使用数据库查询并将结果放入HTML模板中。 您可以快速调整同一个服务，以将结果作为JSON数据或结果HTML返回而没有页眉和页脚。 当用户单击“页面2”时，将显示结果的第二页：

• 使用JavaScript，我们可以拦截点击并使用Ajax技术来获取结果页面。 可以使用innerHTML将HTML数据插入页面。 或者，我们可以将页面1用作返回的JSON数据的模板。
• 如果JavaScript，XMLHttpRequest或Fetch不可用- 或Ajax调用失败 -我们可以请求第二个完整HTML页面。

这需要做更多的工作，但肯定不会使工作加倍。 我们受益于跨浏览器的容错解决方案。

误解：渐进式增强毫无意义-网站发展或消亡

这种说法背后的逻辑是网站最终会过时。 因此，您可以使用在特定时间点针对特定技术的框架。

我希望。 如果您的代码很好，那么它将比您期望的使用更长的时间。 错误代码的寿命甚至更长，因为没有人愿意触摸它。

但是，再次使用渐进增强功能，除了网络将继续作为基于客户端/服务器的基于HTML的系统之外，您无需做任何其他假设。 网络将需要从根本上进行更改，以使您的应用程序失败-它将不再是网络！

误区：渐进式增强是旧计时器推荐的一种旧技术

引用Oddz ：

客户端JavaScript框架的激增使您与其他“旧计时器”一起进入了少数群体。

是的，谢谢！

JavaScript的反对是由在相当长的一段时间内为网络开发的人们所领导的。 我们所有的路德主义者都不能与时俱进吗？ 也许。 还是因为我们从许多历史上的错误中学到了什么？

JavaScript框架提出了一些常见的问题：

• 一些混合HTML和功能，例如我们过去使用过的onclick处理程序，例如
  <form ng-submit="doSomething()">
• 它们针对特定的浏览器。 “最好的浏览方式……”消息和<noscript>标记已经重新<noscript> 。
• 他们对当今的Web作了假设，例如JavaScript随处可见，每页2MB是合理的。
• 他们没有为未来做计划。

JavaScript框架主要使开发人员受益， 而不是使用户受益。 他们可以带来短期收益，但代价是减少了访客人数，并减少了长期的维护费用。

而且，不要忘了SEO。 Google为JavaScript页建立了索引，但不一定要遵循每个逻辑分支。 除非您进行了仔细的编码，否则很难链接回特定的URL。

渐进增强功能增强了Web的优势：

• 它将内容，布局和功能分开，以便于维护
• 您是在为网络编写防御性，容错且与设备无关的代码，而不是浏览器
• 您可以支持各种设备
• 由于您的应用程序在出现故障时仍可运行，因此减轻了测试负担
• SEO和可访问性已内置（或需要更少的精力）
• 网站和应用程序可以在今天，昨天和明天发布的浏览器上使用
• 没有人反对渐进增强的好处或提出更好的技术。

唯一的缺点是：很明显，许多开发人员仍然不信任或不了解渐进增强。

JavaScript依赖的强烈反对万岁！

翻译自: https://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/