網頁新手入門：初探網頁架構和前後端語言

程式麻瓜的程式知識課（二）

誰適合讀這篇文章：
想要入門學程式語言，特別想要學網站但目前還沒有基礎的人。如果你是單純想要學程式語言，而沒有特定目的，可以先參考：

我想學程式，但到底該從哪個語言入門？

看完這篇文章你會：
用簡單的門外漢詞彙了解網站大概如何運作，前端後端各是什麼碗糕，以及可以從什麼語言開始學。

在了解哪種語言需要先學之前，我們要先對網站的基本架構有些認識。網站開發的世界浩瀚無垠，先釐清自己想要學做的網站會應用到哪些部分，才能知道該從哪一個語言開始先下手。

網站的基本架構

關於學習寫網站，我們最常聽到大家會說的就是什麼前端語言、後端語言。因此，要了解網站的基本架構，就讓我們先從前端後端下手吧！

前後端是什麼碗糕？

網頁前端 / 後端 就像 餐廳點餐 / 出餐

我們可以很直觀地從字面上了解，前端 (Front-end) 是網頁本身的前台，像點餐櫃檯一樣直接面對使用者對網站的動作。而後端 (Back-end) 則是網頁的後台，接收前端的要求並提供相對應的資料，就像廚房一樣，接受點餐櫃檯傳來的客戶需求，提供相對應的餐點。

因此，網頁前端跟後端的關係，其實就像是餐廳點餐跟出餐一樣。前者接受使用者的指令並呈現網頁內容，後者則處理使用者的指令並提供內容。（這個點餐與出餐的關係，推薦也可以看這篇《買早餐也能了解前端 vs 後端？》解釋的很清楚。）

舉一個實際的例子，就像你現在所讀 Medium 頁面上的留言制度，如果你在這篇文章底下留言，你留的內容就會從前端被丟給後端做管理，後端語言會把你是誰、什麼時間留的、留的內容管理好，等下次重新載入網頁時，把這些資訊再送給前端呈現。

看到這邊，想必我們對前端後端已經有一個清楚的概念了。但如果我們回想一下以前瀏覽網頁的經驗，我們所瀏覽過的網站中是不是有些其實根本沒有提供使用者跟網頁互動的功能呢？事實上，那些沒有提供互動的網站，我們通常會稱呼為靜態網站 (static web pages)。而這篇文章主要介紹的，則都會是屬於有提供相關功能的動態網站 (dynamic web pages)。

接下來，了解完了網頁基本的前後端，讓我們先進一步了解前端有什麼語言是需要我們學的吧。

前端語言

前端語言三本柱

如果你想要自已動手寫一個簡單的網站介面（例如：自己的履歷網站），需要先學會的技能是 HTML，再來是 CSS。如果要在靜態網站上加點動畫或互動功能，才會需要用到 JavaScript (JS)。而寫前端網頁會主要用到的這三個工具，有些人會稱之為「前端三本柱」。

HTML 正確來說是「標籤語言 (Markup Language)」，是用來描述網站的架構、資訊。而 CSS 則是一種「樣式表 (StyleSheet)」，用來控制網站顯示的樣式，包含字型、顏色、背景等等。粗淺簡單的理解可以先把 HTML 想成網站的骨架、CSS 則是網站的整體外型（身高體重、皮膚顏色等）。

學會 HTML 與 CSS 後，就可以做出一個簡單的網站，甚至可以用 CSS 加上一些簡單的動畫以及與滑鼠動作的反應。但當我們要更深入做一個動態網站，處理網頁上所有可能的動作、或是做出更細節的動畫時，我們就需要 JavaScript 登場。（關於 CSS 和 JavaScript 實作的動畫詳細比較，你可以參考這篇文章）

嚴格來說，JavaScript 才是寫網頁需要的第一個程式語言。JS 可以用來處理網站上需要邏輯判斷的功能，像是隨著使用者的行為動態載入網頁的不同內容。簡單來說，像現在你在閱讀的這個頁面，反白文字會出現回應，按旁邊的 clap 數字就會 +1，這些就是需要 JS 的地方了。在下面，我們來詳細一點的認識 JavaScript。

JavaScript

