前端开发的五大趋势

成为一名 Web 开发人员可能会让人感到压力重重。

不断努力跟上时代步伐，学习新的框架、新的语言特性，有时甚至学习全新的语言。难怪前端开发人员常常感到压力山大。

但仍有希望：在过去的几年里，虽然仍然发生了巨大的快速变化，并且可用的前端框架和包比以往任何时候都多，但一些概念也已经整合成一些大趋势。

如果我们了解这些大趋势，就能帮助我们集中思考，明白应该学习什么。在这样的背景下，选择学习哪个特定的框架或工具就没那么困难了——只要我们选择的框架或工具符合这些大趋势，我们就能将大部分知识迁移到新领域。

我们越能了解全局，就越能驾驭网络这股疯狂的浪潮，而不会感到被淹没。

以下是前端开发的五大趋势。

1.面向组件开发

如今，每个 JavaScript 框架都采用了面向组件的方法。无论你使用哪个框架——React、Angular、Vue 是三大巨头，但进一步看看 Ember、Dojo、Mithril 等工具……它们都使用组件作为 UI 思考的核心抽象。

这种导向也体现在 CSS 中，无论是在方法论层面还是框架层面。像 BEM 这样的方法论，其设计初衷就是为了支持面向组件的 CSS 方法。而像 Bootstrap、Material 或 Foundation 这样的 UI 框架，本质上只是一些预制组件的集合。这几乎是所有现代前端开发的根基。

为什么面向组件的开发如此流行？因为它允许分离关注点，并以一种对用户界面更有意义的方式进行模块化开发。

我们一直深知代码模块化的重要性——它使我们能够在保持代码可管理性的同时开发更复杂的系统。然而，前端模块化的正确方法却一直存在争议。React 的伟大洞见在于打破组件间的隔离壁垒，而非编程语言的壁垒，这彻底改变了前端世界。

JSX 并非人人都喜欢的解决方案。我更喜欢 Vue 的单文件组件方法，而且关于模板语言还是 JavaScript 语法糖的争论双方都有合理的论据。无论如何，关键的变化在于思维上的转变：将组件视为紧密耦合的 HTML、CSS 和 JavaScript 的小捆绑包，而这些组件本身可以与其他组件松散耦合。

2.声明式编码

在 Web 发展的早期，以及直到今天，在许多简单的非框架 JavaScript 应用程序中，我们都使用命令式范式。做这件事，改变这件事，然后照做。

JavaScript 框架本身正逐渐向声明式范式靠拢。在这种范式中，我们不再描述如何做事，而是描述结果，框架本身负责确定如何实现它。现在我们只需声明“什么”，框架则负责处理“如何”和“何时”。

如果我们想要更改某个 UI 元素，只需告诉框架新的最终状态，它就会进行所有必要的更新来实现。它可以使用虚拟 DOM 之类的工具来高效地进行这些更改，还可以使用时间片之类的技术，以不干扰用户交互的方式实现更改，而我们开发者则无需为此操心。

这解开了两件事。

它带来的首要好处是代码的可读性和易理解性得到了显著提升。我们无需费力钻研多行 jQuery 代码来弄清楚到底发生了什么变化，并试图推断最终状态会是什么样子，而是可以直接查看模板，一目了然。

它带来的第二个好处是，我们能够利用框架作者的优势，更轻松、更快速地实现最佳实践。React 已经在通过时间切片和在组件获取异步数据时暂停组件来实现这一点，但我怀疑这将成为 WebAssembly 对前端影响最大的领域之一。框架管理的功能越多，它就越能在幕后默默地为我们做更多的事情。

3. 巩固国家管理

随着越来越多的复杂性转移到前端，我们也必须为前端状态管理提出越来越完善的解决方案。纯粹的面向组件开发非常适合本地状态，但有时我们需要跨不同的组件共享状态。前端的独特挑战之一是所有操作都是异步进行的，但有时我们需要在状态管理中强制实现可预测性。

