內容目錄

「軟體正在吞噬這個世界 (Software is eating the world)。」這句話出於 Marc Andreessen 之口。Marc 曾創辦 Andreessen Horowitz，是美國最強大的風險投資公司之一；他也創造了世界上第一個瀏覽器 Netscape，因而被稱為瀏覽器之父。總而言之，這個人參與了今日網路的創造過程。

首先，「軟體」是一個全面概括的術語，在你電腦裡的東西不是硬體就是軟體。 當我們把電腦拆開後，肉眼看得到的硬碟、主機版、光碟機等實體物件，都是「硬體」；而我們無法看到實體的、由ㄧ連串的程式碼組成的，就是「軟體」。

軟體由程式語言撰寫而成，也透過程式語言和電腦對話，因此可以指示電腦去執行特定的事情。從這個定義來看，所有的應用程式都是軟體，但軟體不一定是應用程式，例如，負責管理電腦系統中各個硬體之間的協調工作，我們常提到的「作業系統」(Operating Systems) 就是軟體的一種，如 Windows, Mac OS、Linux。這些作業系統屬於軟體，但不是應用程式。

我們先談談什麼是「應用程式」，應用程式是原文是 application，也簡稱 App。「應用程式」因為明確的任務而存在，讓終端使用者可以執行特定任務的軟體。

在物聯網時代，從智能家電到街頭各種觸控機器，從 Gogoro 到感測天氣的別針，應用程式早就是像空氣一樣的存在。如果想追蹤這方面的話題，TechOrange 或 INSIDE 等媒體會提供很多這方面的資訊。

讓我們來看看一些超級常見的應用程式：

這些應用程式幫助你完成以下任務：

為了方便終端使用者來使用，大部分的應用程式都會提供圖形操作介面（GUI, Graphical User Interface）。

作業系統也是一種軟體，但他不是應用程式。而你的電腦上有許多程式在作業系統背景裡執行，但由於這些程式無法被終端使用者觸及，他們也不是應用程式。

應用程式的執行依賴於作業系統，因此，要在不同作業系統上執行相同任務，必須使用不同的應用程式（所以你常看到應用程式分成 Mac 版或 Windows 版）。

打造自己的 Web App，3 分鐘小測驗，找到你的學習起點

至於我們常講的「程式」(program) 也是一種泛稱，泛指用程式碼寫出的指令，告訴電腦去執行特定的事情。從廣義的角度，不管是 software 或 application 都屬於 program 的範疇。另一方面，如果你用 JavaScript 寫了一段指令（例如，跑一個迴圈列出 1 到 10），這段指令可以被稱為「程式」，但絕非「應用程式」或「軟體」。

值得想想的是，「學寫程式」究竟是指想要學習「程式的語法」，還是「想要打造程式的功能」呢？雖然對初學者而言，「程式的語法」常常形成門檻，但這是和電腦溝通的手段，而非目的本身，能夠開發應用程式、幫助別人解決特定問題，才是更值得設定的學習目標！

應用程式到底是在哪裡運行的呢？

有些應用程式在「本地」(locally) 執行，也就是說它們會安裝到你的電腦上，這種稱為原生應用程式 (native applications)。

在以前，應用程式會存在軟式磁碟片 (floppy disc) 裡。

一開始，講到應用程式，多半只會聯想到電腦上安裝的各種軟體，例如：

上述這些「原生應用程式」安裝在你的設備上，在設備提供的作業系統裡執行，所以像 Windows 或 MAC 的作業系統差異，就會導致兩種使用者族群偏好的應用程式大相逕庭。在手機裡的 Line app 也是類似的道理，你會注意到在下載這些程式時，都會分成不同作業系統的版本。

能夠直接在網路上執行的軟體被稱為「網路應用程式」(Web application)。

‍

桌機版的 Outlook 軟體 v.s. 瀏覽器裡的 Gmail

Web application 讓程式碼不再受到硬體與作業系統的限制，只要打開瀏覽器，連結上網，就可以開始使用。

也因為 Web application 直接運行在網路上，你的一舉一動隨時與雲端資料庫互動，因此可以做到一種彷彿和「全世界即時同步」的感覺，例如：

網路應用程式是怎麼運作的？以下用一個簡單的登入流程來說明：

