网站与网络APP：有什么区别以及为什么重要？

在网络发展的早期，JavaScript 在Brendan Eich眼中还只是昙花一现，万维网只是一个可以找到网站的地方。当时没有“原生应用”这种东西，因为所有应用都是原生应用；如果您想要复杂的用户交互，您必须明确下载并运行某种形式的可执行程序。

在技​​术的世界里，没有任何东西能够长时间保持纯粹，很快网络就成为可以有意义地称为应用程序的事物的家园，无论是具有服务器呈现的对用户输入的响应的静态 HTML 页面，还是用 JavaScript 或 Flash 编写的完全客户端应用程序，或者两者的混合。

在现代网络上，你可以自由地创建和托管任何东西，从一个简单的网站到一个功能齐全、性能卓越的图像压缩工具。常青浏览器通过 GPU 加速的 3D 渲染和音频/视频录制等功能促进了复杂的体验。同时，服务工作者和 Web 工作者等现代 API 允许开发人员消除 Web 的传统限制（例如初始加载时间和 JavaScript 的单线程特性），以创建感觉像应用程序的网站。

所有这些都引出了一个问题：区分网站和网络应用程序还有用吗？

嗯，（剧透警告）我认为是的，特别是当你试图回答关于如何创建最佳用户体验，或者在给定项目上应该使用哪种技术的问题时。

网站何时会变成网络应用程序？

区分二者的最简单方法可能是说网站由静态 HTML 组成，可能包含一些由 JavaScript 提供的轻量级交互功能或一些 HTML 表单输入。另一方面，Web 应用可能更注重交互，许多功能由客户端 JavaScript、服务器代码或在大多数情况下两者提供。但是，我认为这个定义是错误的，因为它过于强调实现而不是意图。

我的意思是什么？这么说吧：我认为更有用的模型以人们打算如何使用你的网络应用或网站为中心，而这种意图应该是推动你实施的关键因素。如果用户只是想访问信息或获得理解，那么你就有一个网站。如果他们打算完成一些需要输入和响应的任务，那么你就有一个应用。

毋庸置疑，无论你使用哪种定义，网络应用和网站之间都没有明确、无争议的界限。这种以用户为中心的方法并不是最能准确区分两者的模型，但我认为，在尝试开发成功的用户体验时，它是最有用的模型。

最重要的是，很多数字产品实际上都是应用程序和网站的混合体。一个明显的例子就是电子商务。

在这里，用户可能带着了解贵公司及其产品的意图来到这里，但当他们到达那个阶段时，他们希望能够轻松直观地完成购买任务。这不是该模型的弱点，而是优势。将产品目录视为一个网站，将结账视为一个应用程序会很有帮助，它们具有不同但相关的需求，可能需要在设计和开发过程中做出不同的选择。

这有什么区别？

作为一名开发人员，很容易陷入这样的思维陷阱：只有一种技术或方法适合所有情况，或者只有一套最佳实践适合所有场景。大多数开发人员在积累了一定经验后就会摆脱这种思维，但了解 Web 应用与网站的区别可以帮助避免这种僵化的思维。

以初始页面加载时间为例。我想强调的是，在开发网络应用时，你应该始终关注这一点；过长的加载时间对用户来说永远不是好事。但优化总是有代价的。无论是在开发时间、代码复杂性和可维护性方面，还是在选择使用有限资源优化应用程序的哪一部分方面。

回到电子商务的例子。假设您有开发时间和预算来考虑减少商店首页或结账页面的加载时间。您知道经常被引用的 Google页面加载时间统计数据，但您要优化哪个页面？好吧，如果您没有资源或专业知识来测试每个页面的效果（大多数人都没有），那么从用户意图的角度来思考旅程中哪部分更像网站，哪部分更像应用程序会有所帮助。

当用户首次访问您的店面时，他们的意图是获取信息；根据我们的模型，他们将您的平台视为一个网站。在这种状态下，他们并不期待复杂的交互，参与度较低，因此可能不愿意忍受任何延迟。

然而，当用户转到结账界面时，他们正在积极地完成购买任务。他们希望输入和响应，以获得更像应用程序的体验，并且可能对短暂的延迟更加宽容。

同样，在理想世界中，您会优化两种体验，但如果这不可能，那么思考应该如何分配资源就会很有用。

类似的例子可能是商业生产力应用程序，用户可能在一天开始时登录一次，然后在一天的会话期间多次在应用程序中完成给定任务。在这种情况下，打开应用程序时是否有一些初始加载时间可能不太重要，但如果经常重复的任务内置了一个或多个长时间等待，那么它会对生产力和用户满意度产生严重影响。

技术选择

虽然这当然不应该成为决定性因素，但网站与应用程序之间的区别可以帮助您思考技术选择。前端框架就是一个很好的例子。像 Angular 和 Ember 这样的重量级“内置电池”框架往往在企业环境中得到广泛使用，而企业环境通常侧重于应用程序，这并非偶然。然而，当至少在一定程度上强调构建网站时，像React 、Vue 和 Svelte 这样的轻量级框架和“ UI 库”会更受欢迎。React 由 Facebook 构建也并非偶然，它或许是一个寻求涵盖整个网站-应用程序范围的平台的终极典范。

这并不是说你不能用 Angular 构建一个好的网站，或者你不能用 React 构建一个复杂的应用程序，但不同的技术有不同的重点和优势，通常可以很好地匹配不同类型的用户。在评估使用哪种技术时，请尝试根据你的目标来理解这些优势，而不是仅仅因为你在上一个项目中使用过它，或者 Twitter 上有人说它是新热点，就认为一种技术一定比另一种技术更好。

可用性和用户体验

在考虑如何确保用户能够找到他们想要的内容并实现他们想要实现的目标时，了解用户意图至关重要。考虑您的产品在应用程序和网站范围内的位置可以帮助您制定用户体验目标。

对于可能拥有非常熟练和活跃的重复用户的复杂 Web 应用，可能值得专注于添加高级功能，因为这可能会大大提高客户的工作效率。虽然您的应用中不应该有不必要的晦涩难懂的功能，但这些功能可能不像针对技术水平较低或参与度较低的用户的功能那样注重即时可用性。

根据您应用的用户及其使用模式，提供教程功能甚至单独的文档可能是合适的，而对于纯网站来说，这几乎永远不合适。

另一方面，创建成功的网站用户体验更有可能专注于优化网站的高流量路径。确保这些路径清晰直观，并且用户始终能够快速找到他们想要的内容。Web 应用程序不太可能如此专注于特定用例，主要是因为它们的功能通常更加多样化。

结论 

与往常一样，关键是要理解，在 Web 开发中不存在放之四海而皆准的方法，考虑您的项目（或项目的不同部分）在网站和 Web 应用之间的位置可以帮助您避免陷入过于具体的思维模式。通过上述示例，我们已经看到这可以应用于开发的许多方面，从低级技术选择到高级设计和用户体验。

做出这种区分当然不是灵丹妙药，无法回答您在项目中遇到的所有问题，但记住以这种方式分析用户的意图可以成为找到正确观点和验证您的决策的有效方法。