这必须有两个不同的但我认为相关的发展。

首先是Flux 架构的发展。这种模式已经在 Elm、Redux、Vuex 等工具中实现。这种架构的优点在于它强制单向数据流，使得状态管理和调试变得更加容易。所有操作最终都经过一个中央调度器，这意味着你可以在状态管理中实现可预测性、可重复性和可调试性。

我认为第二个正在解决同一问题的进展是 GraphQL 的兴起。它通过创建一个整合层来解决这个问题，该整合层不再位于前端的调度器中，而是位于 GraphQL 服务器上。前端不再需要管理它们需要从中获取状态的众多不同位置及其相互关系……它们只需请求所需的内容，GraphQL 服务器就会负责将其打包。

4. 单页应用程序和客户端可路由性

当复杂的前端刚开始出现时，我们并不清楚该如何组织它们。我们是否应该简单地将越来越强大的组件嵌入到独立的服务器渲染页面中？

随着时间的推移，很明显 URL 是网络最伟大的创新之一，但完全在客户端应用程序内在页面之间移动可能会带来巨大的优势。

Ember.js 可能是第一个真正将其作为理念阐述的框架，但此后它几乎被所有主流客户端框架所吸收。虽然并非每个项目都需要一个完整的单页应用程序，或者只需要一个，但让至少部分甚至全部前端自行进行路由的做法越来越普遍。

无论您使用的是 React Router、Vue-router、Mithril 的路由，还是其他完全不同的路由，核心概念都非常相似。一个 URL 映射到一组组件和状态，通常基于嵌套路由实现组件的嵌套。

5. 管理复杂性的类型

JavaScript 一直以来都是一个快速而松散的开发环境。类型定义松散，参数不做检查，甚至自动化测试也长期被忽视。但随着前端构建的复杂性不断增长，我们对代码管理和错误预防的辅助需求也日益增长。

我们获取帮助的最大趋势是类型。从Flow这样的工具开始，到现在越来越多地使用 TypeScript 这样的可编译为 JavaScript 的语言，前端正在拥抱类型检查。

令人震惊的采用统计数据，例如46% 的 npm 调查受访者使用 TypeScript，表明这一趋势正在兴起，并且 2019 年的所有迹象都表明这一趋势仍在继续。

福利：服务器端渲染和通用 JavaScript

虽然更多的是“部署”或操作创新而不是前端开发创新，但另一个非常明显的大趋势是促进单页应用程序的服务器端渲染的趋势。

这使得您可以充分利用服务器端渲染和 SPA 应用程序的最佳属性 - 快速查看首页，同时还能提高网络效率并具有 SPA 的所有延迟和交互性优势。

总结

识别这些大趋势的优势在于，你无需过于担心“跟上潮流”或不知道该学什么。你可以专注于一个技术栈，但在学习过程中，要留意从宏观角度汲取的经验教训，以便根据需要快速应用到其他技术栈。

例如，您可以选择使用 TypeScript 深入研究Next.js。这将使您接触到每一个大趋势。

你将使用 React 进行构建，这是一个面向组件的框架，具有出色的声明式风格。你可以选择使用Redux或GraphQL，并获得开箱即用的路由能力和服务端渲染功能。

如果您稍后决定以 Vue.js 为例，所有这些学习内容都将会转化 - Vue 的细节略有不同，但总体情况非常相似，甚至还有一个等效的更高级别的框架：Nuxt.js。

如果您需要有关如何学习这些主题的一些帮助，您可以查看我2019 年要学习的 5 大前端主题，其中我细分了 5 个更具体的主题，并列出了大量资源。

如果您关注前端开发的最新动态，您可能也会对我的每周简报“周五前端”感兴趣。每周五，我会发送 15 个链接，其中包含 CSS/SCSS、JavaScript 和其他各种精彩的前端新闻，包括最佳文章、教程和公告。点击此处注册：https://zendev.com/friday-frontend.html