你在手機螢幕裡看到的畫面，被稱為「前端」(front-end)，是直接和用戶互動的部分。一旦你輸入了 email 和密碼，按下藍色的按鈕，以下的過程就會發生：

1.應用程式獲得登入用的 email 和密碼，將其送進伺服器 (server)，應用程式的程式碼儲存在 server 裡，我們稱之為「後端」(backend)。

2.透過後端的程式碼操作，程式會進入資料庫 (database) 並搜尋匹配的登入 email，然後進行以下流程：

3.如果在資料庫裡找到了匹配的 email 且密碼也正確，後端就會執行「登入成功」 的邏輯，然後將資料回傳給前端。

4.不管是登入成功或失敗，都會有一包結果和資料回傳給前端，並顯示在瀏覽器上。

在這個示例中，尋找 email 並比對密碼的那個部分，在應用程式的架構中被稱為「後端」(backend)。

請注意，在剛才的例子中，僅僅只是回傳「登入失敗」會帶來很糟的使用者體驗 (user experience)，因為使用者根本不知道登入失敗的原因是什麼—是因為他還沒註冊嗎？還是密碼打錯字？

下方的圖片呈現了應用程式的架構：

當我們談「前端」時，我們指的是那些看得見、能夠互動的介面，「前端」又分成兩個範疇—「網頁設計」與「前端開發」。

基於專業分工，「網頁設計」會交給設計師來製作，設計師著重美感與風格，設計師可能會運用製圖工具去繪製一張張的平面設計稿，如果是具備 UI/UX 技能的設計師，可能會做出呈現互動性的 Wireframe 工具。

接著，「前端工程師」運用 HTML、CSS 和 JavaScript （或是更複雜的現代 JavaScript 框架如 React.js）把網頁設計實作出來，包含文字內容、表單、按鈕、下拉式清單等元素。

這些具結構性的網頁元素將變成容器，可以存放來自後端的動態內容⋯⋯

「後端」通常分成三個領域—伺服器、應用程式、資料庫。三個領域不一定是三個角色，視專案的規模而定。

「後端工程師」負責透過程式語言來實現應用程式的商務邏輯—例如臉書塗鴉牆到底要呈現哪些內容、你被什麼廣告打到、按朋友讚之後會影響到什麼參數，這些都是商務邏輯。每當訊息從瀏覽器進來，後端的應用程式就進行邏輯分析，並根據分析後的指令去和資料庫互動，再把互動後的結果回應到前端介面去，成為使用者在瀏覽器裡看到的結果。

前端、後端、全端工程師 必備技能與就業門檻比一比

資料庫是一個極為通俗的名詞。對一般人來說，可以解釋為一群資料的集合。

資料庫也是資料永久儲存的地方，使用者的帳戶資訊、活動記錄、購物記錄、商品價格、部落格文章內容、使用者遊戲破關進度等等都屬於網站的資料，你可以把他想像成巨大的 Excel 工作表。

對後端開發而言，資料庫設計與應用程式實作必須一併考量，如果資料庫設計不當，再優秀的程式能力也愛莫能助。在課程的中後期，當你熟悉基本的指令操作後，我們會學習先做資料庫設計，再寫程式。

至於伺服器的維護是一門獨立專業，在具規模的公司可能會設置獨立的網管，真的自己開一台機器來管理，不過 Startup 通常利用雲端服務，不會真正去管機器。

伺服器的機器性能、資料庫架構、和程式碼的品質都會影響到效能，效能又影響到使用者的體驗。

API 也屬於後端的權責，API 是 Application Programming Interface 的縮寫，這是一個很廣義的稱呼，根據上圖的情境，主要是指行動裝置與資料庫互動的介面，後端工程師撰寫 Web API 讓各種裝置的開發者，都能透過這個介面來讀取資料庫，因此，不同裝置的使用者，都能同步到最即時更新的資料內容。

最完整的JavaScript課程，從前端學到後端掌握網頁開發技能

既然前端 (front-end) 和後端 (back-end) 在應用程式裡扮演不同的角色，因此前端開發和後端開發會累積的技能也不盡相同。

前端開發者的目標是建立一個流暢的、友善的使用者介面，因此他們更重視視覺化。例如，用 CSS 和 jQuery 建立像下圖這樣的視覺效果。

後端開發人員負責應用程式的資料管理，以及商務邏輯，這會讓他們投資