我的Web前端学习计划 - 2021

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

您也可以在我的博客上阅读这篇文章，我会在那里更新进展。

虽然我在几家大型科技公司工作过，但我对网页开发，尤其是前端开发知之甚少——我的大部分时间都花在了机器学习模型上。也许这就是专业化的弊端吧。

我一直对整个Web前端开发生态系统非常感兴趣。在我看来，技术和开发者工具的发展速度非常快，过去几年里，人们在这个领域进行了许多富有创意的尝试。今年，我的目标之一是能够独立完成Web项目的端到端开发，而学习前端开发是其中一项主要任务。

我思考了如何才能让自己更有动力、更有责任感，于是决定把我的目标、计划和进展情况记录在这里。

目标

我的主要目标是

• 知识面广：熟悉前端开发工具和流程。
• 技能、深度：能够使用自己选择的一套工具建立工作流程，并能轻松地进行前端更改/项目。
• 实践经验：完成一些实际的小项目以获得实践经验，有趣的小项目也可以接受/鼓励。

计划和进度更新

以下是我目前了解的技术栈关键组件的基本概述。随着学习的深入，我会不断添加新的章节。在每个章节下方，我也会根据后续进展或调整后的观点，添加更新（并注明日期）。

我会在本页底部的“笔记”和“项目”部分总结成果。我计划撰写博文来记录我的学习过程——部分博文是“学习笔记”，记录我学到的知识或解决问题的方法；其他博文则会介绍一些独立的项目。我希望写作能帮助我更清晰地理解相关主题，并为将来提供有用的参考资料。

HTML

我觉得这已经很清楚了，所以没在这里花时间解释，以后还是相信谷歌/StackOverflow吧🤞

开玩笑啦，我之前用HTML和数据表做过一些小型数据仪表盘网站（所有页面都是预先编译好的），所以我觉得我掌握的基础知识足够我上手了。

CSS

这里有一个时长1.5小时的速成课程，节奏很快，但内容比较基础。我估计之后你还得花很多时间在网上搜索。

Javascript（浏览器和Node.js）

这门语言对我来说是全新的，我读了一篇很棒的简明总结。去年我还上了两门 Udemy 课程：一门是关于这门语言本身的，另一门是关于如何在服务器端使用 Node.js。我觉得这两门课太冗长了，不太推荐给别人。我跳过了大部分练习和一些主题——我打算把这些经验留到实际项目中去。不过，了解一些实际应用和工具配置方面的知识还是很有帮助的。

React

每年都有新的前端框架涌现，但 Vue 和 React 似乎依然流行，并且会长期占据主导地位。最近，Svelte 也迅速走红。总的来说，我觉得 React 更成熟、支持更好，所以最终选择了它。想要快速比较其他框架，可以参考下面这张来自 State of JS 2020 的图表。

关于学习资源：我尝试在 Udemy 上学习这门课程，但实在受不了它的冗长和啰嗦，于是决定直接阅读 reactjs.org 上的文档，这门课程非常棒。

React 存在一些问题：

React 似乎完全是客户端渲染的，并且主要面向单页应用（SPA）。这带来了一些困难。

一个完整的Web应用/网站会包含一些应用页面和一些内容页面（例如首页、博客内容、常见问题解答等）。对于这些用户体验/交互性不强的静态页面，客户端渲染既没有必要，也可能对SEO造成灾难性的影响——与服务器端渲染/预渲染的静态页面相比，页面加载速度会很慢，而且搜索引擎爬虫可能难以执行客户端的JS代码。

一种解决方案是将这些静态/内容页面与应用程序完全分离。但对于这些内容页面，最好能够复用 React 应用程序中的同一套 UI 组件（按钮、导航栏等）。因此，完全分离也不是一个理想的选择。

这时 Next.js 就派上用场了。

Next.js（仍然使用 React，但更好）

在了解了 Next.js 在混合静态渲染和服务器端渲染方面的功能后，我印象深刻，觉得这正是我一直在寻找的东西。

另外值得一提的是，我试用了 Vercel 的部署工具，感觉非常棒。以前，开发一个 Web 应用，我们需要把后端服务器托管在某个地方（比如 AWS 或 Heroku），然后再把前端包部署到某个地方（比如 Netlify 或 S3，并配合 CDN）。这样一来，部署和付费的地方就总是有两个——对于小型项目来说，这确实有点麻烦。

Vercel 可以处理所有静态资源的 CDN，并将所有服务器端逻辑（API 路由）作为无服务器函数托管在 AWS Lambda 上（我认为是这样），因此您真的无需担心任何托管基础设施。

这涉及到一些后端开发的内容，但考虑到 React 本身存在的问题，很难不提及。一直以来，Express.js 都是 JavaScript 开发人员的事实标准，但 Next.js 已经成为一个强有力的竞争者。请参阅下方来自 State of JS 2020 的图表。

我要特别感谢 Lee Robinson，他创作了大量关于 Next.js 的优质内容，强烈推荐大家去看看他的课程、代码库和文章。这里推荐一个非常实用的课程，里面包含一个实际的应用案例。

UI框架/设计系统

在尝试了一段时间 Material UI 之后，感觉它有点太复杂了。也许是我没理解透彻。看了 React 2025 的课程视频后，我决定改用 Chakra UI，看看效果如何，之后再来汇报。

TypeScript

我快速浏览了一下面向 JavaScript 程序员的 TypeScript，并尝试将一个小型 JavaScript 项目转换为 TypeScript。使用 TypeScript 编写代码的舒适度和信心都非常出色，我认为对于更大的项目/团队来说，它将非常有用甚至必不可少，随着项目规模的扩大，我会再次考虑使用它。无论如何，TypeScript 的采用都可以循序渐进。

Webpack

在搭建 TypeScript 项目的过程中，我也学到了一些关于 Webpack 的知识。当我们编写带有大量依赖项的客户端代码时，我们需要以某种方式将它们构建成浏览器可以运行的东西（一个 bundle），因为要兼容很多浏览器。

Webpack 是一个非常流行且功能强大的打包工具（虽然我还没怎么研究过其他工具）。它提供了许多灵活的构建流程自定义选项，因此你可以添加额外的步骤，例如在转译之前将 TypeScript 处理成 JavaScript，以及添加 polyfill 以使你的代码兼容旧版浏览器。Webpack 还支持处理非代码依赖项，例如图片、CSS 甚至 Markdown 文件。

但现实情况是，像 React 或 Next 这样的现代框架已经提供了构建脚本，你基本上不需要直接处理 Webpack，但在各种项目中，如果你想做一些自定义（比如添加后处理步骤，或者将一些文件复制到某个地方），了解一些 Webpack 的知识就很有用了。

我所有关于 Webpack 的知识都来自它的官方文档和 YouTube 上的这个教程，我强烈推荐它。

测试

我在这方面做得不多，不过 Mocha、Jest 和 Cypress 看起来都不错，值得一试。另一个满意度极高但目前使用率较低的工具是Testing Library。