JavaScript 是一個用途很廣泛的程式語言，從網頁、伺服器、遊戲、甚至是 VR 上都可以看到他的應用。但普遍來說，最多人使用 JavaScript 的地方還是在網頁端。在一開始學網頁端時，常見的實務作法會搭配一個強大的函式庫 JQuery 學習。粗略來說，JQuery 是一個讓 JavaScript 語法可以與網頁中 HTML & CSS 連結的工具。

舉一個最簡單的例子，假如今天網頁上有一個按鈕叫做 .buybutton，按鈕上有「尚未購買」四個字。我想要透過 JavaScript 讓使用者在點擊 .buybutton 的時候，把「尚未購買」四個字變成「已經購買」，這段過程在程式碼就會長成：

$(“.buybutton”).click(
 function(){
 $(this).text(“已經購買”);
 }
)

在上面這段程式碼中，JQuery 幫助我們可以用一個簡單的 $ 符號去告訴網頁說我想要針對這顆按鈕 (.buybutton) 做程式判斷，讓使用者在點擊 (click) 它的時候就啟動一個動作 (function)，把被點擊的這顆按鈕 (this) 上面的文字 (text) 變成已經購買。

同樣這種幫助 JavaScript 在網頁操控上如魚得水的好用工具還有很多，例如 三大框架 Angular.js、Vue.js、React.js 等等，這些工具大幅簡化了寫網頁的複雜度，也讓更多人願意投入寫 JavaScript 的行列。而越多人投入寫 JavaScript，就也促使越多人設計優化出更多好用的工具。這個良性循環也奠定了 JavaScript 在網頁端學習以及應用的優勢。

基本上，了解了 HTML / CSS / JS 後，我們就能對前端就有一個完整而基本的認識。緊接著，讓我們來認識有什麼後端語言吧。

後端語言

後端語言百百種

Source: https://commons.wikimedia.org/wiki/File:Heroku_suporte.png

不像前端語言只有 JS 一種，後端語言在選擇上可說是百家爭鳴、百花齊放。常見的有老牌的 PHP、Java，最近十分熱門的 Python、Ruby，來勢洶洶的 Node.js、Go 等等。

而事實上，每個後端語言都有不一樣的特性，也都有各自的擁護者。哪一個語言最適合做為後端語言的入門一直都是沒有定論的問題。但為了讓我們可以對各語言有一個很簡單的概念，以下整理了各語言較常被提及的特色、在開發上比較被人詬病的點，以及有什麼樣的網站是透過該語言開發的：

PHP

1. 使用者多，算是最普及的後端語言
2. 簡單易學，但因一些古老的設計飽受批評
3. 網站範例：Facebook、Wordpress

Java

1. 老牌語言，國內外工作需求穩定，應用層面廣
2. 開發相較起來較慢，沒那麼適合新手
3. 網站範例：Linkedin、Amazon

Ruby

1. 開發快速，國內外很多 bootcamp 都以此語言教後端
2. 適不適合新手學飽受爭議，爭議的部分可以參考這篇
3. 網站範例：Airbnb、Twitter

Python

1. 語法簡單易學，數據分析與資料探勘相關應用多
2. 單獨使用 Python 相較起來運行性能較差
3. 網站範例：Instagram、Reddit

JavaScript (Node.js)

1. 前端後端都可用 JS，高併發的情況執行效率極高
2. 不適合 CPU 密集的應用
3. 網站範例：Yahoo、Walmart

Go

1. Google 力推，有很完善的標準庫，效能佳
2. 目前學習資源較少
3. 網站範例：Google、Youtube

如同上面所說的，每個後端語言都有各自的擁護者，每個人對於後端語言的評價也並不相同，而事實上每個大型網站也很難只用同一個語言撰寫，所以如果想了解更多的話，下面附了一些參考資料，可以多方參考。

參考資料：
1.
https://www.quora.com/Which-backend-programming-language-should-I-learn-in-2017
2.
https://en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites
3.
http://bbs.tianya.cn/post-414-62929-1.shtml
4.
https://www.quora.com/What-web-development-language-should-I-learn-in-2017
5.
https://usersnap.com/blog/programming-languages-2017/
6.
http://githut.info/
7.
https://www.quora.com/Which-is-preferred-for-a-heavy-user-based-web-app-Go-Node-Scala-or-Python

