這是一個史無前例的全技術棧學習專案，使用同一個應用（Todo List）實現 100+ 種不同技術方案。

• 📚 系統化學習 - 通過實際項目掌握各種技術棧，而非零散知識點
• 🔍 橫向對比 - 直觀比較不同框架的優劣，做出明智的技術選型
• 💼 作品集展示 - 證明你的全棧開發能力，提升求職競爭力
• 🚀 技能進化 - 從前端到移動端到桌面應用，成為真正的全平台開發者

Todo List 是最佳技術學習載體：

• ✅ 複雜度適中 - 簡單到能快速上手，複雜到能展示核心特性
• ✅ 功能完整 - 涵蓋 CRUD、狀態管理、數據持久化等核心概念
• ✅ 可擴展性 - 能展示路由、動畫、測試等進階特性
• ✅ 業界認可 - 各大框架官方文檔都使用的經典範例
• ✅ 易於比較 - 相同功能不同實現，對比學習效果最佳

• ✅ HTML/CSS/JavaScript - 最基礎的 Web 開發
• ✅ jQuery - 經典 DOM 操作庫
• ✅ TypeScript - 類型安全的 JavaScript
• ⏳ Web Components - 原生組件化方案

• ✅ React 18 - Meta 開發，最大生態系統
• ✅ Vue 3 - 漸進式框架，國內首選
• ✅ Angular 17+ - Google 企業級框架
• ✅ Svelte - 編譯時框架，性能卓越
• ✅ SolidJS - 細粒度響應式
• ✅ Preact - 輕量級 React 替代
• ⏳ Alpine.js、HTMX、Qwik、Lit 等

• ⏳ Next.js 14 - React 服務端渲染
• ⏳ Nuxt 3 - Vue 全棧框架
• ⏳ Remix - 現代 React 框架
• ⏳ SvelteKit - Svelte 元框架
• ⏳ Astro - 內容優先框架

• React 生態: Material-UI, Ant Design, Chakra UI, Mantine
• Vue 生態: Vuetify, Element Plus, Naive UI
• Angular Material
• ⏳ Tailwind CSS, Bootstrap 5, Bulma

• ✅ Redux Toolkit, MobX, Zustand (React)
• ✅ Pinia, Vuex (Vue)
• ✅ NgRx (Angular)
• ✅ XState - 狀態機
• ✅ Valtio, Jotai, Nanostores

• ✅ React Native - JavaScript 原生應用
• ⏳ Flutter - Dart 跨平台框架
• ✅ Ionic (React/Vue/Angular) - Web 技術開發移動應用
• ⏳ Capacitor, NativeScript, .NET MAUI, KMM

• ✅ iOS SwiftUI - 現代聲明式 UI
• ⏳ iOS UIKit - 經典 iOS 開發
• ⏳ Android Jetpack Compose - Kotlin 聲明式 UI
• ⏳ Android XML Views - 傳統 Android 開發

• ⏳ Electron (React/Vue/Svelte) - JavaScript 桌面應用
• ⏳ Tauri - Rust + Web，更輕量安全
• ⏳ Flutter Desktop - 跨平台 UI 框架
• ⏳ Qt, GTK, JavaFX

• ⏳ Windows: WPF, WinUI 3, WinForms
• ⏳ macOS: SwiftUI, AppKit
• ⏳ .NET MAUI - 跨平台 .NET 應用

