網路應用程式是什麼?Web App 與 Native App 的差別

什麼是應用程式 Application

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

什麼是「軟體」與「應用程式」?差別在哪?

「軟體」是一種概稱

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

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

「應用程式」具備明確任務

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

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

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

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

  • 搜尋資訊 – Google Search
  • 撰寫、儲存、發佈、分享文件 – Powerpoints, Word, and Google Doc
  • 有結構地管理與計算數字 – Excel
  • 與人溝通 – Gmail, LINE
  • 尋找地點與方向 – Google Map

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

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

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

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

只要用程式碼寫的都是「程式」

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

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

應用程式的執行環境

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

原生應用程式 Native application

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

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

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

  • 製作文件用的 Word、Pages
  • 簡報專用的 PowerPoint、Keypoint、Prezi
  • 或者編輯圖片用的 Photoshop 或 Pixir Editor

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

網路應用程式 Web application

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

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

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

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

  • 你能夠在 Facebook 或 Twitter 等社群平台和人們進行各式各樣的互動
  • 你能夠在 Amazon 或博客來的網站上查詢所有的書籍,並立刻購買
  • 你能夠在 Google Map 查詢即時路況,並根據你的 GPS 定位來選擇交通路線
  • 你能夠在 AirBnb 找到附近的空房、聯絡上房間主人;
  • 你能夠在 Netflix 觀看影片

認識 Web application 的架構

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

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

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

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

  • 如果找到匹配的 email,就會比對密碼是否正確;
  • 如果 email 找不到、或密碼是錯的,server 就會回覆「登入失敗」的訊息給使用者;

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

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

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

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

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

前端 Front-end:外觀、互動、體驗

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

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

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

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

後端 Back-end:資料、邏輯、效能

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

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

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

資料庫 Database

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

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

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

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

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

API

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

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

Front-end 前端 vs. back-end 後端

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

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

後端開發人員負責應用程式的資料管理,以及商務邏輯,這會讓他們投資更多時間在設計與實作抽象的概念,例如演算法 (algorithm) 與資料結構 (data structure)。例如「臉書如何決定哪些貼文會出現在你的塗鴉牆上」就是一個後端演算法的例子。

延伸閱讀

許多公司都有配置專門的前端開發人員和後端開發人員。在打造應用程式時,你需要瞭解的是,要實作出你想要的功能,是僅僅涉及前端、或是只有後端,還是兩者之間必須合作。
前端、後端、全端工程師哪種軟體工程師薪水比較高?

小結:踏上WEB APP開發者之路

打造一個完整的產品,需要各式各樣的技術,整個技術組合可以稱為 technology stack or tech stack。你可以在 Stackshare 這個網站上查到各種知名公司的 stack,例如 AirBnb 在該網站上的查詢結果為:

SOURCE:Stackshare ‘AirBnb’

一口氣列出來很嚇人,事實上,在 Startup 團隊裡,不會先一口氣決定所有的 tech stack 才去做,而是團隊裡誰有什麼技能就讓誰去做,剩下沒人會做的事情想辦法找開源的免費工具、或買別人的服務。

對於想躋身開發者行列的你,你在乎的可能是學習的投資,學什麼工具最有機會、最能在未來發揮價值。然而,科技工具日新月異、推陳出新,沒辦法為學而學,必須在實作的情境下,為了解決特定的問題(如想做上傳圖片功能,要去找相關套件)而一步步學起來。

在ALPHA Camp 全端開發課程中,我們會以 JavaScript 為主要工具,帶領你走過多個網站應用程式的開發,並延伸學習相關的技能,建立自己的技能樹。

延伸閱讀:30歲開始線上學程式,生技研究員如何成功轉職前端工程師