對於各個後端語言有一個簡單認識後，接下來讓我們一個 Ruby 為例子，深入一點點了解後端語言。

Ruby

做為一個處理後端的語言，Ruby 的設計哲學是：「減少工程師在寫程式不必要花的時間，設計必須強調人性化，而不是一味從機器的角度設想。」遵循這個理念，Ruby 的使用通常很直觀，按照人認為它應該執行的方式執行。用一個讀取分數判斷有沒有及格的程式為例，簡單的條件判斷與印出大概像這樣：

puts "明年再來" if score < 60

一個簡單算一句話裡有幾個字母的程式像這樣：

"Ruby is red".length

而說到 Ruby，就不得不提它的好兄弟 Rails 了。Rails 是一種「網頁開發的框架」，運用 Ruby 撰寫，因此通常大家會直接用 Ruby on Rails (RoR) 來稱呼。

那什麼又是網頁開發框架呢？網頁開發框架通常像是整理好的一堆資料夾與一些預先為網頁開發寫好的小工具們，你只需要把一些 Code 在框架中補齊，就可以簡單快速的做出網站後端需要的基本功能。

用前述的點餐出餐的比喻來解釋，Ruby 是後端語言，負責後台的出餐，則 Rails 就像是一台自動料理機，讓你不需要將食物從頭處理到尾，只需要負責簡單的調味、供應食材、設定要煮幾分鐘等等。

作為一個輔助後端語言 Ruby 的框架，Rails 的兩個主要的設計哲學是：1) 不做重複的事，2)慣例優於設定，就像 Ruby 希望減少工程師在瑣碎事情上所花的時間，Rails 則透過框架設計，讓重複的事情可以自動完成。

註 1：
後端語言以及框架的選擇有非常多種，也各有其擁護者。包括 PHP+laravel、Python+Django、Node.js+Express 等等。
註 2：
用 Ruby on Rails 可以快速地做出一個網站，但就像它的設計哲學所說：慣例優於設定。如果在邊學的過程中沒有邊了解為何這些慣例是現在這樣做的話，只學了上層而不了解底層，基礎不穩的後果可能讓之後要修改或維護網站變得極端困難。

看到這邊，想必我們對前後端的架構以及語言都有一個大致清楚的概念了。最後，如果你已經準備好要學前後端了，就來看看大多數人在這個領域的學習順序吧。

前端與後端的參考學習順序

大致來說，學習寫網頁的路徑前端與後端不太一樣，雖然都是要先從 HTML 開始，但之後路徑就完全不同。

前端：

HTML → CSS → JavaScript

精選閱讀：JavaScript 學習資源與新手建議

我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理 | The Will Will Web

後端：

HTML → (CSS) → 後端語言 → 資料庫管理

精選閱讀：Ruby 和 Rails 學習資源整理

cwchentw/ruby-resources

在這篇文章中，我們了解了網站大致的架構，包括前端跟後端的差別，HTML & CSS 又各自扮演什麼樣的角色，也各認識了前端與後端的一種程式語言。

在接下來的文章中，我們要來簡單地認識如何入門寫一個 App，App 的實際架構是什麼，又有什麼樣的程式語言或框架可以使用呢？

學習資源

如果你已經確定要開始學習程式語言，省去 Google 的時間，先看看整理好的學習資源整理吧！

七個程式學習資源介紹，找出最適合你的入門課程 — 胡程維｜Hu.C.W — Medium

【AppWorks School Batch #12 限時招生中】

AppWorks School 將開設 Android、iOS、Front-End 與 Backend Class 四個不同技能的訓練班次，全程免費，透過線上學習 4 週，駐點集訓 16 週的專案導向訓練，幫助你成為軟體工程師。

歡迎想成為軟體工程師的朋友，把握機會申請，報名到 7/22 23:59 截止喔！～https://bit.ly/2BUQmvn

嗨，我是程維，目前在美國 Google 擔任軟體工程師。如果你對入門機器學習、深度學習、人工智慧和大語言模型有興趣，我目前在準備一系列入門的文章。歡迎在這個網頁表單輸入你的電子信箱，我會在寫好的第一時間將文章寄送給你。