如何成为现代前端六边形战士

一提到前端开发，你一定会先想到 HTML、CSS 和 JS。

也许你还知道 HTML5、CSS3 和 TypeScript。

甚至是 React、Vue 和 Node.js，用它们可以制作精美的前端页面。它们很重要，但并不是现代前端的全部。

你是否知道 Next.js 和 Nuxt.js，以及它们和 React、Vue 的区别。

你是否尝试过 Vite、Rspack、pnpm、WebAssembly、React Sever Component 这些新技术？

你是否听说过灰度发布、CSP、Serverless、边缘计算、WAF、可观测性、RSC 这些名词的含义？

如果你满脸疑问，说明你还没赶上现代前端的发展步伐。

现代前端除了要解决人机交互这个核心问题外，还要解决围绕人机交互的各种体验和工程问题。

比如，如何更有效地提升用户界面的加载效率、如何保证在不同设备上的兼容性、如何改善移动设备上的交互方式、如何满足个性化需求等等。

再比如，如何大幅度提升研发效率和质量，如何保证前端安全，如何利用实时监控了解应用健康度，如何利用云基础设施实现高效部署和无忧运维。

你可能会问，工程配套这块不是应该是后端的工作吗，怎么前端要抢后端的饭碗了？

其实不然，在以前，前端只需要画画页面，写写交互逻辑，然后对接后端接口基本上就行了。

但是现代前端的能力边界已经拓开许多，还需要照顾到诸如体验、效能、工程、数据、部署、安全、适配等等事情，

而这些事情统统都是为了更好地服务于人机交互。这些概念有点抽象，下面举一些具体的例子。

webpack 是前端流行的打包工具，但为什么后来又出现了诸如 Turbopack 和 Rspack 等工具？主要原因是 webpack 不够快，而采用 Rust 语言编写的新工具能提速十几倍。新工具带来的研发提效是显著而且有价值的，这意味着前端可以更快地将产品交付给终端用户。

另一个例子，前端渲染页面的方式已经从完全客户端渲染（CSR）过渡到部分服务端渲染（SSR）。而流式渲染技术是未来的大趋势，相比 CSR 和 SSR 一层层的串行渲染，流式并发渲染具备更好的效率，这意味着用户打开页面的速度将得到明显提升。

接下来一个例子，传统网站部署在云服务器上，而云服务器机房通常位于人口密集的核心地区，比如北京、上海、广州，距离机房较近，用户访问速度快，而偏远地区的访问速度较慢。

边缘计算的出现解决了云服务器部署成本高、用户覆盖面窄的缺点，可以以较低的成本在全球范围内部署应用，离终端用户距离更近。

各大云服务厂商也推出自己的边缘计算服务，同时对前端非常友好，比如 Cloudflare 的 Pages 和 Workers 服务都支持一键部署 WEB 应用。

你看，现代前端很多时候不全是在干前端的事，前端和服务端的界限已经越来越模糊。

所谓合久必分，分久必合。但要注意的是，前端借助服务端的能力，目的依然是解决人机交互问题，如何做得更快、更流畅，而不是要把后端工程的事全干了。

如果你正好在学前端，打算从 HTML/CSS/JS 开始入门，然后学习 jQuery、Express、Ajax，然后是 Git、Webpack、Linux、Nginx 等工具或技术，也许不是最理想的路径，因为它们是零散和过时的。

你需要用更科学和系统化的思路，储备更多关于现代前端的知识和技能。

我会在以后的节目中，围绕计算机网络、编程语言、用户界面、

应用框架、服务端、工具链、质量保障、

前端安全、用户体验、持续集成和部署、可观测性、云基础设施这几个大的主题，分别展开介绍它们的具体内容和使用场景。帮助你更系统地入门现代前端，或是构建更加出色的前端系统，成为前端六边形战士。

点关注不迷路，我们下期展开介绍一下每一块会包含哪些内容。