JavaScript 作為 Web 開發最熱門的程式語言，是ALPHA Camp (AC)全端開發JavaScript課程的學習主軸。AC 要如何用 23 周，將零基礎的人，培養成一個兼具前後端能力的全端工程師，這篇帶你從全端技能樹開始詳細解釋。（延伸閱讀：AC 如何打破線上課程通病，創造成效第一的學習體驗）
為什麼要學全端開發？
無論你想要成為前端、後端或全端工程師，能夠更宏觀、系統化的學習前後端專業知識與 Best Practice，可以幫助你無論在做前後端工作時，都能更全觀了解 Web 開發，也更有能力面對、溝通協調與解決網站前後端所面臨到的不同問題。
全端開發該學些什麼？
圍繞前後端開發的技術和工具那麼多，到底該學些什麼？ALPHA Camp 整理的「全端開發技能樹」是從業界廣傳的 Web Developer Roadmap 延伸而來，幫你更精簡整理學習 Javascript 全端開發時必要的技能，將這些必要的技術和工具學會，就能夠開啟你成為一個合格 JavaScript 全端工程師的路程。
全端開發該怎麼學？
ALPHA Camp的課程設計理念，呼應了全端技能樹，提供了最完整、有效且扎實的 23 週系統化學習路徑。
分為三大階段：程式設計入門、掌握網頁開發以及軟體工程師養成。不求速成（因為也沒有速成這回事）而是要讓學習者能夠精熟所學，完成 23 週培訓，成為能夠符合業界需求，且持續自我進化的全端工程師。
下面是我們 23 週養成攻略的詳細介紹，讓你了解每週該做些什麼，一步一步朝 JavaScript 全端工程師的目標前進。
1.程式設計入門
以 Web App 角度建立對網路開發的相關主題第一步的認識，瞭解運算思維（Computational Thinking）和網站開發基礎觀念與流程，學習 HTML/CSS/JavaScript 語言基礎，並體驗、培養開發的手感。掌握各主題下的開發環境、語言、實務工具以及重要的關鍵字。
延伸閱讀：網路應用程式是什麼？Web App 與 Native App 的差別
第 1 週：寫程式的起點
認識電腦與程式背後的設計邏輯與功用，並馬上開始使用第一個程式語言：JavaScript！嘗試撰寫一個簡單的應用程式。
第 2 週：資料設計與演算法
學習程式領域的兩大主題：資料與邏輯。透過實作與情境練習，瞭解程式設計背後所使用的資料結構與思考邏輯，並活用運算思維，來設計出符合使用習慣又能幫助解決問題的程式。
認識演算法 Algorithm 與運算思維 Computational Thinking
第 3 週：網站設計與介面實作
瞭解 HTML 與 CSS 的用途與重要性。透過基礎而實用的 HTML/CSS 語法教學，不僅掌握「架構一個靜態網站」的基本功，也將擁有完整的網路概念，理解 HTML/CSS/JavaScript 的互動關係。我們將手把手整合實作前幾週所學的工具，打造屬於你的個人網站。
最後我們會將回顧你過去三周所學，並以產業趨勢和職涯發展的角度，來討論網路開發和程式設計的能力如何能拓展生涯規劃。
零基礎也學得會，HTML/CSS/JavaScript 的程式設計入門課
2.掌握網頁開發
清楚理解 Web 開發貫穿學習路徑，深入 JavaScript 核心概念，掌握網頁前後端開發核心工具，進而能實作完整的前端體驗與後端功能。掌握網頁開發分為三個階段「JavaScript 前端開發」、「軟體開發實務入門」、「基礎網路概論」。第一階段著重在核心工具/技術上手；中間階段將以專案實作累積經驗，貫穿並整合學習到的東西。最後一階段的學習將從「寫程式」進入到「做產品」將使用 JavaScript + Node.js 打造一個兼具前、後端與資料庫的網路應用程式，並針對前、後端路徑延伸學習。
階段一：JavaScript 前端開發
第 4 週：認識開發環境與 JavaScript 核心觀念
一開始著重認識開發環境，之前我們運用 CodePen 或 Repl.it 等線上編輯器來完成練習，現在我們把開發環境移到自己的私人電腦，正式開啟你的網路開發者人生。
學習 JavaScript 核心觀念：延續程式入門時學過的 JavaScript，回顧變數、運算、流程控制等基礎操作重點之後，進一步認識深入一點的觀念，包括基本型別 (primitives) 與物件的差異，從資料結構的角度來看陣列與物件，JavaScript 裡的函式。接下來每一次的實作，都會引導你更加深入 JavaScript 函式的應用。
第 5 週：RWD 與 BootStrap
認識多屏幕時代的網頁設計原則，知道如何用 CSS 撰寫出能自動適應螢幕大小的 RWD「響應式網頁」。我們會開始攻略 Position 定位技巧解決不規則形狀的畫面、使用 Flexbox 佈局有彈性的多螢幕適用排版系統，並學習使用 Bootstrap 提供的現成元件快速組裝有模有樣的網站。
延伸閱讀：Bootstrap 5 來了，我該升級嗎？一起了解幾個核心改動
第 6 週：DOM 操作與事件處理
徹底了解 HTML / CSS / JavaScript 三方合作關係，透過 JavaScript 操作 DOM，打造具有豐富互動的網頁。DOM 操作與事件處理是前端的核心技術，內容包括：
- 瀏覽器渲染流程
- 使用 JavaScript 渲染瀏覽器裡的 HTML/CSS
- 事件處理：在使用者做了特定事情時，才驅動網頁的變化
第 7 週：資料結構設計與學習成果驗收
認識表格等資料結構，理解「資料」的格式化與儲存。幫助你能夠將生活裡的資訊，轉化成可被儲存的資料。
並在本週，驗收你包含專業知識與技術，和學習能力與行為的學習成果。包括 HTML/CSS/JavaScript，以及網路開發相關工具的應用與理解，這些知識與技術能引導你邁向更進階的專業主題，或者幫助你在日常生活中解決實際問題。
階段二：軟體開發實務入門
第 8 週：串接第三方 API
學會透過 AJAX 的技術來發送 HTTP 請求，搜集其他網站的 API 資訊，搭配 DOM 技術的應用，在網頁介面裡加入外部提供的資料。
到這裡，你已經完成核心工具的學習，接下來要邁向專案實作。
延伸閱讀：API是什麼？認識 Web API、HTTP 和 JSON 資料交換格式
第 9 週：前端綜合實作電影清單
從功能出發，開始應用所有手邊工具，鍛練解決問題的思維。
在前端體驗綜合實作，你將打造一個電影清單網站，包括瀏覽資料、搜尋電影、收藏電影等等。你需要運用邏輯思維拆解功能、設計流程、並且應用 DOM 技術。
第 10 週：自主實作 – 社群名單
在前幾週扎實的學習後，熟練如何串接 API、以及物件與函式的應用。現在，我們開始打造有真實資料的產品。透過實作演練，引導同學在學習過程中刻意練習。
延伸閱讀：刻意練習與分類架構：談「頂尖」VS「優秀」學習表現的關鍵差異
第 11 週：微型專案設計，程式碼模組化 – MVC 架構｜版本控制 Git & GitHub
微型專案設計：翻牌遊戲需要設計資料結構。我們將引入 MVC 架構來模組化程式碼，你將會大開眼界，並且重新認識 JavaScript 的物件與函式。
學習版本控制管理程式碼：Git & GitHub，你可以將你的專案作品發佈到 GitHub Page，開始建立個人作品集。
延伸閱讀：Git 與 GitHub 介紹，軟體版本控制基本教學
學習引導：開啟前、後端的交叉點
了解前後端的區分、逐步思考自己職涯的目標，並理解未來學習方向，最後聚焦下一步的學習路徑。藉由教學引導，感受前 / 後端工程師視野。
階段三：網路概念建立
透過學習引導，第 12 週開始準備進入「前後端分離」的學習，配合不同的學習節奏，安排了基礎網路概念建立，讓前端、後端的學生，對於網路概念有更扎實的認識。在基礎網路概念建立階段，將學習網路概論、Ｗeb App 架構與 Node.js、Express。
共有基礎：網路概論、Web App 架構與 Node.js、Express.js
從學習網路應用程式背後的技術和機制開始，你會認識電腦間如何互相通信 (HTTP，請求 – 響應) 到全端網路應用程式的的設計模式與概念 (包括 MVC 與 Route) 。另外，你會學習如何使用 Node.js 建立網路伺服器 (web server)、運用 VS Code 等開發工具。
在這個階段，你會打造一個具有不同路由 (也稱為網址) 以及搜索功能的網站。在作業中你將會舉一反三，開發一個功能類似的「餐廳清單」Restaurant List。
在階段 3 選擇後端路徑的學生，會完整體驗到搭配資料庫服務的 web app 開發；而選擇前端路徑的學生，則會深入 RWD，從小型單一網頁的切版，過渡到中型網站、多頁面的前端視覺開發。
延伸閱讀：Node.js 是什麼？跟 JavaScript 有什麼關係
3.成為軟體工程師
從這依照你的職涯目標，分為兩個專修路徑，全端工程師和前端工程師，除了技術內容，也包括軟體開發流程、專案管理等專業知識，更有模擬實際問題的團隊協作專案，學習工程師的工作模式與成功要訣。
全端工程師專修路徑
透過專案實作，學習軟體開發、資料設計、測試、版本控制等實務專業經驗，為成為全端網路工程師，做好準備。你會依照產品的需求去打造功能，user story 會更真實，複雜度大大提高。不開始動手做之前，不會知道只能用某種特定方法做，也不會預期到一些需要的設定，會有一些工具的限制。你需要「從功能出發去解決問題」。
第 13 週：資料庫 MongoDB，打造 To-Do List 專案
為接下來的專案做準備，把 MongoDB 與其他工具安裝好，並初步了解它的操作。打造To-Do List專案。本週會有指標性作業「餐廳清單擴充 CRUD 」，你會綜合運用過去所學，打造出一個具備完整 CRUD 的網路應用程式。
第 14 週：To-Do List 優化與網站部署 Heroku
將 To-Do List 優化後，學習「網站佈署」(deployment)，並透過 Heroku 平台服務來發佈你的 To-Do List，讓其他人也能使用你的產品。
第 15 週：階段驗收與實作
進入全端學習的第四週，我們準備了「短網址產生器」的實作練習，在這個階段檢視自己的學習成果，為進入下個階段的學習做更全面的評估與計畫。同時，也準備了選修的延伸挑戰，讓同學能在全端學習的階段不斷自我挑戰。
第 16 週：使用者認證系統與第三方工具
延續上週你做的 To-Do List，打造一個「使用者認證 (user authentication)」系統，讓使用者可以註冊、登入、並建立屬於自己的 To-do list。並嘗試重構程式碼來優化產品的品質與體驗。你會在 Express.js 專案裡整合 Bootstrap、Passport、Facebook API 等第三方工具，讓你的產品功能更完整。
第 17 週：Asynchronous JavaScript
討論 JavaScript 的非同步 (asynchronous) 本質，了解它的優勢與潛在問題。你會對過去撰寫的 JavaScript 程式碼產生更深入的理解，也會學到新的語法工具，例如可運用 Promise 物件來改善程式碼。
第 18 週：關聯式資料庫，SQL 語法、MySQL 專案實作
能有效的設計與操作資料庫是一個後端開發者的重要條件。你會深入了解「關聯式資料庫」的定義、設計、與應用。雖然在 Express.js 裡可以直接用較為方便的 ORM 來操作資料庫，但我們仍然會花些時間在 SQL 語法上，我們會運用 SQLZOO 的題庫來快速了解資料庫操作的語法結構。
我們會手把手帶你完成最後一個實作專案： 用 MySQL 重新打造 To-do List。本週會應用 Sequelize、MySQL Workbench 等工具，並且也會認識 ORM、Migration 等資料庫管理技術。
延伸閱讀：SQL/NoSQL是什麼？認識資料庫管理系統 DBMS
第 19-20 週：打造 Forum 餐廳論壇
在 Forum 餐廳論壇中，你會學到設計資料結構與網站功能實作。你會從 user stories 與設計稿出發，設計資料結構，並在專案中實作出包含使用者認證系統、前後台權限、CRUD 功能、收藏、追蹤、留言/評論等功能。
學會用 JavaScript ＋ Node.js打造兼具前後端的網路應用程式
前端工程師專修路徑
針對學習目標為「前端轉職」的學生，提供更深入的 HTML/CSS 教學與鍛鍊，包含建立清楚的 HTML 架構、透過大量實作 CSS 文件的處理方式來完成常見頁面，學習如何活用不同 CSS 方法，並能清楚說使用邏輯與 trade-off（包括對 RWD 的考量），學會使用 Sass 預處理器，與如何進一步尋找資料，能簡單使用 jQuery。
第 13 週：前端切版 RWD 實戰
在業界常用的切版技能練習，能夠看懂並操作前端工程師的常用技術，也了解在多螢幕時代，讓網頁元件適應不同尺寸的 RWD 設計原理。
第 14 週：切版特訓：毛小孩星球
在網頁切版的學習中，除了觀摩有經驗者的策略，個人親手實作、總結出自己的體悟更是重要的成長方式，因此我們準備了模擬業界規格的專案 -「毛小孩星球」在打造的過程中，交流工程師切版實務體驗，同時溫故知新，複習和學習更多 CSS 排版技術和屬性。
第 15 週：切版特訓：網紅廣告平台
進階的HTML和CSS學習，專案中我們將一起學習如何打造網紅廣告服務平台。而第一個步驟，就是先分析一下專案最終應該達成的結果：主題包含：前端效能考量，Class naming style，CSS Module、CSS Style、CSS Modularization、SS預處理器Sass。
第 16 週：切版實務鍛鍊
透過 5 個不同場景的版型，比如電商網站或 dashboard，並透過影片講解如何使用不同方法，從 0 開始完成切版。並學習使用不同工具的方法與考量，也會在專案中，挑選一個區塊，請學生用不同的方法完成，並說明實務上的影響。
第 17 週：前端框架 Vue.js
從認識 Vue.js 常見語法開始，打造一個 todolist 前端版。並透過前端框架將網頁元件拆解成 Vue component ，每個 component 擁有獨立的 HTML/CSS/ JavaScript
第 18 週：非同步處理．觀念入門
以最傳統的 callback 出發，介紹 JavaScript 同步處理的特性及其缺點，並介紹主流的 Promises 編寫方式，以及更進一步優化的 async/await 。本章節重點在於：理解傳統 callback 的運作機制與流程控制，並練習把 callback 改寫成 Promise。
第 19-20 週：SPA 專案實戰：餐廳論壇
接著學會用 Vue.js 打造一個 single page application：餐廳論壇。瞭解 Vue 元件架構，以及資料如何在不同的 component 之間傳遞，最後為餐廳論壇串接後端 API，完成一個前後分離專案。
延伸閱讀：現在的前端都在用 JavaScript「框架」？前端框架的功能與優點
第 21-22 週：團隊協作 Simple Twitter 網站與測試
實作社群網站 Twiiter ，讓使用者能創建帳號、編輯個人介紹與大頭貼、瀏覽動態牆、貼文、回文、追蹤點讚等互動的功能。在團隊協作中，從團隊專案中學習 Agile 開發精神以及 Scrum 架構，開發過程中以 Git 團隊協作管理程式碼，分工完成複雜的專案。你同時會學到測試驅動開發流程 (TDD)，閱讀測試文件理解規格，設法讓所有測試亮綠燈。並且在發送 pull request 後，啟動 CI 流程，在 GitHub 上觀察測試結果。
測試是專案開發中不可或缺的一環，是對你自己對自己的產出負責的表現。你在這個單元中會了解測試的目的、形式與工具與基本概念，並且能在專案進行基本的測試。同時會有專業講師指導示範的測試工作坊。
第 22 週：前後端分離與 Web API
「前後端分離」是一個實務的概念，為了具體瞭解這個概念，我們會分成幾個階段進行：
- 首先，你需要怎麼在 Express.js 站上架設 Web API，我們會為 Forum 專案開設獨立的 API Controller 並架設 API 伺服器。
- 接著我們用 Vue.js 另外做一個 Forum 純前端介面。在這個過程中你需要快速入門前端框架的架構以及 web component 的概念。在打造前端介面的同時，串接之前做好的 Web API，讓你的網頁動起來。
第 23 週：工程師要懂的產品設計，購物車與金流串接
在開發團隊拿到 user stories 和 wireframe 之前，到底這些需求是怎麼跑出來的？在這個章節裡，你會從一個實際的例子出發，觀摩產品設計的工具怎麼落實在具體的情境裡，也會藉由分組討論腦力激盪來深化學習。
網路應用開發最常見的主題之一，雖然千變萬變仍是 CRUD 與資料表關聯，但由於我們普遍對「電商網站」已有預設期待，因此「把商品放進購物車」、「結帳時才登入」、「在站內刷卡後直接看到訂票結果」這些功能背後有許多眉角。
23 週後不是結束，而是另一個開始
走完了 23 週 JavaScript 全端工程師的養成之路，你已經可以開始你的全端工程師職涯。但軟體工程師就是一個學無止盡的職業，技術和業界趨勢不停在變化，永遠不會有學完或學夠的一天。
ALPHA Camp 規劃的系統化養成之路，除了技術主題外，更要在過程中培養工程師的自學力、解決問題、團隊協作的能力，才能在長期的軟體職涯中，持續精進與職涯進階。
