【譯】類比餐廳桌前就餐來解釋前端和後端

若是你曾去過坐式餐廳，那麼你就能理解web開發中前端和後端的區別。

在開始學習web開發，你會遇到一系列使你迷迷糊糊的概念。

數據庫？服務器？客戶端？服務端？AJAX？

幸運的是，你只須要了解HTML和CSS就能夠去建立你的第一個站點了，它能夠在你本地電腦上運行起來。可是，若是你想讓你的站點能在線上運行起來，你須要瞭解下前端和後端的概念。

這裏有個通常的想法：類比餐廳裏面的服務員和廚房員工，前端和後端在你的站點上也是分工合做。在它們擅長的領域爲站點服務。

對廚房員工來講，這意味着高效地製做出美味的食物。而服務員是與客戶合做並創造良好客戶體驗方面的專家。

在web開發中，前端有時被稱爲客戶端，然後端有時被稱爲服務端。

如下是不一樣技術在web應用程序的前端和後端中扮演的角色。爲了能理解這篇教程，你須要掌握基本的HTML和CSS知識。

介紹前端

咱們先來介紹下前端。前端代碼建立用戶界面，這是web訪問者與代碼交互的組織方式。在咱們的舉例中，相似餐廳的餐桌，這是個提供顧客和服務員可控交流的地方。因此，想象一下，網站就比如餐桌，好比http://mysite.com網站。

首先，用戶（客戶）須要些能夠瀏覽的東西。在設定的餐廳的場景裏面，很明顯，對應的就是菜單了。這是一段靜態的內容，應該讓客戶更加容易理解他們的選擇。

從一個前端開發者的視覺來看，這相似於HTML和CSS。這兩種語言容許你建立靜態內容。

很明顯，咱們缺失了同樣東西。你不可能對這菜單大喊大叫，期待發生些什麼事情。你須要一種方式將你的訂單傳達給廚房人員。

這時候，服務員就登場了。服務員能幫助你瞭解菜單，回答你提出的任何問題，而後將你的訂單交給廚房人員。服務員是互動方面的專家，明白你的需求。這正是Javascript的用武之地了。

做爲一個開發者，Javascript將幫助你實現各類目標。它可以爲用戶帶來更好的頁面體驗，幫助用戶找到適合的信息。它也是一種能用來發送用戶請求到後端的語言。換言之，當你寫Javascript，它並不意味着你正在和後端發生了什麼交互。（由於）Javascrip只是前端的一部分，能夠不用和後端交互就能解決不少問題。

經過上面選擇膳食的過程，我總結了（HTML/CSS和Javascrip 或者 菜單和服務員）兩方面。當用戶訪問你的站點時，他們是帶有目的的。你的代碼必須幫助他們來達成目標。

1. 用戶可以很快的瀏覽並知道提供了什麼（HTML/CSS）
2. 用戶可以很快的找到更多的幫助他們下決心的資源（Interactivity/JavaScript）
3. 用戶可以採起措施去接近本身的目標（User Request/ JavaScript）

介紹後端

你是否進過餐廳的廚房？至少能夠說，那是個高壓的地方。它與客戶看到的環境徹底不一樣。你甚至能夠說，服務員和菜單提供了發生在廚房的事件的友好、完美的呈現（場景），而廚房（對客戶來講）並無呈現什麼製做過程。

這比如web應用程序中的後端，或者運行在服務端的代碼。相似廚房，服務器位於與用戶界面不一樣的位置。它是使用不一樣語言進行交流的。

因爲服務器其實是遠程的計算機,所以它比任何給定的計算機上面的瀏覽器具備更多的計算能力。就像廚房的員工，重點在於效率和生產力。

想象一下複雜的餐廳廚房。它必須在正確的時間和正確的位置將食材準備好。廚房的員工必須知道在特定的時間作他們的工做。他們必須重複地生產同等質量飯菜。類似的，服務器必須組織web應用程序中的數據，以便在適當的時候發送正確的內容。

服務器必須在接收到請求的時候，發送響應。

在餐廳的場景中，響應多是下面幾種：

• 佳餚
• 廚房對您要吃的飯製做材料已被用光的反饋
• 服務員並未對問題的跟進

不論是什麼，迴應是經過服務員傳達給客戶的。在web中，那就是Javascript代碼了。

比較流行的後端語言和框架包括Ruby, Ruby on Rail, node.js, PHP和其餘。

爲何咱們須要前端和後端

一個比較實際的緣由是，咱們必須在客戶端和服務端運行不一樣的代碼。所有的現代瀏覽器只能理解HTML, CSS 和 JavaScript。因此，這是咱們不能在瀏覽器上使用服務端語言的一個簡單緣由。

另外一個緣由是，咱們容許每邊都專一在他們擅長的地方去迎接挑戰。你能想象下，若是廚師去當服務員，那將給客戶的用戶體驗帶來多大災難。因此，咱們很幸運，咱們有一方專門從事用戶界面，另外一方專門研究服務器方面的挑戰。

純前端網站

想象一下，你擁有一家不在網上銷售任何東西的企業。假設你擁有一家當地的花店。

在那種情景下，你不須要後端，由於那場景不復雜。你只須要前端，也許是一個表格，能夠將任何查詢指向你的電子郵箱。

換言之，一些網站只是用於瀏覽和採起某種瀏覽器不須要處理的行爲。你不須要爲每一個類型的網站編寫後端。你可使用Github Pages將你的純前端網站放到網上。

後話

翻譯原文Front End v. Back End Explained by Waiting Tables At A Restaurant

文章首發github - 【譯】類比餐廳桌前就餐來解釋前端和後端