Loading...

* 前端:程式碼從伺服器端下載到本機端(使用者的電腦),在「瀏覽器」執行。
* 後端:程式碼留在伺服器端,在「伺服器」執行。

你可能想問,又不是吃飽撐著,沒事分成這兩個領域幹嘛?網站開發之所以會分化成這兩個領域,其實是為了增進安全性與效能。

假設 Facebook 只有前端沒有後端,那你每次連線到 Facebook 的時候,都要把整個使用者帳戶的資料庫下載到本機上,如此一來,只要在本機端破解資料庫,別人要登入你的帳戶簡直是輕而易舉,像下面這樣:


我們不希望這種事情發生,所以才把資料庫從頭到尾放在伺服器,當用戶輸入帳密的時候,後端程式會到資料庫做比對,確認帳密後才讓你登入,讓客戶端不會接觸到資料庫本身,如下圖所示:


上面講的是安全性的例子,那為什麼分前後端也可以增進效能呢?我們同樣以 Facebook 為例,假設你今天要註冊帳號,在填完表格按下註冊的時候,背後會有程式去做兩步驗證,第一步驗證是看你的 Email 和密碼有沒有輸入正確的格式,第二步驗證是這個 Email 是不是有人使用過了,任何一步沒通過,都會出現錯誤訊息。假設 Facebook 只有後端,那表示這兩步驗證都要連線到伺服器才能完成:




但事實上,第一步驗證並沒有涉及任何隱私資訊,只是檢查你輸入的格式是否正確(譬如 Email 有沒有包含 @,密碼有沒有用到禁用字元等等),其實可以把驗證的程式代碼交由瀏覽器執行,讓使用者送出時,先用這段程式做驗證,確認格式正確後,第二步驗證再交由後端的程式去比對伺服器上的資料庫,看看 Email 是不是有重複。這種第一步驗證給前端處理,第二步驗證給後端處理的方式,就可以有效減少伺服器的負擔,也能增進效能:




如果這樣看讀者還是丈二金剛摸不著頭緒,那我們就講一段生動的故事,來比喻上述的狀況。

想像一下回到清朝末年,你孤身一人來到廣州的陽泉酒家拜師學藝,希望在首席大廚及第師傅的調教下,能成為像小當家一樣的特級廚師,拜入及第師傅門下後,你當了三個月的洗碗工,終於晉升為餐館的店小二…

這天,餐館依舊絡繹不絕,你熟練地向廚房吆喝著:「來三份招牌餃子喲~」過沒多久,名揚天下的陽泉酒家餃子就上桌了,你看著客人幸福滿足的表情,不禁想:「都來這裡三個月了,廚房的事情我是一件也沒做過,不如等等趁空擋進去觀摩,看看師兄姐是怎麼做餃子的吧?」

正當你想進廚房的時候,正巧被師傅看到,及第師傅威嚴地正聲道:「我陽泉酒家餃子的做法乃是祖傳之秘,豈是你這種低等弟子能夠窺其堂奧?」他手指著廚房外的警示標語,上頭寫著「低等弟子與狗不得進入」,你只得摸摸鼻子,乖乖回去當店小二。一向待你很好的師兄把你拉到一旁,低聲道:「你也別怪師傅這般小氣!這年頭兵荒馬亂,出現了不少偷盜食譜的學徒,你看後面巷子的餃子店,打著陽泉酒家餃子的名號招搖撞騙,就是三年前偷溜進廚房的不肖學徒偷得了食譜出來開的,你可知道師傅當時是多麽痛心啊!」

在上面的故事中,你可以把店小二看成是瀏覽器,廚房看成是伺服器,餃子食譜是伺服器內部的機密資料,及第師傅是伺服器的防護機制(防火牆),而把食譜偷走的不肖學徒,自然就是成功侵入伺服器的駭客了。每當客人點餐,店小二就向廚房吆喝,就像是瀏覽器向伺服器發起 HTTP Request,而廚房做出來的餐點,就像是伺服器根據 HTTP Request 送回瀏覽器的東西,店小二跟客人從頭到尾只會看到餃子,不會看到餃子的做法,也就是說,本機端接觸不到伺服器端的機密資料。

