2021 年前端开发人员应该学习的 10 件事

毫无疑问，前端开发将成为 2021 年科技领域最热门的学科之一。

以前，前端开发人员只需了解一些 HTML、CSS 和 jQuery 即可创建交互式网站，但如今，他们面临着广泛且不断变化的技能生态系统，需要开发；需要掌握工具、库和框架；还需要不断投资于个人教育。

过去几年，我们涌现出了许多很棒的新库和框架，例如 ReactJS、VueJS 和 Svelte，它们利用 JavaScript 为主流的 Web 应用程序提供支持。
本文旨在为您提供一些指导，告诉您作为一名前端开发人员，在 2020 年应该关注哪些方面，以提升您的水平，无论您是刚开始编程还是已经拥有一些经验。

1. 框架

2021年，我们可能会看到Facebook的ReactJS与社区驱动的VueJS之间的对决。React目前在GitHub上拥有15.9万颗星，而Vue的星数则更多——17.5万颗。例如，Angular只有6.75万颗星。
2019年React（蓝线）、Vue（红线）、Angular（黄线）和Svelte（绿线）的搜索量支持了这一假设——Vue略高于React。Angular在搜索量方面落后，而Svelte在这次比较中完全没有地位。

因此，对于 2021 年来说，使用或希望使用 JavaScript 框架的前端开发人员应该将 React 和 Vue 作为首选。如果您正在开发大型企业项目，Angular 是一个不错的选择。

如果你想了解有关这些框架的更多信息，请查看以下优秀资源：
React
Vue.js

2. 静态站点生成器

静态站点生成器兼具服务器端渲染（对 SEO 和初始加载时间都至关重要）和单页应用的强大功能。
如今，许多项目即使不需要服务器端渲染也会选择 SSG，因为像 Next 或 Nuxt 这样的解决方案附带了一些便捷的功能，例如 Markdown 支持、模块打包器、集成测试运行器等等。

如果您对前端开发很认真，您应该仔细研究以下项目，并尝试获得一些实践经验：

• Next（基于 React）
• Nuxt（基于 Vue）
• Gatsby（基于 React）
• Gridsome（基于 Vue）

这些可能是 2020 年最热门的，当然还有更多。如果你想了解更多，请查看以下资源：
Next.js
、Nuxt.js
、Gatsby、
Gridsome

3. JAMstack

术语 JAMstack 代表 JavaScript（在客户端运行 - 例如，React、Vue 或 VanillaJS）、API（服务器端进程被抽象并通过 JavaScript 通过 HTTPS 访问）和标记（在部署时预先构建的模板标记）。

这是构建网站和应用程序以获得更好性能的一种方式 - 降低扩展成本，提供更高的安全性，并提供更好的开发人员体验。

虽然这些术语本身并不新鲜，但它们都有一个共同点——它们不依赖于 Web 服务器。因此，依赖 Ruby 或 Node.js 后端的单体应用，或者使用 Drupal 或 WordPress 等服务器端 CMS 构建的网站，都不是使用 JAMstack 构建的。

如果您想使用 JAMstack，这里有一些最佳实践：

整个项目在 CDN 上提供服务

由于不需要服务器，整个项目可以通过 CDN 提供服务，从而实现无与伦比的速度和性能。

一切都存在于 Git 中

每个人都应该能够从 Git 仓库克隆整个项目，而无需数据库或复杂的设置。

自动构建

您可以完美地实现自动化构建，因为所有标记都是预先构建的 - 例如，使用 webhook 或云服务。

原子部署

为了避免在大型项目中重新部署数百或数千个文件而导致状态不一致，原子部署会等待所有文件上传后再进行更改。

即时缓存失效

当网站上线时，您必须确保您的 CDN 可以处理即时缓存清除，以使更改可见。

Netlify 或 Vercel 等知名托管商支持 JAMstack 应用程序，大型公司使用它们为用户提供出色的体验。

作为 2021 年的前端开发人员，这绝对是你需要深入研究的事情。如果你想了解有关 JAMstacks 的更多信息，这里有一些很棒的资源：

JAMstack
JAMstack WTF
“JAMstack 新手？入门所需了解的一切”

4. 渐进式网页应用

渐进式 Web 应用程序 (PWA) 肯定会在 2021 年流行起来。越来越多的公司选择 PWA 而不是原生应用程序，为用户提供丰富的移动体验。

PWAs 可靠（即时加载，无需互联网连接即可工作）、快速（流畅的动画、对用户交互的快速响应）且引人入胜（原生应用的感觉、出色的用户体验）。

他们利用服务工作者实现离线功能，并利用 Web 应用清单文件实现全屏体验。

构建渐进式 Web 应用程序的原因例如有：

• 可以从浏览器添加到用户的主屏幕
• 即使没有互联网连接也能工作
• 支持网络推送通知以增强用户参与度
• 利用 Google 的 Lighthouse 功能

如果您想了解有关 PWAs 的更多信息，请随时查看以下其他资源：

渐进式 Web 应用程序
“您的第一个渐进式 Web 应用程序”

5. GraphQL

