偶尔,会发布一篇博客文章,它会激发他人的反应或回应,这些回应反过来又会作为博客文章发布,一个主题开始出现。这就是上周发生的事情,围绕着 JavaScript 框架的成本展开的主题——在这个案例中,这个成本揭示了负责任地使用 JavaScript 是多么重要。
现代医疗保健、框架、性能和危害
Eric Bailey:故事从这里开始。Eric 访问了一个医疗服务提供商的网站预约,结果看到了...空白屏幕。
除了令人恐惧的遥测数据量 之外,Modern Health 的面向客户的体验是使用 React 和 Webpack 提供的。
如果您熟悉网页构建方式,那么发生的事情就很明显:一个过度依赖 JavaScript 来驱动其体验的网站,其逻辑与它调用的一个或多个其他错误逻辑片段发生了冲突。这导致了死锁。
如果您不是以构建数字体验为生,那么发生的事情就不那么明显了。您只能看到一个永不停歇的微型假加载动画。
哦,天哪。在某些情况下,这可能只是个小小的麻烦——甚至令人发笑——但在人们的健康受到威胁时却并非如此。
一个在危机时刻寻求帮助的人并不关心 TypeScript、树形摇动、热模块替换、A/B 测试、燃尽图、NPS、OKRs、KPI 或其他创业术语。如果使用他们构建的东西的人无法真正获得他们需要的东西,那么开发者体验就毫无意义。
这是现实的重击。当我们的工具和报告——旨在使我们的工作更有效的工具——阻碍用户体验时会发生什么?这些工具提供了可以帮助我们预测用户需求的见解,尤其是在需要时。
我知道,指责 JavaScript 框架已经很有争议了。但这不仅仅是您使用 React 还是时髦框架的问题。这是关于业务优先级和开发者体验与用户体验发生冲突。
柠檬市场
Alex Russell:缓慢、复杂的框架的支持者成功地将柠檬推销为热门新事物,尽管它们普遍存在着缺陷,却阻碍了更高质量选项的发展。
这些技术最初是基于“更好的用户体验” 推出的,但在它们诞生的高管理成熟度组织之外,它们完全无法兑现这一承诺。移植到更广泛的网络中,这些新的堆栈已被证明是昂贵的废品。
问题就在这里。Alex 说话毫不客气,但请注意,重点在于框架是如何被推销给开发人员的,而不是开发人员本身。销售策略是怎样的?
一旦柠檬销售者灌输了数据轻量级的想法,即改进的“开发者体验”(“DX”)会导致更好的用户结果,那么改进“DX”就变成了一个目的,许多知道真相的人被迫配合。在证伪这种自上而下的 UX 渗透方面,长时间的延迟是一个特点,而不是一个缺陷;他们不需要你成功,只需要你不断购买。
就营销而言,“DX”诱饵和转换 很出色,但技术并没有为任何人带来收益,除了开发人员。
很难接受,对吧?没有人愿意被欺骗,当你已经投入了成本时,承认这一点也很困难。如果你在某项特定技术上投入了时间,并在你的堆栈中集成它,那么事情就会变得非常个人化。开发工作流程很复杂,适应其中之一就像适应你要住一段时间的一所房子一样。但如果你想知道你的房子是否建在 Alex 所说的“沙质基础” 上。
我只想在这里停顿一下,说一下我在这场辩论中没有立场。作为一个网页通才,我倾向于早点采用新工具以熟悉它们,然后迅速放弃它们,并将它们放到我的工具箱中,直到我找到合适的用途。换句话说,我的知识面很广,但在某个领域或某件事上并不深入。 HTML、CSS 和 JavaScript 是我的首选鸡尾酒,但我非常关心用户体验,并且知道何时需要使用工具来解决特定问题。
并且承认,并非每个人都有发言权。我们中的许多人在管理团队中工作,这些团队规定了我们使用的工具。Alex 也说了这一点,我认为这一点很重要,因为很明显,这并非针对个人。这是一个关于我们优先级和确保它们与用户期望相一致的声明。
让我们让 Chris 带领我们回到故事...
使用内容阻止程序进行端到端测试?
Chris Coyier:所以,也许你的应用程序是用 React 构建的,为什么使用 React 并不重要。仍然需要做一些工作来确保应用程序可靠且可访问。
仅仅阻止一个文件不应该完全破坏一个网站,但它经常这样做!在 JavaScript 中,这可能是因为开发人员编写了第一方 JavaScript(我通常会允许),而它依赖于第三方 JavaScript(我通常会阻止)。
[...]
如果我阻止来自
tracking-website.com
的资源,那么我的第一方 JavaScript 将会抛出错误。JavaScript 并不冷静。如果抛出错误,它将不再执行文件中更后面的 JavaScript 代码。如果文件中更后面的代码是transitionToOnboarding();
——它将无法正常工作。
也许值得重新审视你的工作流程并进行调整,以识别更多故障点。
所以这里有一个想法:在安装了流行的内容阻止程序(具有默认配置)的浏览器中运行你的端到端测试。
这样做可能会发现像这样停止你的客户,甚至需要帮助的人,被拦在半路上的问题。
好主意!嘿,任何可以帮助描绘应用程序使用情况的更真实画面都有帮助。这种清晰度可能在流程的更早期出现,也许是在做出开发决策之前。了解你的用户。他们为什么使用这个应用程序?他们如何浏览网页?他们身处何地?什么问题会阻碍他们?Chris 也发表了一个关于此主题的精彩演讲。
现代 MPA 框架* 将出色的 DX 与出色的 UX 结合在一起。你无法在没有 SPA 的情况下创建原生应用程序般的体验,但谁决定人们希望在访问的每个网页上都拥有原生应用程序般的体验?
*例如,Astro、Marko、Qwik
感谢在这里指出来。我对 css-in-js 框架也有类似的焦虑。与直接使用 CSS 相比,它们的 CPU 使用量要高得多,但这是“可以的”,因为渲染延迟在大多数现代硬件上并不明显。
但是,我们仍然使用了大量能源。为了 DX,我们正在全球范围内消耗手机电池。
我喜欢作者在视觉部分之外如何组织他的想法。
好吧,DX 不仅仅是为了开发人员的快乐,它也转化为更少的错误和更短的发布周期。
此外,还有很多框架可以将 DX 与性能和较小的占用空间结合在一起:Svelte、Solid、Qwick,以及可能更多。
我很抱歉不同意所有使用 JavaScript、Python 或其他解释型计算机语言进行关键任务开发的人,只有经过充分测试的编译型语言(如 C 或 C++)才是合适的。其他所有都是充满责任的。
理想情况下,所有网站都应该构建成即使在非常过时的移动版 Safari 上也能正常渲染和运行,而不会出现重大问题。由于更新 WebKit 需要更新整个操作系统,因此这是一个常见的瓶颈。许多人犹豫不决地进行操作系统更新,因为它们是不可逆的,并且可能会引入其他不兼容性。这是一种令人遗憾的状况,但也许最好将您的网站设计为与一台五年未更新的 iPhone 兼容。
不错的文章,对我很有用。