後端如此,那麼前端是怎麼樣的概念呢?

讓我們再次回到清朝末年,講講前端的狀況。

自從上次被師傅責備之後,你就再也不敢擅進廚房了。有天晚上,及第師傅突然召集所有弟子到大廳,你瞧各弟子神色慌張,你也不禁緊張起來。及第師傅環顧了一下四周,大聲道:「明天,就是我們陽泉酒家被『御膳八仙』試吃的日子,大家可要繃緊神經!」你聽到「御膳八仙」不禁睜大了眼睛,所謂「御膳八仙」可是當朝皇帝特別遴選的八位饕客,若能得到他們的認可,將被賜與「天下美味」的匾額,主廚還能得到親自晉見皇帝的機會,可說是每個餐館夢寐以求的願望。

這八位脾氣古怪的饕客,為了顯示自己的身份尊貴,特地向全天下頒布了一套的「食禮」規矩,他們認為吃也要合乎古禮,舉凡擺盤、食具顏色甚至上菜時的溫度,均有講究。陽泉酒家在多次與八仙交手的經驗中,早已發展出一套專門對應「食禮」的方法,那就是讓內場(廚房)專心烹調,讓外場專門負責「食禮」,如此一來,既能兼顧出餐速度,也能降低廚房內手忙腳亂而出錯的機率。

由於陽泉酒家料理繁多,若要外場完全記住每道料理的食禮是不可能的,所以廚房出餐前都會給出一道暗號,外場會根據暗號對料理進行加工,完成食禮的手續後才會真正端到八仙面前供其享用。

在上面的故事中提到的分工,就是我們一開始講到的分前後端的概念,由於擺盤、上餐具這些動作並非什麼機密,所以可以交由外場來做,而廚房給的「暗號」,就是伺服器傳給瀏覽器的一些前端檔案(HTML、CSS、JavaScript),小二根據暗號做食禮的加工,就像是瀏覽器在執行前端檔案中的程式,網頁經過前端程式的點綴,才會變得好看且具互動性。

一般而言,我們通常會把牽涉隱私(譬如客戶訂單資料)、重要商業邏輯(譬如 Amazon 的推薦系統)的程式放在後端,把處理網站外觀與互動性的程式放在前端。隨著網站開發領域的演進,各種程式語言、框架也越來越蓬勃發展,令人眼花撩亂,接下來就讓我們快速看一下常見的程式語言跟術語。

後端(伺服器端)語言

