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

毫无疑问，前端开发将是2021年编程领域最热门之一。

以前的前端开发者只要懂得一些HTML、CSS，或许还有jQuery就足以创建交互式网站，但如今面临的是一个广泛且不断变化的生态系统，需要新的开发技能；需要掌握新的工具、库和框架；需要不断地投资自己。

在过去的几年里，给我们带来了很棒的新库和框架，比如ReactJS、VueJS和Svelte，利用JavaScript来驱动主要的Web应用。

1. 框架

在2021年，我们可能会看到Facebook的ReactJS和社区驱动的VueJS之间的对决。React目前在GitHub上拥有15.9万颗星星，而Vue的星星数更多--17.5万颗。例如，Angular只有6.75万颗星。

React（蓝线）、Vue（红线）、Angular（黄线）和Svelte（绿线）在2019年的搜索量支持了这一假设--Vue略高于React。Angular在搜索量上跟不上，Svelte在这次比较中完全没有作用。

 

因此，对于2021年，从事或想要使用JavaScript框架的前端开发人员应该将React和Vue作为主要选择。如果你正在从事大型企业项目，Angular是一个有效的选择。

 

2. 静态网站生成器

静态网站生成器结合了服务器端渲染（对SEO非常重要，但也是初始加载时间）和单页应用的力量。

现在很多项目即使不需要服务器端渲染，也会选择SSG，因为像Next或Nuxt这样的解决方案都带有方便的功能，比如标记支持、模块捆绑器、集成测试运行器等。

如果你对前端开发感兴趣，你应该仔细研究一下下面的项目，并尝试在这些项目上获得一些实践经验：

• Next (React-based)
• Nuxt (Vue-based)
• Gatsby (React-based)
• Gridsome (Vue-based)

3. JAMstack

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

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

虽然这些名词本身并不新鲜，但它们都有相同的地方--不依赖于Web服务器。因此，一个依靠Ruby或Node.js后端的单片应用，或者一个使用Drupal或WordPress等服务器端CMS构建的网站，都不是用JAMstack构建的。

如果你想使用JAMstack，有一些最佳实践。

整个项目在CDN上服务

因为不需要服务器，整个项目可以由CDN提供服务，释放出无与伦比的速度和性能。

一切都在Git里

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

自动构建

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

Atomic部署了

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

即时缓存无效

当一个网站上线时，你必须确保你的CDN能够处理即时的缓存清除，让变化变得可见。

大公司使用它们为用户提供良好的体验。

在2021年，作为一个前端开发者，这绝对是你想搞清楚的事情。

 

4. PWA

渐进式网络应用(PWA)在2021年肯定会成为一种趋势。越来越多的公司选择PWA而不是原生应用，为用户提供丰富的移动体验。

PWA是可靠的（即时加载，无需互联网连接即可工作），快速的（流畅的动画，对用户交互的快速响应），以及吸引人的（原生应用的感觉，良好的用户体验）。

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

构建一个进步的Web应用的原因有，比如。

可以从浏览器添加到用户的主屏幕上

即使没有网络连接也可以工作。

支持网络推送通知，增强用户参与度

 

5. GraphQL

现在最热门的话题之一，也绝对是你在2021年要学习或改进的事情，就是GraphQL。

虽然REST通过提供无状态服务器等伟大的概念，长期以来被认为是设计Web API的事实标准，但RESTful API在跟上快速变化的客户端访问时，越来越被认为是不灵活的。

GraphQL由Facebook开发，正是为了解决开发者在处理Restful API时面临的问题。

使用REST API，开发人员将通过从多个端点收集数据，这些端点是为了特定目的而创建的，例如，/users/_id端点或/tours/_id/location端点。

使用GraphQL，工作方式会有所不同。开发人员将向GraphQL服务器发送一个查询，并附上他们的数据需求。然后服务器将返回一个包含所有相应数据的JSON对象。

使用GraphQL的另一个好处是它使用了一个强大的类型系统。GraphQL服务器上的一切都通过使用GraphQL模式定义语言（SDL）的模式来定义。一旦创建了模式，前端和后端开发人员都可以很独立地相互工作，因为他们知道定义的数据结构。

 

6. 代码编辑器/IDEs

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

它提供了几乎类似IDE的功能，比如代码补全和高亮，并且可以通过其扩展市场进行几乎无限的扩展。

尤其是市场，是VS Code的厉害之处。这里有一些很好的扩展，供你作为一个前端开发者使用。

• JavaScript (ES6) code snippets
• npm
• Prettier
• CSS Peek
• Vetur
• ESLint
• Live Sass Compiler
• Debugger for Chrome
• Live Server
• Beautify

这些都是一些很酷的例子。在VS Code中还有更多的东西可以发现，所以我鼓励你尝试一下，如果你还没有使用它。

 

7. 测试

任何未经测试的代码都不能进入生产环境。

虽然在你的个人项目中没有任何测试似乎很方便，但在商业和企业环境中工作时，必须要有测试。因此，对于任何开发人员来说，最好尽可能地在开发工作流程中集成测试。

我们可以区分测试用例，比如

单元测试

孤立地测试单个组件或功能。

集成测试

测试组件之间的交互。

端到端测试

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

测试的方式比较多，比如手动测试、快照测试等。如果你想往高级开发岗位发展，或者目标是在有一定开发水准的大企业工作，就应该尽量锻炼自己的测试能力。

 

8. 整洁的代码

能够写出干净的代码是一项很好的技能，也是很多企业所需要的。如果你想从开发人员的岗位升到高级开发人员的岗位，你应该真正学习干净代码的概念。

干净的代码应该是优雅的，令人愉悦的阅读。它应该是集中的，你应该照顾它。所有的测试都在干净的代码中运行。它们不应该包含重复的内容，实体的使用，如类、方法和函数，应该尽量减少。

一个干净的代码开发者应该做的一些事情是。

为变量，类，方法和函数创建有意义的名称。

函数要小，参数要尽量少。

根本不应该要求注释--代码本身就应该是有意义的。

 

9. git

毫无疑问，Git是目前Web开发中版本控制的标准。对于每一个前端工程师来说，了解基本的Git概念和工作流程，对于在各种规模的团队中有效工作真的很重要。

下面是一些你应该知道的常用Git命令。

• git config
• git init
• git clone
• git status
• git add
• git commit
• git push
• git pull
• git branch

10. 软技能

经常被忽视，但对开发人员来说真的非常重要，那就是掌握软技能。

虽然了解技术方面的知识很有帮助，但知道如何在团队中进行沟通同样重要。如果你计划向高级职位发展，你应该努力掌握以下软技能。

同理心

沟通

团队合作

亲和力和热心帮助

耐心

思想开放

解决问题

问责制

创造性

时间管理

加入我们的学习社区:http://kfer.cn/