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":{}}]}