* 前端：程式碼從伺服器端下載到本機端（使用者的電腦），在「瀏覽器」執行。
* 後端：程式碼留在伺服器端，在「伺服器」執行。
你可能想問，又不是吃飽撐著，沒事分成這兩個領域幹嘛？網站開發之所以會分化成這兩個領域，其實是為了增進安全性與效能。
假設 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，族繁不及備載。
前端（客戶端）語言
只有三種：HTML、CSS、JavaScript。
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 了。
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
