CH19 · 前端生態系（社群・套件・學習資源） 詳細 ROADMAP
計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
前端的半衰期比多數領域短。不跟社群保持連結，3 年就會跟不上。本章建立「如何高效保持對前端生態的敏銳度」：套件管理、必知套件、學習資源、社群參與、會議 / Newsletter / YouTube / 必讀書。讓讀者有一套自己的資訊輸入系統，不是被演算法餵。
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | 前端生態系是什麼 | 01-what-is-frontend-ecosystem | 🌱 | npm 套件圈、社群、會議、Newsletter、開源專案、怎麼組成「前端世界」 |
| 02 | 為什麼前端半衰期特別短 | 02-frontend-half-life | 🌱 | 工具汰換快、瀏覽器能力更新、AI 重塑、前端工程師為什麼一定要「終身學習」 |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 03 | 為什麼要定期接觸社群（我寫好自己的 code 不就好了） | 03-why-community-matters | 🌱 | 盲點偵測、早期看到趨勢、解決問題的捷徑、職涯機會、避免閉門造車 |
| 04 | 為什麼訂 Newsletter 比滑 Twitter 有效率 | 04-why-newsletter-over-twitter | 🌱 | 訊號比雜訊重要、編輯整理過的內容、避免演算法演算法、每週固定 vs 每日干擾 |
| 05 | 為什麼要選擇性裝 npm 套件（reinvent the wheel 不對吧） | 05-why-selective-package | 🌱 | node_modules 肥、依賴風險（供應鏈）、left-pad 事件、重要的 core utility 值得自己寫一次、現代 Web API 已補很多原來需要 npm 套件的能力 |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 06 | 前端社群演進 | 06-frontend-community-evolution | 🌱 | jQuery / IRC 時代 → Stack Overflow 黃金期 → Twitter / Hacker News → Reddit → Bluesky / Mastodon / Discord 分散時代 |
| 07 | Newsletter 黃金年代 | 07-newsletter-evolution | 🌱 | 早期 mailing list → Smashing Magazine / CSS-Tricks → 現代 JavaScript Weekly / Frontend Focus / Bytes 等 |
| 08 | 前端 Conference 演進 | 08-conference-evolution | 🌱 | JSConf / CSSConf 興起 → React Conf / Vue.js Nation 框架專屬 → 線上 + 實體混合（2020+）→ Talk recording on YouTube |
| 09 | 套件管理演進 | 09-package-manager-evolution | 🌱 | npm → Yarn Classic（解決 npm 問題）→ npm 5+ 追上 → pnpm（hard link 節省空間）→ Bun（Rust-based 速度）→ 2026 現況 |
🧠 知識型
套件管理深入
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 10 | npm / yarn / pnpm / bun 選型 | 10-package-manager-selection | 🌱 | 速度、磁碟用量、lockfile 格式、workspace 支援、prepublish hooks、實戰 tradeoff |
| 11 | Lockfile 深入 | 11-lockfile-deep | 🌱 | package-lock.json vs yarn.lock vs pnpm-lock.yaml、為什麼 lockfile 是安全防線、怎麼讀 lockfile diff |
| 12 | semver 實務 | 12-semver-practice | 🌱 | ^ / ~ / * 差異、major version 為什麼該鎖、renovate / dependabot 自動升級策略 |
| 13 | Monorepo Workspace 工具 | 13-monorepo-workspaces | 🌱 | pnpm workspaces / Yarn Berry / Turborepo / Nx / Bun workspaces 比較 |
套件生態
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 14 | 前端必知套件分類 | 14-essential-packages | 🌱 | Utility（lodash-es / radash / ramda）、日期（date-fns / dayjs）、不可變（immer）、ID（nanoid / uuid）、表單（react-hook-form / zod）、資料抓取（TanStack Query / SWR）、動畫（framer-motion / GSAP） |
| 15 | 「原生可以了」的套件汰換 | 15-native-vs-legacy-packages | 🌱 | structuredClone 取代 lodash cloneDeep、Array.prototype.toSorted 取代 lodash sortBy、fetch 取代 axios（有時）、native 可以做到什麼程度 |
| 16 | 被棄用 / 不該用的套件 | 16-deprecated-packages | 🌱 | moment.js（棄用但存在）、request、lodash 完整版（應該 tree-shake）、被 security issue 困擾的套件、要換掉的信號 |
| 17 | 低調但強大的套件 | 17-underrated-packages | 🌱 | 值得知道但人氣不高的神器：ts-reset / tiny-invariant / clsx / type-fest / deepmerge / ofetch / valibot |
學習資源
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 18 | 前端必訂 Newsletter | 18-frontend-newsletters | 🌱 | JavaScript Weekly / Frontend Focus / Bytes / This Week in React / TypeScript Weekly / CSS Weekly、每個風格差異 |
| 19 | YouTube 頻道推薦 | 19-youtube-channels | 🌱 | Theo / Primeagen / Fireship / Josh Comeau / Wes Bos / Ben Awad / Kent C. Dodds、哪個適合什麼階段 |
| 20 | 必讀 Blog | 20-essential-blogs | 🌱 | web.dev / CSS-Tricks / Smashing Magazine / Josh Comeau / Kent C. Dodds / dan.dev / overreacted.io / Ahmad Shadeed |
| 21 | 必讀書單 | 21-essential-books | 🌱 | You Don’t Know JS、Eloquent JavaScript、JavaScript: The Good Parts（還值得嗎）、Refactoring UI（設計）、Designing Data-Intensive Applications（架構） |
| 22 | 必看 Conference Talks | 22-must-watch-talks | 🌱 | What the… JavaScript? / Flux Talk / React Conf 近年、Rich Harris 的 Svelte talks、Dan Abramov 系列、Jake Archibald 的 Event Loop |
| 23 | 值得追的 GitHub Repos | 23-github-repos-to-follow | 🌱 | React / Vue / Svelte / TypeScript / tc39 proposals、看討論比看 code 更學到東西 |
Conference
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 24 | 國際前端 Conference 地圖 | 24-international-conferences | 🌱 | JSConf / CSSConf / React Conf / Vue.js Nation / SvelteKonf / RenderATL、各自特色、該去哪個 |
| 25 | 台灣前端社群 / Conference | 25-taiwan-frontend | 🌱 | MOPCON / COSCUP / CSSGG 小聚 / React Meetup、中文社群價值 |
| 26 | 參加實體 vs 看線上 ROI | 26-conf-in-person-vs-online | 🌱 | 實體的 hallway track 價值、線上筆記可以倒帶、組合策略 |
社群參與
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 27 | 第一個 Open Source Contribution | 27-first-oss-contribution | 🌱 | 從 typo fix 開始、找 good-first-issue、PR 禮儀、被 merge 的成就感 |
| 28 | Stack Overflow / GitHub Discussions / Discord | 28-q-and-a-platforms | 🌱 | SO 的黃金時代 vs 現在、GitHub Discussion 興起、Discord 即時社群、Reddit r/reactjs 等 |
| 29 | 寫 Blog / 演講的起點 | 29-blog-and-speaking | 🌱 | 從技術筆記到 blog、pitch 演講 proposal、靜態網站 vs 平台（dev.to / Medium / Hashnode） |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 30 | 建立自己的資訊輸入系統 | 30-build-info-pipeline | 🌱 | RSS reader（Feedly / Reeder）、Newsletter 收件規劃、每週 2 小時消化節奏、wheels-wheels-wheels RSS 的 revival |
| 31 | 第一個 OSS PR 全流程 | 31-first-oss-pr-flow | 🌱 | Fork → clone → branch → commit → PR → respond to review、真實案例走一次 |
| 32 | 用 GitHub Trending / Star 整理學習清單 | 32-github-trending-strategy | 🌱 | Weekly trending 看什麼、star 當 bookmark 的方法、too many stars 的反效果 |
| 33 | 看 Conference Talk 的筆記法 | 33-conf-talk-note-taking | 🌱 | YouTube 倍速策略、暫停做 note 的時機、哪些 talk 值得看兩次 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 34 | 前端生態系 Anti-patterns | 34-ecosystem-anti-patterns | 🌱 | 資訊爆炸焦慮（FOMO everything new）、只看 Twitter 當資訊來源、追工具不追原理、每個新工具都裝進 production、從來不貢獻 OSS 只消費、不讀 lockfile 直接 update、CV 上寫從來沒用過的技術 |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 35 | 生態系相關工具 | 35-ecosystem-tooling | 🌱 | npm / pnpm / bun；Renovate / Dependabot；Socket / Snyk（供應鏈安全）；bundlephobia / pkg-size（套件大小）；npms.io（套件評分）；GitHub Stars / Stars History |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | 自建 npm Registry | s01-self-hosted-registry | 🌱 | Verdaccio / Nexus / GitHub Packages，什麼規模值得自建 |
| S02 | Sponsorship 與 OSS 永續 | s02-oss-sustainability | 🌱 | GitHub Sponsors / Open Collective、個人 / 公司該怎麼贊助、OSS maintainer burnout 議題 |
| S03 | 前端中文圈獨特資源 | s03-chinese-frontend-resources | 🌱 | 鐵人賽 / iThome / Medium 中文好文、為什麼追英文資源仍是主流 |
章節進度統計
- 知識主題：35 + 3 補充 = 38 項
- 🌿 growing：0
- 🌱 seed：38
跨系列連結
- →
frontend/application/ CH8 F12（Package 發布、Monorepo）
- →
frontend/security/ CH11（供應鏈安全）
- →
frontend/career/ CH18（個人品牌、Blog、Conference）
- →
frontend/ai-assisted/ CH17（Newsletter / Blog 的 AI 時代變化）
- →
curation/ 系列（可能會整理成策展地圖）