GraphQL 是目前最热门的话题之一，也是您在 2021 年绝对需要学习或改进的事物。

尽管 REST 长期以来一直被认为是设计 Web API 的事实标准，因为它提供了无状态服务器等出色的概念，但在跟上快速变化的访问客户端方面，RESTful API 越来越被认为不够灵活。

GraphQL 由 Facebook 开发，用于解决开发人员在处理 Restful API 时面临的确切问题。

使用 REST API，开发人员可以通过从为特定目的而创建的多个端点获取数据来收集数据 - 例如 /users/_id 端点或 /tours/_id/location 端点。

使用 GraphQL 则有所不同。开发者会向 GraphQL 服务器发送查询，并包含他们的数据需求。服务器会返回一个包含所有相应数据的 JSON 对象。

使用 GraphQL 的另一个好处是它使用强类型系统。GraphQL 服务器上的所有内容都使用 GraphQL 模式定义语言 (SDL) 通过模式定义。创建模式后，前端和后端开发人员都可以彼此独立地工作，因为他们都了解定义的数据结构。

如果您想了解有关 GraphQL 的更多信息，请查看以下优秀资源：

GraphQL
如何使用 GraphQL
“GraphQL 内容 API 入门”
“GraphQL：一种数据查询语言”

6. 代码编辑器/IDE

就像 2020 年一样，微软的 VS Code 将成为 2021 年大多数前端工程师的首选编辑器。

它提供几乎类似 IDE 的功能，如代码完成和突出显示，并且可以通过其扩展市场几乎无限地扩展。

VS Code 的出色之处在于其强大的应用市场。以下是一些适合前端开发者的优秀扩展：

• JavaScript（ES6）代码片段
• npm
• Prettier
• CSS 速览
• 维图尔
• ESLint
• 实时 Sass 编译器
• Chrome 调试器
• 实时服务器
• 美化

这些示例非常酷炫。VS Code 还有更多精彩功能等你来探索，如果你还没用过，我推荐你去尝试一下。

7.测试

未经测试的代码不应进入生产环境。

虽然在个人项目中不进行任何测试似乎很方便，但在商业和企业环境中工作时，测试是强制性的。因此，对于任何开发人员来说，尽可能将测试集成到开发工作流程中都是更好的选择。

可以区分以下测试用例：

单元测试
单独测试单个组件或功能。

集成测试
测试组件之间的交互。

端到端测试
在浏览器中测试完整的用户流。

测试的方法有很多，比如手动测试、快照测试等等。如果你想要成为高级开发人员，或者想在有一定开发标准的大公司里找到一份工作，你应该努力提高你的测试技能。

8. 清洁代码

能够编写简洁的代码是一项很棒的技能，许多组织都对此非常渴求。如果你想从开发人员晋升到高级开发人员，你真的应该学习简洁代码的概念。

干净的代码应该优雅且易于阅读。它应该重点突出，并且您应该认真维护它。所有测试都应在干净的代码中运行。它们不应包含重复代码，并且应尽量减少使用实体（例如类、方法和函数）。

干净代码开发人员应该做的一些事情是：

• 为变量、类、方法和函数创建有意义的名称
• 函数应该很小，并且参数尽可能少
• 根本不需要注释——代码应该说明一切

如果您想了解有关清洁编码的更多信息，请查阅 Robert C. Martin 的书籍和帖子。

9. Git

毫无疑问，Git 是当今 Web 开发版本控制的标准。对于每位前端工程师来说，了解 Git 的基本概念和工作流程至关重要，这样才能在各种规模的团队中高效工作。

以下是您应该了解的一些流行的 Git 命令：

• git 配置
• git init
• git 克隆
• git 状态
• git add
• git提交
• git push
• git pull
• git 分支

虽然了解这些命令对于提高工作效率总是有益的，但前端工程师也应该学习 Git 背后的基本概念。以下是一些资源：

《讲解 Git 的基本概念以及如何使用 GitHub》
《如何使用 GitHub - 开发人员使用 GitHub 协作》
GitHub

10.软技能

软技能的获取经常被忽视，但对于开发人员来说却非常重要。

虽然了解技术层面的知识很有帮助，但懂得团队沟通也同样重要。如果你认真考虑从事科技行业，或者计划晋升到高级职位，你应该培养以下软技能：

• 共情
• 沟通
• 团队合作
• 平易近人且乐于助人
• 耐心
• 思想开放
• 解决问题
• 问责制
• 创造力
• 时间管理

永远记住：对于高级开发人员来说，最重要的交付成果是更多的高级开发人员。

结论

在本文中，我向您展示了前端开发人员在 2021 年应该尝试学习、改进或掌握的 10 件重要的事情。
这份清单并不完整，但我希望它能为您明年带来一些启发——选择权完全在您手中！

我最近开了一个新博客“The Smart Coder”，在那里为社区创作免费内容。这篇文章就出自这个博客，你也应该去看看 :)

如果您喜欢我写的内容并希望支持我和我的工作，请在Twitter上关注我，以了解有关编程、制作、写作和职业的更多信息🥰