• ⏳ Unity (C#) - 主流 3D 引擎
• ⏳ Godot (GDScript) - 開源遊戲引擎
• ⏳ Cocos (Creator/2d-x) - 2D 遊戲首選
• ⏳ Phaser 3, PixiJS, Three.js, Babylon.js

• ⏳ MERN (MongoDB + Express + React + Node)
• ⏳ MEAN (MongoDB + Express + Angular + Node)
• ⏳ Next.js + Prisma + PostgreSQL
• ⏳ Django/Flask + React (Python)
• ⏳ FastAPI + React, Spring Boot + React
• ⏳ Laravel + Vue, Go Gin + Vue

• ⏳ PWA (漸進式 Web 應用)
• ⏳ WebAssembly (Rust/Go)
• ⏳ Deno + Fresh, Bun + Elysia
• ⏳ Blockchain (Web3, Solidity)

總計：100+ 種實現方式 🎉

圖例: ✅ 已完成 | ⏳ 計劃中 | 🚧 進行中

TodoListDemo/
├── 📂 01-vanilla/                 # 原生開發 (無框架)
│   ├── 01-html-css-js/           ✅ 純 HTML/CSS/JavaScript
│   ├── 02-jquery/                ✅ jQuery 版本
│   ├── 03-typescript/            ✅ TypeScript 版本
│   └── 04-web-components/        ⏳ Web Components
│
├── 📂 03-modern-frameworks/       # 現代前端框架
│   ├── 01-react/                 ✅ React 18
│   ├── 04-vue3-typescript/       ✅ Vue 3 + TypeScript
│   ├── 05-angular/               ✅ Angular 17+
│   ├── 06-svelte/                ✅ Svelte 4
│   ├── 07-solidjs/               ✅ SolidJS
│   ├── 08-preact/                ✅ Preact
│   └── ...更多框架
│
├── 📂 04-metaframeworks/          # 元框架 (SSR/SSG)
│   ├── 01-nextjs/                ⏳ Next.js 14
│   ├── 02-nuxtjs/                ⏳ Nuxt 3
│   └── ...
│
├── 📂 06-mobile-crossplatform/    # 跨平台移動開發
│   ├── 08-ionic-react/           ✅ Ionic + React
│   ├── 09-ionic-vue/             ✅ Ionic + Vue
│   ├── 10-ionic-angular/         ✅ Ionic + Angular
│   └── ...
│
├── 📂 07-mobile-native/           # 原生移動開發
│   ├── 01-ios-swiftui/           ✅ iOS SwiftUI
│   └── ...
│
├── 📂 08-desktop/                 # 桌面應用
│   └── ...
│
├── 📂 14-state-management/        # 狀態管理專項
│   ├── 01-react-redux/           ✅ Redux Toolkit
│   ├── 03-react-zustand/         ✅ Zustand
│   ├── 07-vue-pinia/             ✅ Pinia
│   ├── 10-react-xstate/          ✅ XState
│   └── ...
│
└── 📂 docs/                       # 文檔
    ├── PROJECT_PLAN.md           📖 完整規劃
    ├── TECH_COMPARISON.md        🔍 技術對比
    ├── LEARNING_PATH.md          🎓 學習路線
    └── PROGRESS.md               📊 進度追蹤

完整結構請查看 PROJECT_PLAN.md

不同實現需要不同環境，這裡列出通用要求：

• Node.js 18+ (Web 前端開發)
• Git (版本控制)
• 代碼編輯器 (推薦 VS Code)
• 瀏覽器 (Chrome/Firefox/Safari)

# 最簡單的版本，無需安裝依賴
cd 01-vanilla/01-html-css-js
# 直接用瀏覽器打開 index.html
open index.html  # macOS

cd 03-modern-frameworks/01-react
npm install      # 安裝依賴
npm run dev      # 啟動開發伺服器
# 訪問 http://localhost:5173

cd 03-modern-frameworks/04-vue3-typescript
npm install
npm run dev
# 訪問 http://localhost:5173

cd 06-mobile-crossplatform/09-ionic-vue
npm install
npm run dev
# 或使用 Ionic CLI 預覽
ionic serve

每個實現都有自己的 README.md，包含：

• 🎯 技術特點
• 📦 依賴安裝
• 🚀 運行方法
• 📚 學習資源
• 🔍 技術亮點

# 查看某個實現的說明
cat 03-modern-frameworks/06-svelte/README.md

• 100+ 技術棧完整列表
• 詳細的目錄結構
• 實施階段規劃
• 優先級排序

• Web 前端框架詳細對比
• 移動端開發方案對比
• 桌面應用技術選型
• 遊戲引擎對比
• 全棧方案對比
• 選型建議

• 階段性學習計劃 (32 週)
• 不同背景的學習建議
• 每週詳細學習內容
• 里程碑檢查點
• 學習資源推薦
• 時間分配建議

每個實現都包含以下核心功能：

某些實現會包含以下進階功能：

• 🎨 深色模式 - 主題切換
• 🏷️ 標籤分類 - 任務分組管理
• ⭐ 優先級 - 設置任務重要程度
• 📅 到期日期 - 任務時間管理
• 🔔 提醒通知 - 任務提醒功能
• 🔎 搜尋過濾 - 快速查找任務
• 📤 匯出/匯入 - 數據導出導入
• 🌐 多語言 - i18n 國際化
• 🔐 用戶認證 - 登錄註冊（全棧版）
• ☁️ 雲端同步 - 多設備同步（全棧版）
• 🎭 動畫效果 - 流暢的 UI 動畫
• ♿ 無障礙支援 - ARIA 標籤，鍵盤操作
• 📱 響應式設計 - 適配各種螢幕尺寸

• ✅ 原生 HTML/CSS/JavaScript
• ✅ jQuery
• ✅ TypeScript
• ✅ React 18
• ✅ Vue 3 + TypeScript
• ✅ Angular 17+
• ✅ Svelte 4
• ✅ SolidJS
• ✅ Preact
• ✅ Ember.js

• ✅ Redux Toolkit
• ✅ MobX
• ✅ Zustand
• ✅ Jotai
• ✅ Valtio
• ✅ Pinia (Vue)
• ✅ Vuex (Vue)
• ✅ NgRx (Angular)
• ✅ XState
• ✅ Nanostores

• ✅ Ionic React
• ✅ Ionic Vue
• ✅ Ionic Angular
• ✅ iOS SwiftUI

• 🚧 文檔完善
• 🚧 測試覆蓋
• 🚧 性能優化

近期 (1-2 個月)

• Next.js 14
• Nuxt 3
• React Native
• Flutter
• Electron + React

中期 (3-6 個月)

• Unity 遊戲引擎
• Godot
• Tauri
• MERN Stack
• Android Jetpack Compose

長期 (6+ 個月)

• 完成所有 100+ 實現
• 性能基準測試
• 最佳實踐總結
• 視頻教程製作

更新時間: 2025-11-26

第一階段：Web 基礎 (4-6 週)

1. HTML/CSS/JavaScript 原生實現
2. TypeScript 基礎
3. 理解核心概念：DOM 操作、事件、狀態

第二階段：選擇主力框架 (6-8 週)

• 求職導向 → React + TypeScript + Redux
• 快速上手 → Vue 3 + TypeScript + Pinia
• 企業級 → Angular + TypeScript + NgRx

第三階段：元框架與全棧 (4-6 週)

• React 路線 → Next.js
• Vue 路線 → Nuxt 3
• 學習 SSR、API Routes、數據庫集成

第四階段：移動端開發 (4-6 週)

• React Native (如果學 React)
• Flutter (跨語言學習)

總時間：4-6 個月達到就業水平 🎉

擴展技術廣度 (靈活時間)

• 橫向學習其他框架（Svelte、SolidJS）
• 深入狀態管理（XState、Zustand）
• 探索新興技術（Qwik、Astro）

跨平台能力提升 (2-3 個月)

• 移動端：React Native / Flutter
• 桌面端：Electron / Tauri
• 遊戲：Unity / Godot

詳細學習路線請參考 LEARNING_PATH.md

我們歡迎任何形式的貢獻！無論你是：

• 🆕 剛開始學習的新手
• 💻 經驗豐富的開發者
• 📝 技術寫作愛好者
• 🐛 發現了 Bug
• 💡 有新的想法

# 1. Fork 本專案
# 2. 克隆到本地
git clone https://github.com/YOUR_USERNAME/TodoListDemo.git

# 3. 選擇一個技術棧
cd TodoListDemo
# 查看哪些還沒實現
cat PROJECT_PLAN.md

# 4. 創建新分支
git checkout -b feature/add-nextjs-implementation

# 5. 實現 Todo List
# 按照規範完成開發

# 6. 提交代碼
git add .
git commit -m "feat: add Next.js 14 implementation"
git push origin feature/add-nextjs-implementation

# 7. 發起 Pull Request

• 🐛 修復 Bug
• ⚡ 性能優化
• 🎨 UI/UX 改進
• ♿ 無障礙增強
• 📝 代碼註釋
• ✅ 添加測試

• 翻譯文檔（英文、日文等）
• 補充說明和示例
• 修正錯別字
• 添加教程和最佳實踐

每個實現都應包含：

framework-name/
├── README.md              # 說明文檔（必需）
├── package.json           # 依賴配置
├── src/                   # 源代碼
│   ├── components/        # 組件
│   ├── hooks/stores/      # 狀態管理
│   └── ...
├── public/                # 靜態資源
└── screenshots/           # 截圖（可選但推薦）

README.md 必須包含：

• ✅ 技術簡介和版本
• ✅ 核心特性說明
• ✅ 安裝步驟
• ✅ 運行命令
• ✅ 技術亮點
• ✅ 學習資源鏈接

我們會檢查：

• ✅ 代碼質量和可讀性
• ✅ 功能完整性
• ✅ 文檔完善度
• ✅ 遵循最佳實踐
• ✅ 無安全漏洞

• 💬 GitHub Discussions
• 🐛 提交 Issue
• 📧 Email: （如需添加）

感謝每一位貢獻者！ 🙏

Web 框架

• React - Facebook 開發的 UI 庫
• Vue - 漸進式 JavaScript 框架
• Angular - Google 企業級框架
• Svelte - 編譯時框架
• Next.js - React 元框架

移動端

• React Native - 跨平台移動開發
• Flutter - Google UI 框架
• Ionic - Web 技術移動開發

桌面端

• Electron - JavaScript 桌面應用
• Tauri - Rust + Web 桌面框架

• MDN Web Docs - Web 技術權威文檔
• freeCodeCamp - 免費編程學習
• Frontend Masters - 專業前端課程
• Udemy - 線上課程平台
• egghead.io - 短視頻教程

• VS Code - 推薦代碼編輯器
• GitHub Copilot - AI 編程助手
• Chrome DevTools - 瀏覽器開發工具

• Stack Overflow - 技術問答
• Reddit - r/webdev - Web 開發討論
• Dev.to - 開發者社群
• 掘金 - 中文技術社群

• Fireship - 快速技術概覽
• Traversy Media - 全棧教程
• Web Dev Simplified - 簡化教學
• The Net Ninja - 框架教程

本專案採用 MIT License 授權

MIT License

Copyright (c) 2025 ImL1s

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

你可以自由地：

• ✅ 商業使用
• ✅ 修改代碼
• ✅ 分發軟件
• ✅ 私人使用

唯一要求：保留原始授權聲明

• 所有開源框架和工具的開發者
• 為本專案做出貢獻的每一位開發者
• 提供反饋和建議的社群成員

• TodoMVC - 經典的框架對比項目
• RealWorld - 全棧示例應用
• 各框架官方文檔和教程

ImL1s

• GitHub: @ImL1s

• ✅ 完成 40+ 技術棧實現
• ✅ 新增 Ionic (React/Vue/Angular) 移動端實現
• ✅ 新增 iOS SwiftUI 原生實現
• ✅ 新增多個狀態管理方案 (XState, Valtio, Nanostores)
• ✅ 修復 jQuery 版本的 ID 碰撞和 race condition bug
• ✅ 更新主 README 文檔

• ✅ 完成專案規劃文檔
• ✅ 完成技術對比文檔
• ✅ 完成學習路線圖
• ✅ 創建專案結構

• ✅ 原生 HTML/CSS/JavaScript 實現