2021年WEB全栈开发技术栈

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"随着新工具和技术的发展，开发人员的技术格局一直在变化。在进行了大量面试和阅读了多数的职业描述后，总结了一下 JavaScript 开发人员应该掌握的现代技术栈，或许你使用的是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"VUE","attrs":{}}],"attrs":{}},{"type":"text","text":"，或者是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"React","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Angular","attrs":{}}],"attrs":{}},{"type":"text","text":"或","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Svelte","attrs":{}}],"attrs":{}},{"type":"text","text":"等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在面对无数的工具的时候，选择就变成是个技术活，合理的组合可以提高项目开发效率，让团队合作更加友好。本文将从个人的经验出发介绍2021年全栈开发的技术栈，作为自己学习的目标，但这不唯一。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"项目管理","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.notion.so/","title":"","type":null},"content":[{"type":"text","text":"Notion","attrs":{}}]},{"type":"text","text":"：用于整体项目管理、文档、注释和维基","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://clubhouse.io/","title":"","type":null},"content":[{"type":"text","text":"Clubhouse","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://monday.com/","title":"","type":null},"content":[{"type":"text","text":"Monday","attrs":{}}]},{"type":"text","text":"：用于管理开发过程，这两个都可以合并到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"CI/CD","attrs":{}}],"attrs":{}},{"type":"text","text":" 工作流中，可以构建自动化使其自动完成，而更改则反映在暂存和生产","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"CI/CD","attrs":{}}],"attrs":{}},{"type":"text","text":"分支中","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://slack.com/intl/zh-cn/","title":"","type":null},"content":[{"type":"text","text":"Slack","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://discord.com/","title":"","type":null},"content":[{"type":"text","text":"Discord","attrs":{}}]},{"type":"text","text":"：用于团队之间的沟通","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"设计","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.figma.com/","title":"","type":null},"content":[{"type":"text","text":"Figma","attrs":{}}]},{"type":"text","text":" : Figma 是一种跨平台设计工具，内置共享和协作功能","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.photoshop.com/en","title":"","type":null},"content":[{"type":"text","text":"Photoshop","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://www.canva.cn/?display-com-option=true","title":"","type":null},"content":[{"type":"text","text":"Canva","attrs":{}}]},{"type":"text","text":" : Photoshop 是平面设计工作的行业标准，而 Canva 是一款出色的图像编辑工具","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"后端","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://nodejs.org/en/","title":"","type":null},"content":[{"type":"text","text":"Node.js","attrs":{}}]},{"type":"text","text":"：流行的现代后端框架","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.postgresql.org/","title":"","type":null},"content":[{"type":"text","text":"PostgreSQL","attrs":{}}]},{"type":"text","text":" ： 流行的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"SQL","attrs":{}}],"attrs":{}},{"type":"text","text":" 数据库","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.mongodb.com/zh-cn","title":"","type":null},"content":[{"type":"text","text":"MongoDB","attrs":{}}]},{"type":"text","text":" ： 流行的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"NoSQL","attrs":{}}],"attrs":{}},{"type":"text","text":" 数据库，通用、基于文档的分布式数据库，帮助现代应用程序开发人员迎接云时代的到来。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://harperdb.io/","title":"","type":null},"content":[{"type":"text","text":"HarperDB","attrs":{}}]},{"type":"text","text":" ：流行的混合 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"NoSQL/SQL","attrs":{}}],"attrs":{}},{"type":"text","text":" 数据库","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"前端","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://nextjs.org/","title":"","type":null},"content":[{"type":"text","text":"NextJS","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://create-react-app.dev/","title":"","type":null},"content":[{"type":"text","text":"Create React App","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://redux.js.org/","title":"","type":null},"content":[{"type":"text","text":"Redux","attrs":{}}]},{"type":"text","text":" ：","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"NextJS 用于生成静态网站","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Create React App 创建单页 React 应用程序的方式","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Redux 是 JavaScript 应用程序的可预测状态容器，用于编写行为一致、在不同环境（客户端、服务器和本机）中运行且易于测试的应用程序","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://tailwindcss.com/","title":"","type":null},"content":[{"type":"text","text":"Tailwind","attrs":{}}]},{"type":"text","text":" ：有助于编写CSS，因为它是一个现代流行的框架，避免从头开始编写自己的自定义CSS，从而加快开发工作流程","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://sass-lang.com/","title":"","type":null},"content":[{"type":"text","text":"CSS/SASS","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://styled-components.com/","title":"","type":null},"content":[{"type":"text","text":"styled-components","attrs":{}}]},{"type":"text","text":"：css预处理器，可以作为一个不同的选项来使用，为React中的组件提供更多定制选项","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://storybook.js.org/","title":"","type":null},"content":[{"type":"text","text":"Storybook","attrs":{}}]},{"type":"text","text":"：这是创建组件的主要构建过程，允许模块化，Storybook 组件是在动态库中独立创建的，可以在整个业务中更新和共享","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://jestjs.io/","title":"","type":null},"content":[{"type":"text","text":"Jest","attrs":{}}]},{"type":"text","text":" 和 ","attrs":{}},{"type":"link","attrs":{"href":"https://enzymejs.github.io/enzyme/","title":"","type":null},"content":[{"type":"text","text":"Enzyme","attrs":{}}]},{"type":"text","text":"、","attrs":{}},{"type":"link","attrs":{"href":"https://testing-library.com/","title":"","type":null},"content":[{"type":"text","text":"React 测试库","attrs":{}}]},{"type":"text","text":"和 ","attrs":{}},{"type":"link","attrs":{"href":"https://www.cypress.io/","title":"","type":null},"content":[{"type":"text","text":"Cypress","attrs":{}}]},{"type":"text","text":" ：TDD 在将代码和组件发送到生产环境和 Cypress 进行端到端测试之前对其进行单元测试","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.sanity.io/","title":"","type":null},"content":[{"type":"text","text":"Sanity","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://strapi.io/","title":"","type":null},"content":[{"type":"text","text":"Strapi","attrs":{}}]},{"type":"text","text":"：Sanity和Strapi是 headless CMS，并使用GUI（可选工具）发布内容。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://vercel.com/","title":"","type":null},"content":[{"type":"text","text":"Vercel","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://www.netlify.com/","title":"","type":null},"content":[{"type":"text","text":"Netlify","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://aws.amazon.com/cn/","title":"","type":null},"content":[{"type":"text","text":"AWS","attrs":{}}]},{"type":"text","text":" ： CI/CD 提供商与 GitHub 相结合，可以在开发更改时轻松审查和驱动更新","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"移动端","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://reactnative.dev/","title":"","type":null},"content":[{"type":"text","text":"React Native","attrs":{}}]},{"type":"text","text":" / ","attrs":{}},{"type":"link","attrs":{"href":"https://redux.js.org/","title":"","type":null},"content":[{"type":"text","text":"Redux","attrs":{}}]},{"type":"text","text":" ：用于创建跨平台移动应用程序的 React Native 和用于状态管理的 Redux","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://flutter.dev/","title":"","type":null},"content":[{"type":"text","text":"Flutter/Dart","attrs":{}}]},{"type":"text","text":" ： Flutter 和 Dart 用于创建跨平台移动应用程序","attrs":{}}]}]}],"attrs":{}}]}