前端网页开发的未来是什么?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

前几天有人让我做一个关于这个问题的小型讨论。我认为我自己并没有资格回答这个问题,任何一个人都不具备。如果您真的需要对这个问题的明确答案,您可能需要查看来自许多开发人员的调查结果的汇总数据。

不过我确实有一点资格。除了运营这个网站,这要求我每天思考前端开发,并让我接触到关于前端开发的大量对话,我自己也是一名活跃的开发人员。我参与了 CodePen 的开发,那里是前端开发人员的集中地。我还每周与各种各样的嘉宾在 ShopTalk Show 中讨论这个问题,我经常去参加以前端开发为主的会议。

所以,让我尝试回答一下。

再次声明

  1. 这并不全面
  2. 这些只是松散的猜测
  3. 我只是一个人

用户期望不断提高。

这奠定了基础

人们对网站的要求越来越高。开发人员被要求以非常快的速度构建非常复杂的东西,并且需要这些东西运作良好且速度很快。

新的 JavaScript 已经到来。

jQuery 对我们来说非常棒,但它不再适合新的开发。我不只是说 ES6+ 已经可以满足我们的需求,事实上确实如此。我们通过直接操作 DOM 并将其视为状态存储而陷入了困境。正如我开头所说,用户期望以及随之而来的复杂性正在上升。我们需要管理这种复杂性。

状态 是一个重要的概念,正如 我们讨论过的。网站将通过思考需要管理哪些状态来构建,然后为这些状态构建合适的存储。

新的框架已经到来。Ember、React、Vue、Angular、Svelte 等等。它们适应了使用状态、组件和为我们处理 DOM 的理念。

现在它们可以竞争速度、功能和 API 的友好性。

TypeScript 似乎也是一个长期赢家,因为它可以与任何东西一起使用,并为开发人员带来稳定性和更好的编辑体验。

我们不是在构建页面,而是在构建系统。

风格指南。设计系统。模式库。这些东西正在成为网页项目流程的标准组成部分。它们可能会成为主要交付成果。一个系统可以构建任何需要的东西。“页面”的概念正在消失。组件被拼凑在一起,构建用户看到的东西。这种拼凑可以由 UX 人员、交互设计师,甚至市场营销人员完成。

新的 JavaScript 非常适合这种情况。

原生和网页之间的界限正在变得模糊。

Sketch 和 Figma 哪个更好?我们根据它们的功能来判断,而不是它们是原生应用程序还是网页应用程序。我应该使用 Slack 或 TweetDeck 的原生应用程序,还是打开一个标签页?这两种方式的效果都一样。有时一个网页应用程序非常好,我希望它能成为原生应用程序,这样它就可以成为我 Dock 中的图标并具有持久登录功能,所以我使用 Mailplane 来访问 Gmail,使用 Paws 来访问 Trello。

我经常使用看起来需要原生应用程序的应用程序,但实际上它们在网页上表现得一样好甚至更好。仅查看音频/视频应用程序,Skype 拥有功能齐全的应用程序,Lightstream 是一个完整的直播工作室,Zencaster 可以录制多轨高质量音频。所有这些都在浏览器中。

这些仅仅是在网页上做得很好 的例子。网页技术本身也在大幅提升。Service Worker 为我们提供了离线功能和推送通知等重要功能。Web Audio API。Web Payments API。网页应该成为构建应用程序的主要平台。

用户会使用好用东西,而不会考虑或关心它是怎么构建的。

URL 仍然是一个杀手级功能。

网页在这方面做得很好。有一个通用的方法可以直接跳到查看特定内容,这是不可思议的。URL 使搜索引擎成为可能,这可能是人类最重要的创新之一。URL 使共享和书签成为可能。URL 为市场营销创造了一个公平的竞争环境。任何人都可以访问 URL,没有守门人。

性能是一个关键因素。

对性能不佳的网站的容忍度会降低。每个人都期望一切都能立即完成。性能不佳的网站将令人尴尬。

CSS 将变得更加模块化。

当我们编写样式时,我们始终会做出选择。这是一个全局样式吗?我是否故意将这个样式泄漏到整个网站中?还是我正在编写特定于这个组件的 CSS?CSS 将在这两者之间被分成两半。特定于组件的样式将被作用域化并与组件捆绑在一起,并在需要时使用。

CSS 预处理将逐渐消失。

预处理器的许多杀手级功能已经进入 CSS(变量),或者可以通过更高级的构建过程(导入)更好地处理。我们最终用于模块化和作用域 CSS 的工具在某种意义上仍然是 CSS 预处理器,因此它们可能会接管预处理必要性的剩余部分。在当前预处理器的标准集合中,我认为我们会错过的是 mixin。如果原生 CSS 能够实现 mixin(可能是 @apply)和 extends(可能是 @extend),这将加速当前预处理器的弃用。

精通 HTML 和 CSS 仍然至关重要。

HTML 的构建方式以及它最终出现在 DOM 中的方式将继续发生变化。但您仍然需要了解好的 HTML 看起来是什么样子。您需要知道如何以一种对您有用、对用户可访问且适应样式的结构构建 HTML。

CSS 在浏览器中的呈现方式以及它的应用方式将继续发生变化,但您仍然需要了解如何使用它。您需要知道如何完成布局、管理间距、调整排版,并保持良好的品味,就像我们一直以来做的那样。

构建流程将变得更具竞争力。

由于性能至关重要,并且在性能方面有很大的改进空间,我们将看到将代码库推送到生产环境中的创新。像 webpack(树摇、代码拆分)这样的工具已经在做很多事情,但仍有很大的空间让自动化工具对最终如何将代码交付到浏览器进行魔法般的优化。优化首屏加载。按重要性顺序交付资产。决定哪些内容发送到哪里,以及如何发送。不发送任何未使用的代码。

随着 Web 平台的演进(例如客户端提示),构建流程将进行调整,最佳实践也将随着它不断演进,就像它们一直以来那样。