核心要点
Louis最近在论坛主题“我们是否处于脚本依赖的反弹中?”中评论道:>我认为,在某种程度上,我们正处于某种脚本依赖的反弹中,这可能是一件好事。
简而言之——我同意。其他人也同意,包括Web专家PPK(Angular的问题)、Jeremy Keith(Angular动量)和Jake Archibald(渐进增强仍然很重要)。
客户端框架的使用有所增加。它们提供类似服务器端的编码模式,例如MVC、模板视图、可重用组件、表单验证等等。AngularJS可能是最著名和最流行的,但它不是唯一的解决方案。与服务器端框架不同,客户端替代方案必须在启用现代JavaScript的浏览器上运行。如果没有JavaScript,它们就会失败。TIDAL就是一个典型的例子;如果JavaScript不可用,用户将看到一个空白页面。没有内容,没有错误,也没有注册表单。虽然几乎没有理由不显示消息,但JavaScript依赖型应用程序有一些很好的用例:
还有其他情况,但大多数面向公众的网站和应用程序不属于这些类别。没有人会阻止您使用客户端框架,但是,当您有一把锤子时,所有东西看起来都像钉子。再次引用Louis的话:>开发人员似乎只是为了使用炫目的新工具而使用它们,而不是因为它们解决了实际问题。
渐进增强(PE)不是一项技术,而是一种开发方法。我在2009年编写了一些教程和示例,但这个概念自2003年以来就一直在讨论。您首先建立一个基本的用户体验级别,然后在浏览器支持时添加更高级的功能。将PE推向逻辑的极致:
每个浏览器都会收到它可以处理的最佳应用程序。可能没有两个浏览器提供完全相同的体验。移动优先响应式设计和较少使用的离线优先是渐进增强技术的示例。让我们检查一下PE的批评。
很少有人知道JavaScript是什么。很少有浏览器允许用户(轻松)禁用JavaScript。这是绝对正确的。PE批评者随后得出结论:>那些没有JavaScript的人得到他们应得的。
假设JavaScript将始终、随处、随时达到您的应用程序所需的级别是危险的。每个人都有JavaScript,对吧?说明了这一点。渐进增强并非针对禁用JavaScript的用户。它是在某些JavaScript功能可用时增强用户体验。当JavaScript被禁用时,应用程序可能会提供一个糟糕的界面,但用户仍然会得到某些东西。
我们所说的“旧”是什么意思?对于大多数开发人员来说,它是任何发布超过十二个月的浏览器。并非每个人都能使用最新最好的应用程序:
这些部门可能对您来说并不重要。但是他们永远都不重要吗?渐进增强不对您的受众做任何假设。客户端框架并非如此。那些无法使用您的应用程序的人将从服务器日志中消失。它很快就会变成一个自我实现的预言:“没有人在旧浏览器上使用我们的应用程序,所以我们可以继续这样做……”
渐进增强包含Web的基本优势。可以开发一个可以在世界任何地方的任何网络设备上运行的站点或应用程序。设备越好,用户体验就越好。客户端框架使JavaScript成为绝对的依赖项。您不再为Web进行编码。您的应用程序使用Web作为特定运行时引擎的交付机制。浏览器是您的操作系统,更新可能会破坏您的应用程序。
PE是关于不做假设。您不假设任何事情——这是这项技术的核心前提。JavaScript框架会让您误以为每个人都在使用功能强大的设备上的强大浏览器。我们以前做过这些假设。这与假设每个人都在使用宽带有什么不同?或者每个人至少都有一个17英寸、至少960像素宽的屏幕?或者每个人现在和将来都会使用IE6?
渐进增强批评者认为您会花费所有时间处理旧浏览器。实际上,恰恰相反:您永远不需要处理旧浏览器,因为适当的回退已经到位。支持旧浏览器是PE的优势——而不是目标。您可以支持最差的浏览器,但您可以建立任何您喜欢的基线。例如,我目前正在开发一个应用程序,其中addEventListener是大多数JavaScript运行的要求。因此,IE8及以下版本将无法显示功能增强。我可以解决这个问题,但这不值得投资,因为它是一个没有旧IE用户的企业应用程序。但是,IE8用户仍然可以使用该系统,如果需要,可以对其进行改进。
您可以使用PE技术创建外观相同的应用程序。混淆的原因是大多数JavaScript框架提供了一系列外观良好的预先开发的小部件。这些相同的小部件可以在渐进增强型应用程序中使用,但是,如果没有JS,它们将回退到基本的HTML替代方案。PE还允许您使用尚未出现在任何浏览器中的现代HTML、CSS和JavaScript API。考虑一下Fetch API——XMLHttpRequest的现代替代品。它支持最少,但我可以使用它而不会出现问题,因为我可以回退到XMLHttpRequest或服务器请求。JavaScript框架牢牢地停留在现在——而不是未来。
或者,更具体地说,客户端框架处于技术前沿,推动着Web向前发展。对不起,但这是一种错觉。类似AngularJS的框架实现了神奇的功能,但是,深入研究一下,您仍然在使用HTML、CSS、JavaScript和DOM操作。充其量,它是一种抽象。最坏的情况是,它是一种干扰。您的客户端框架仅与开发它的浏览器一样好。AngularJS 2.0是完全重写的,因为在AngularJS 1.x发布时,Object.observe()和Web Components等功能并不常见。该框架强制您使用旧技术,但会向您隐藏实现。PE允许您使用任何现代API而不会破坏您的应用程序。祝您从Angular 1升级好运……
这部分是正确的——但仅当您开始构建应用程序时。您可以访问一系列控件,这些控件可以缩短初始开发时间。但是,您随后就被困在该框架的范围内,这可能会导致以后出现问题。假设您的应用程序已经运行了一段时间,并且客户要求支持BrowserX。它被一个主要客户使用,并且并非特别旧;Blackberry浏览器、iPhone 4、Android 3.3等。他们可能期望开发时间为几天,但如果您的JavaScript框架不兼容,则可能无法实现。对于使用PE技术开发的应用程序,这个问题可能永远不会出现;您可能已经支持该浏览器。可以添加进一步的增强功能,而无需进行重大重写。
这是批评者最喜欢的引言。唯一说PE工作量过大的人是那些从未尝试过它或以某种方式尝试失败的人。如果您从一开始就没有考虑PE,它只会花费两倍的时间。试图将PE改造到现有应用程序中注定要失败——对于依赖JavaScript的应用程序尤其如此。让我们考虑一个简单的示例,例如搜索查询结果的分页列表。第一页加载返回所有HTML。它很快,JavaScript无需执行任何操作。在幕后,我们使用数据库查询并将结果插入HTML模板中。您可以快速调整相同的服务以将结果作为JSON数据或不带标题和页脚的结果HTML返回。当用户点击“第2页”时,将显示第二页结果:
这需要更多工作,但这绝对不是双倍的工作量。我们受益于跨浏览器容错解决方案。
此论点背后的逻辑是网站最终会过时。因此,您可以使用一个在特定时间点针对特定技术的框架。我希望如此。如果您的代码很好,它将被使用的时长远超您的预期。糟糕的代码存活时间更长,因为没有人想触碰它。但是,再次使用渐进增强,您除了Web将继续作为基于客户端/服务器的基于HTML的系统之外,不做任何假设。Web需要从根本上改变才能使您的应用程序失败——它将不再是Web!
引用Oddz的话:>客户端JavaScript框架的激增使您与其他“老前辈”一起成为少数派。
是的,谢谢!JavaScript反弹是由在Web上开发了相当长一段时间的人领导的。我们都是害怕新技术的顽固分子,无法与时俱进吗?也许吧。或者也许是因为我们从我们许多、许多历史错误中吸取了一些教训?JavaScript框架提出了熟悉的问题:
有些人像我们过去使用onclick处理程序一样混合HTML和功能,例如
它们针对特定浏览器。已经出现了“最佳浏览方式……”消息和标签的复苏。
它们对今天的Web做出了假设——例如JavaScript在任何地方都能工作,并且每页2MB是合理的。
他们没有规划未来。
JavaScript框架主要使开发人员受益——而不是用户。它们可以提供短期收益,但代价是访问者减少和痛苦的长期维护。而且不要忘记SEO。Google会索引JavaScript页面,但并非一定能够跟踪每个逻辑分支。除非您仔细编写代码,否则也很难链接回特定URL。渐进增强补充了Web的优势:
只有一个缺点:很明显,许多开发人员仍然不信任或不理解渐进增强。JavaScript依赖的反弹万岁!
JavaScript依赖是指JavaScript代码依赖其他JavaScript文件或库才能正常运行。例如,如果一个JavaScript文件使用在另一个文件或库中定义的函数或变量,则称其依赖于该文件或库。依赖关系可以使代码更高效、更易于管理,但如果管理不当,它们也可能引入复杂性和潜在问题。
渐进增强是一种设计理念,它首先强调核心网页内容,然后逐步在其之上添加更细致和复杂的演示和功能层。在JavaScript的上下文中,这意味着编写代码,为所有浏览器提供基本功能,同时为可以支持它的浏览器提供高级功能。
JavaScript依赖可能会阻碍渐进增强的实现。如果一个JavaScript文件严重依赖于并非所有浏览器都支持的其他文件或库,则它可能无法为这些浏览器提供基本功能。这违背了渐进增强的原则,渐进增强旨在为所有用户提供核心功能。
渐进增强提供了许多好处。它确保所有用户都可以访问网页的核心内容和功能,而不管其浏览器的功能如何。它还推广了语义HTML和关注点分离等良好的Web实践,并使网站更能抵抗JavaScript或CSS的潜在问题。
虽然JavaScript依赖可以使代码更高效、更易于管理,但它也可能引入复杂性和潜在问题。如果依赖关系管理不当,可能会导致代码膨胀、加载时间变慢以及不同文件或库之间可能发生冲突等问题。它还可以使代码更难维护和调试。
有几种策略可以有效地管理JavaScript依赖关系。这些策略包括使用Webpack或Rollup之类的模块捆绑器,可以将所有依赖项捆绑到单个文件中;使用npm或Yarn之类的包管理器,可以帮助您管理和更新依赖项;以及使用ESLint之类的代码检查器,可以帮助您发现依赖项的潜在问题。
在您的JavaScript代码中实现渐进增强包括编写代码,为所有浏览器提供基本功能,然后为可以支持它的浏览器逐步添加更高级的功能。这可以通过使用特性检测来检查浏览器是否支持某个特性然后再使用它,并确保您的代码在不支持某些特性的浏览器中可以优雅地降级来实现。
客户端JavaScript框架通常严重依赖于JavaScript依赖关系。这些框架(例如React、Angular和Vue.js)包含许多内置功能和库,您的代码可以依赖它们。虽然这可以使开发更快、更容易,但如果这些依赖关系管理不当,也可能导致潜在问题。
渐进增强可以在客户端JavaScript框架中发挥关键作用。这些框架通常包含允许开发人员实现渐进增强的功能,例如服务器端渲染和代码分割。这些功能可以帮助确保您的Web应用程序为所有用户提供核心功能,而不管其浏览器的功能如何。
平衡JavaScript依赖和渐进增强需要仔细规划和良好的编码实践。您应该尽量减少代码的依赖关系,并确保它们得到妥善管理。同时,您应该努力实现渐进增强,确保您的Web应用程序为所有用户提供核心功能。这可能涉及使用特性检测、优雅降级和其他技术。
以上是JavaScript依赖性反弹:神话的渐进增强的详细内容。更多信息请关注PHP中文网其他相关文章!