全栈工程师必备的12项技能
1. 全面的计算机基础
常规的计算机基础包括：计算机组成，操作系统，计算机网络，编译原理，汇编语言，数据结构和算法
这些鬼东西前端开发用不到，前面面试也最多考个算法。整体涉及到的很少，所以大家可能不太关注这些，或者完全无视。我做 1v1 面试咨询，有部分同学对算法完全是盲区，哪怕工作 5 年以上了。
如果从前端转为全栈，就可能需要这些计算机基础的加持了。例如：
- 你需要设计系统、模块的数据结构，设计数据表或集合
- 你需要写一些复杂的计算，得降低算法的时间复杂度，否则数据大了会卡死
- JS 内存泄露，需要知道代码运行时的堆栈模型
- 线上运行 nodejs 服务，需要开启多进程，如 pm2 进程守护
- 使用 WebAssembly 需要了解编译原理
所以，我们不用非常熟悉这些基础的细节，又不是准备考研，但得知道它们大概讲了什么，用到的时候知道去查一下。
2. 扎实的前端基础
由计算机基础转为前端基础，就像一个建筑，由地基转为地面基础。
首先要了解一些业界标准，如 W3C TC39 ECMA262 WHATWG 等，Web 代码和通讯的协议，大部分都是他们制定的。
前端基础包括 HTML CSS JS ES6+ 还有各种 Web API （DOM BOM Ajax 事件 存储等）。现在大家都用框架 Vue React 开发，这些基础还真不一定熟悉。
还有 TS 和 JSX 。无论网上如何讨论 TS ，我们也知道 TS 有很多缺点，但它仍然是目前最好的解决方案。
还有 HTTP 协议和 Ajax fetch ，我在 1v1 面试咨询时，模拟面试经常考“使用 Vue3 Composition API （或 React Hook）写一个简单的 useRequest （可只考虑 get 请求）” —— 但能写好的人，不到 20% 。
基础不好是没法负责项目的，即便负责了，也会遭遇各种技术挑战。
3. 熟悉服务端知识和流程
服务端知识也是搞全栈项目最基础的知识。
例如一个 HTTP 请求，服务端是如何接收、处理最后返回数据的。要熟悉整个流程，还要能使用某种语言、框架实现具体的功能。即开发服务端接口 API 。
服务端接口常见的设计方式有 Restful API ，这个要熟悉。另外还有 GraphQL 等方式。
除了普通的增删改查接口，还有一些比较常用的接口和功能，例如
- 登录校验，你需要了解 Cookie Session JWT SSO OAuth 第三方登录等。
- 权限设计，常参考 RBAC 模型
- 大文件上传，分片上传，断点续传，秒传等
除了常见的接口 API ，服务端还可能直接返回 HTML ，即服务端渲染 SSR 。例如在 Next.js 中使用 React Server Component 。
你还需要熟悉浏览器和 HTTP 的缓存策略（强制缓存，协商缓存），虽然我们不直接开发，但就直接使用，决定了某些性能优化方法。
在项目开发过程中，我们可能还会使用 mock 数据（本地 mock.js 或者在线 mock 服务），或者使用抓包（charles 和 fiddler）调试某些接口。
除了 HTTP 请求意外，现在还经常使用 WebSocket 或 Server-sent-events 来做服务端和客户端的通讯，前者常用于聊天、通知、协同等，后者常用于 stream 流式输出。如下图：
4. 熟悉常见的框架和库
熟悉常见的框架和库，才能帮助你正确、全面的的做技术选型，而不是天天套路 Vue 好还是 React 好
前端常见库有 Vue React 及其周边工具（状体管理，路由，UI 组件库），还有 ng svelte solid 国内不常用。
服务端常见的库有 express koa egg nest.js ，SSR 框架有 Next.js Nuxt.js
常用的数据库有 mysql pgsql mongodb redis ，以及操作数据会用到 ORM 工具，如 sequelize typedORM prisma.js 等。
做客户端 App 会用到 Electron（Atom 这几年不常见了），做移动端会用到 RN 和 Flutter 。
小程序框架有 Taro Uniapp 等，以及微信公众号 H5 开发会用到 jsbridge 和 jssdk 。
微前端框架有 qiankun wujie 等。
还有一些常见的第三方工具，如富文本编辑器，图表，流程图 …… （这个我以后单独整理个全面的）
5. 复杂问题的设计能力
设计，是软件开发中最麻烦的事情。它涉及各个方面，如数据结构设计、接口设计、模块设计、架构设计 …… 不管它多麻烦，我们掌握自己应该知道的即可。
首先，要知道常见的编程范式：面向对象，函数式编程，AOP 面向切面编程。
然后，SOLID 五大设计原则（尤其是开放封闭原则），前端常见的一些设计模式（常见不到 10 个，用不到 23 个那么多），以及常见的 MVC MVVM 模型。
最后面对一个项目，应该如何设计各个模块和功能，如何架构它们的关系。如下图，这是我最 划水 AI 项目的初步架构设计。后面还会有再详细的。
6. 核心模块(难点)的攻坚能力
一个项目的功能模块可能很多，会有一部分比较难实现。面试时也经常让讲项目难点。
在 划水 AI 项目中，最难的部分是富文本编辑器
- 富文本编辑器本身就很难，虽然现在有现成的 lib 不用从 0 开发，但实际应用到项目中仍然需要做很多事情，而且可能会有很多 bug
- 要支持多人协同编辑（OT 或 CRDT 算法），这块非常麻烦，而且上线以后可能会有各种异常情况
- 要集成 AI 能力，如 AI 生成文本，选中文本让 AI 处理，AI 智能提示等功能。
前两天有同学来找我，说：自己不用学习项目，直接参与帮忙开发，自己前端很熟练。
我就让他去调研一下：tiptap 编辑器如何实现类似 vscode Copilot 智能提示的功能。
然后我俩聊了几句，就没下文了。
解决项目难点不能靠说，靠想，更不能靠三分钟热度。得去实际的做，去找各种文档、资料、教程、demo 去亲自实验，遇到问题要去查询搜索亲自解决。这些说来简单，但做起来很考验能力、经验和定力。
7. 配置完善的前端工程化
前端工程化，提高研发效率，规范研发流程
确定代码仓库，用线上服务 github 或者自建 gitlab 。还有 npm 仓库也可以自建。
webpack vite 等打包工具，现在基本脚手架都可以配置好，很少需要自己配置了。但你也要知道它们的常见配置项，当遇到问题时可通过查询官网来解决。
CI/CD 可根据代码仓库来选择，如 github actions ，或者 gitlab + jenkins 。过程中要考虑使用自动化，例如自动化单元测试，测试通过才能下一步。
要考虑部署上线、回滚，还要考虑部署不同 git 分支的测试环境、预览环境。PS：再大规模的系统，还要考虑小流量，灰度测试，ABTest 等，不过那时就会有专门的运维人员了。
PS：规范，例如组建和目录规范，编码规范，git 提交规范，研发流程规范等。
8. 合适的线上服务
域名和 SSL 证书是必须要有的，划水 AI 项目都已经搞定了。
服务端可以部署在云服务上，可使用 docker 部署，配合 nginx 转发。也可以部署在 serverless 如 vercel 或者阿里云函数计算等。serverless 使用更方便，而且整体费用更低。
数据库要选择一个线上服务器，如阿里云或者国外的 supabase 等。不要使用自己在云服务器上搭建的数据库，除非测试环境不在乎数据丢失。
保存图片、视频、附件等文件，需要文件存储服务，如阿里云 OSS ，还要配合 CDN 服务来加速。
这些服务都是要花钱的。做真实上线的项目，只要跑起来，就是一大堆开销。
9. 第三方服务
划水 AI 项目是一个 AIGC 知识库，首先它需要用到 AI 能力，如 OpenAI ChatGPT 的 API 接口。这个也是付费的。
AI 接口付费的，用户多了会频繁调用，费用很高，所以不可能一直免费使用。需要考虑 VIP 用户付费功能，需要对接微信支付、支付宝等。
项目的用户登录，除了常规方式以外，还要支持 github 登录（针对程序员用户）和微信登录。还可能会加入短信服务，支持短信验证码功能。
还要考虑第三方的统计服务和监控服务，下文要讲。
10. 保障安全性和稳定性
保证一个项目线上持续安全稳定的运行，是一个项目负责人的核心职责。
开发时就要注意安全问题，例如避免 XSS 攻击，避免 SQL 注入，密码加密以后存储数据库。还要注意一些意外情况，例如第三方服务（如 OpenAI 接口）的稳定性问题，要考虑兼容方案或友好提示。
且同时加入核心功能的单元测试，核心界面的 e2e 测试，而且要在 CI 和 CD 都加入自动化测试。
对于核心服务要进行 Apache ab 压力测试和并发量测试。
项目上线以后，要通过统计服务，和 AMP 监控服务，来监测用户的数据和运行状态。
统计服务会收集日志并分析出 PV UV QPS 自定义事件等数据。
监控平台会监控项目的报错、异常，并且有报警机制（短信、钉钉、邮件等），如常见的心跳检测。
还可以考虑云服务的某些安全产品，去预防如 DDOS 攻击等，这些软件层面不好预防的危险。
11. 用户体验和性能优化
先说安全、稳定，再说性能、体验
前端一上来就讲性能、体验，是因为安全、稳定不属于前端管。而转为全栈，就得先考虑安全和稳定。
优化一般都是后置的，即发现问题（慢、卡顿）才进行优化。要针对问题去优化，而不是为了优化而优化。所以要先从性能的检测开始。
检测本地性能可以使用 lighthouse 等工具，后者使用 JS Performance API 得出一些 PF FCP LCP 等参数。线上用户侧的性能检测需要进行性能统计，例如 Sentry 。
前端性能优化的方式，这是经典的面试题，网上有很多资料，这里不再赘述。
全栈角度考虑，服务端的性能优化方式还有很多，如优化数据库查询、缓存数据、服务扩容、CDN 等。
无论前端还是后端，都都可能会遇到内存泄露问题。这个不太好发现，也不太好分析。
性能优化往往伴随着用户体验优化，如节流、防抖、loading、骨架屏 等。
12. 项目和团队管理
复杂的项目一般开发流程比较长，而且一般多人开发，开发过程中会有各种需求问题，bug ，延期等，这些都是研发项目管理的内容。无论采用瀑布式还是敏捷模式，都要考虑解决这些常见问题。
要控制项目需求，不让需求所以蔓延，如非要增加需求，要同步给项目组，并且争取新的时间。
要根据需求、UI 设计，做好技术方案设计，充分的技术调研，再开始开发。磨刀不误砍柴工。
要制定规范的研发管理流程，做好代码审查，做好任务管理、 issue 管理和文档管理，不能光图快。
还要有充分且高效的项目沟通机制，如每日 5 分钟站会，每周半小时周会和周报。