常見的有:Ruby (Rails), Javascript (Node.js), Python (Django), PHP, C#, Java,族繁不及備載。

  • 程式「執行於」伺服器上,負責回應客戶端的 HTTP Request,並回傳 Response。
  • 不會被使用者看到。
  • 前端(客戶端)語言

    只有三種:HTML、CSS、JavaScript。

  • 雖然只有三種,但 JavaScript 有很多框架跟函式庫,譬如 AngularJS、React.JS 等等。
  • 程式「執行於」瀏覽器上,通常負責網頁外觀與互動性。
  • 可以被使用者看到,因為程式碼會被下載到瀏覽器並執行。
  • API(Application Programming Interface)


    API 是程式與程式之間傳輸訊息的「接口」,常見的應用例子如第三方登入:



    當你在購物網站上按下 Facebook 登入時,網站就透過 Facebook 提供的 API 發起了一個 Request 給 Facebook ,如果 Facebook 認可這次的 Request (API 有一定的規範格式,你要人家的資料當然要遵守人家的規則),就會回傳用戶的資料給購物網站,購物網站再根據這個資料讓你登入。像這種跨程式、跨網站的資料傳遞,都必須透過 API 完成,通常大型的企業都會開放 API,如 Google、Facebook、Uber 、微軟都有開放 API 給第三方串接他們的服務。

    當我們玩遊戲的時候,如果很常用到某種連技,通常會把這套連技設定成熱鍵。工程師也一樣懶惰,如果他們發現某個功能很常用到,就會傾向把它寫成函式方便下次使用,有些厲害的工程師這種函式寫多了,就乾脆開放出來讓大家使用(兼膜拜),這就是所謂的函式庫啦!

    所以一言以蔽之,函式庫就是用某種程式語言寫成的「函式大集合」,譬如 jQuery 就是由 JavaScript 寫成的函式庫,裡面有一堆前端很常用到的 JavaScript 函式可以給工程師使用。

    Framework (框架)


    所謂的框架就是一套已經被制定好的規範和慣例,有些高手在寫程式的時候,會把一些 best practice 集結起來,制定成框架,讓其他工程師在該架構下來進行開發,可以大幅度縮短開發的時間。譬如 Bootstrap 就是由 Twitter 員工開發出來的網站前端框架,完整支援 responsive design (隨著螢幕大小自動調整網頁) ,內含已經做好的表格、按鈕、導覽列等網頁元素,善用此架構可以大幅度縮短架站的時間。

    Cookie


    通常你在瀏覽網站的時候,網站的伺服器會送一個 Cookie 存在你的瀏覽器的資料夾裡面,Cookie 是一種容量很小的文件檔案,裡面包含了一個獨特的 ID,以及一些獨特的代碼。Cookie 用來儲存使用者的偏好及狀態,譬如當你登入某種服務時,如果你有勾選保持登入7天,那伺服器就會傳給你一個7天後會自動過期的 Cookie,當你下次登入時,伺服器會去檢查你的 Cookie,確認完身份之後你就不用再次登入。要注意的是,剛剛講的這個 Cookie 並不會儲存你的登入帳號密碼,只會儲存你登入的「狀態」。

    隨著數位廣告技術成熟,Cookie 也常拿來作 Remarketing :

    以 Google 聯播網為例,當你造訪了某個電商網站,伺服器會傳給你一個 Cookie ,裡頭會有 ID 以及你瀏覽過的商品資訊,當你去其他「有加入 Google 聯播網」的網站時, 這個網站會偵測到你的 Cookie ,然後根據你 Cookie 儲存的資訊呈現相關的商品 Banner,這也就是為什麼你走到哪裡,廣告就跟到哪裡了。

    SQL


    SQL 是專門用來處理資料庫的語言,如果你在某個電商網站要找出「價格在2000~5000之間」的商品,後端就會運行 SQL 並把結果帶到前端,Code 可能會長得像下面這樣:

    SELECT PRICE, PRODUCT_NAME FROM PRODUCTS
    WHERE PRICE BETWEEN 2000 AND 5000

    如果你的公司規模夠大,資料動輒數十萬筆以上,那可能就會需要運用 SQL 撈名單作數據分析,現在有不少行銷人也開始在學 SQL 了。

    相關課程:SQL 入門課程:14 天從語法到真實企業案例

    Ajax


    Ajax 是一種特別的技術,讓你的網站可以在不 Reload 頁面的狀況下跟伺服器互動,舉個例子,如果你在 Facebook 上按了某篇文章讚,你會發現你不用刷新頁面,但是讚數卻增加了,這就是用了 Ajax 的技術,當你按 Like 的時候,其實背後執行了 JavaScript 並且送出 Request 給伺服器,這時候伺服器就知道「這篇文章的讚數增加了」,然後再更新資料庫,從頭到尾都不用刷新頁面。

    你可以做些什麼?


    哩哩叩叩講了這麼多,那麼身為一個行銷人到底該學些什麼?我強烈建議做數位行銷的人,除了懂上述的觀念之外,最好學一點基礎的前端程式語言,學 HTML 跟 CSS 有助於瞭解網頁的架構,一些簡單的排版工作也可以自己做,不需要事事倚賴工程師。如果行有餘力,可以再多學一點 JavaScript ,因為所有的流量分析工具、廣告追蹤的 Tracking Code 都是由 JavaScript 構成,如果你完全不懂,那遇到問題時很難 debug ,下一篇我們將為大家全面解析 Tracking Code 的意義以及用法,如果你以前埋 code 總是有各種疑難雜症,千萬不要錯過下一篇文章!

    (結合行銷與網站數據追蹤,你該學會的 Google Tag Manager (GTM))

    Image Credit: Carlos Arias

    跟 Data & AI 團隊有協作?先來看看 Data & AI 免費公開課!

    延伸閱讀

    更多好文章推薦給你!

    No items found.