Web Development 網站開發 - 從零開始如何學起 ?
寫這篇文章的時候，網站開發的生態圈已經是非常複雜。前端、後端、伺服器、Javascript、React、Angular、Vue、NodeJS... 太多專有名詞也太多標準，沒接觸過的人估計也不知如何下手對吧！
寫這篇文章的時候，網站開發的生態圈已經是非常複雜。前端、後端、伺服器、Javascript、React、Angular、Vue、NodeJS... 太多專有名詞也太多標準，沒接觸過的人估計也不知如何下手對吧！
跟十年前比起來，現在要做一個網站可以有百百種方式。如果你從沒接觸過網頁設計相關的東西，那我個人認為最好的方式還是從最基本十年前那套核心觀念出發，畢竟現在所有各式各樣的開發框架都還是脫離不了那套核心觀念。當然我們不是要學舊的開發方法，我們要學的是觀念。
網站核心觀念
說到這個核心觀念，主要有三個：HTML、Javascript、CSS。
HTML 負責的項目是規劃整個頁面的內容物：譬如說我想要我的頁面有選單、導覽、標題、內容、圖片、頁尾等等。
CSS 負責的是你內容的樣式：譬如說我的標題要什麼顏色、要多大？我的圖片要不要圓角？我的文字外面要不要邊框、要不要陰影等等。
Javascript 負責的是帶有邏輯性的東西：譬如說點了這個按鈕會發生什麼事？滑鼠滑到哪裡要發生什麼事？商品怎麼加到購物車？Facebook 按讚後的邏輯等等。基本上只有 Javascript 算是程式語言，HTML 與 CSS 相對之下並沒有太複雜的邏輯參與。
網站呈現的起點總是從 HTML 開始，你可以在 HTML 的文檔裡找到 CSS 或是 Javascript 的語法，或者是 HTML 這支檔案會另外再去要分開的 CSS/Javascript 檔案並且執行。
接下來的幾篇文章會介紹三者的一些基本用法。學寫網站有一個優勢，就是你寫了什麼都可以很容易看到它產出的視覺化結果，這成就感應該可以增加不少學習的樂趣！
前端 vs 後端
不管是接觸到網站或是 APP 開發，很多時候會聽到別人說前端與後端的，所以他們到底有什麼區別？
首先我們得了解一下一個頁面呈現在瀏覽器的過程：
- 我們在 Chrome 上輸入網址 https://thoth.tw 然後按下 Enter
- Chrome 透過了這個網址找到了某個伺服器，伺服器回傳給我們一支 HTML 檔案。HTML 說穿了只是支文字檔案，內容是用 HTML 的語法撰寫而成。
- Chrome 要到了 HTML 後，開始解析他的內容，最後把解析好的畫面顯示在頁面上。
以上的過程中我們注意到，因為瀏覽器是屬於用戶電腦的軟體，意味著這些程式碼（HTML、Javascript、CSS...）是在用戶的電腦裡被執行的。當程式碼是在用戶那被執行時，我們就稱它為前端（或是客戶端）。
沒錯，上述這三者都隸屬於前端的範疇，那後端又是什麼？
當你今天拜訪 Facebook 的頁面，首先我們需要登入，並且在登入過後我倆在同一個網址（https://facebook.com）卻看到了不同屬於各自的內容... 這是如何辦到的？
這裡來看一下拜訪 facebook 的過程：
- 我們在 Chrome 上輸入網址 https://facebook.com 然後按下 Enter。假如你在登入狀態，Chrome 在對 facebook 發起請求時，會順便帶上一些用戶登入相關的資料（cookie）
- Chrome 透過了這個網址找到了 facebook 的伺服器，它從 cookie 中驗證用戶的身份，從他們家的資料庫中拿取了用戶要的資料，然後回傳回去。
- Chrome 拿到了資料後解析顯示在頁面上
以上的過程中我們可以得知，伺服器裡有著另外一段程式碼用來處理驗證用戶身份以及去資料庫拿取資料等等邏輯。這些程式碼與前者不同，是在伺服器端裡被執行，所以我們稱它為後端。
如果你想要做的網頁不需要登入，譬如你只想做你自己的個人網站，或是某家餐廳想做一個餐廳品牌宣傳的網站，這些狀況你是可以不需要後端的。這種網站我們稱它為靜態網站。
百家爭鳴的時代
老話一句，現在的社會都是在巨人的肩膀上幹大事，我們都要秉持著不重複照輪子的精神。
不管是前端與後端，市場上已經存在了大量的框架給你選擇。要打造一個複雜的網站，使用框架絕對會比你自己重頭開始簡單且快速得多。當然在開始之前我們也需要對各個框架有著一定的認識，沒有最好，只有在某個 Moment 相對適合你。
前端框架
前端目前最主流的三大框架如下：
- React：由 Facebook 維護，社群非常活躍，開發上靈活性很高
- Angular：由 Google 團隊開發，有自己非常健全的一套方式，開發時必須遵守框架本身的規範，很適合大團隊做大專案使用，可以確保大家 coding style 的一致性
- Vue：由前 google 工程師尤雨溪開發，跟另外兩個框架比起來很容易上手
不管是用哪一套，充其量也只是上述介紹的核心觀念（HTML、Javascript、CSS）再加上框架本身自己的哲學，所以開始學框架之前，學好基礎才是關鍵。
後端框架
前端框架的主要語言還是以 Javascript 為主（先不提 Typescript），但後端的框架選擇就更為彈性了，你可以選擇不同的程式語言，並且每種語言都可以搭配不同的框架。以下列出一些具有代表性的後端框架：
語言 - 框架
Java - Spring Boot...
Python - Django, Flask...
Ruby - Ruby on Rails...
Javascript (Nodejs) - ExpressJS...
結論
現在的網站或平台越趨複雜，很多公司都會把職位拆成前端工程師 Frontend Engineer 以及後端工程師 Backend Engineer，確保分工更細能做的更專業。當然要打造一個成熟的產品還不止這些，健全的團隊會有專案管理 Project Manager、設計師 UI/UX Designer、前後端工程師、運維工程師 DevOps 等更多。
網站開發可以從很簡單到很複雜，新手可以先從前端開始熟悉，做出一些簡單好看的靜態網站，再逐漸發展更深入的技能！
接下來會以 CodeSandbox 這個平台教學前端，好看好用、提供各種開發環境、還可以省下我們在自己電腦架設環境的大把時間。
繼續閱讀：
Huaying Tsai
