知道早期的開發中，前后端是不分離的嗎？那么后來它們又為什么要“分家”呢？分離后又有什么好處呢？

在前面一篇文章中，產品汪搞懂了前后端的工作分工。但是了解過程中，一個程序猿哥哥不經意間的一句話：“現在都是前后端分離的”，讓小汪感到納悶了，以前難道前后端不分離的么？于是小汪就繼續深究起來。

不溫馨的一家人

在十幾年前，前端的地位其實相對于后端并不那么強勢，以下是一種經典的編程框架。

MVC：Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典范，用一種業務邏輯、數據、界面顯示分離的方法組織代碼。

有意思的事情出現了，內容是傳給用戶的，前端并不是直接接觸用戶的！前端只是提供了個樣式模板，由后端把內容嵌入進入，再由后端直接傳給用戶。

這個時候，前端的編程要各種順著后端哥哥的心意，而且前端要是出bug了，還得拉上后端一起研究，誰讓你往我的模板里插了內容，出了幺蛾子你就得負責到底。

這個時期前后端高度耦合，從編程環境、到開發調試，都必須“在一起”，對于前端來說，其實自主權就不高，對后端來說，也要懂一些前端的知識。

于是前端程序猿對后端程序猿說，要不……你只管你的業務和數據，把結果給我，我來負責組裝與呈現，這樣大家都輕松些。于是前后端就分離了。

當初是你要分開，分開就分開

前后端分離帶來的好處：

（1）編程更輕松

前后端分離之后，后端更專注于實現業務邏輯，形成一套標準化的“API接口”，例如需要創建商品，前端將商品信息傳給后端創建商品的接口，后端就會完成商品的創建，并返回創建結果。如果前端給的創建商品信息缺了標題或者價格，后端還能返回創建失敗的結果，并且提示缺失了哪些信息等。

前端除了負責界面樣式和交互，還接管了獲取和展示數據的權利，從此前端開發就自由多了，如果遇上bug，也能很輕松定位到是前端還是后臺的事情。

（2）更高的可復用性

前后端分離，更是順應了互聯網發展多樣化的潮流。后端通過提供一系列可以實現不同業務功能的接口，就可以讓不同的前端、甚至外部系統過來對接。

這樣方便了公司不斷推廣自己的產品，今天推出手機網頁版、明天推出APP版、后天推出小程序版本等。而后端只需要提供一次接口，無需每增加一類客戶端，后端就要新寫過。

用戶訪問網站的過程小知識：

1. 瀏覽器先下載HTML的內容
2. 根據HTML里的內容，下載并加載對應的CSS，讓網頁漂亮起來
3. 根據HTML里的內容，下載并加載對應的JavaScript，讓網站具備交互動效，其中部分JavaScript代碼負責向服務器上的后端請求數據，并展示在頁面上。

但是久而久之，前后端分離在web網頁上也遇到了一些問題，最明顯的是以下兩點：

1. JavaScript的請求在用戶瀏覽器中進行，當一個網站需要展示非常多的內容時，JavaScript就要向后臺多個接口請求數據，然后再在用戶瀏覽器上完成頁面組裝，這過程中就會給用戶設備的網速、設備的運行速度（CPU、內存等）帶來一定的壓力。
2. 搜索引擎，如百度、搜狗、谷歌等，想爬取網頁的內容時，就會用到爬蟲。爬蟲會抓取網頁HTML里面的內容，然后讓其他網友可以搜索到你的網頁。但是此時，HTML文件就是個框架，要依靠JavaScript才能獲取到數據。這就會導致你的網頁難以被搜索引擎收錄，用戶很可能搜不到你的網頁。

前后端分離為用戶設備帶來的影響，可以通過“換臺新手機”、“換臺新電腦”解決，但是搜索引擎爬不到網頁的數據，對很多重度依賴搜索引擎流量的產品來講，打擊可就大了。

例如你需要找一個菜譜的時候，可能會在百度搜索“芥藍怎么炒好吃？”，然后再從搜索結果里面訪問各種美食網站。又或者你想去哪里玩，就會在百度搜索“土耳其旅游攻略”等等。對于這類重搜索引擎流量的網站而言，如果爬蟲爬不到自己的數據，客流損失就比較嚴重。

運行在后面的前端

考慮到上訴問題，聰明的網頁前端程序猿就想到了一個新的辦法，那我們先把后臺的數據跟HTML內容整合好，再呈現給用戶吧，得力于一種叫做Node.JS的、可以使用網頁前端熟悉的JavaScript編程的工具，于是有了2.0版本的前后端分離。

前端程序猿跟服務器上的后端說，讓一讓，給我騰個地兒，然后把Node.JS放在了服務器上。等用戶或者爬蟲需要訪問網頁時，這個運行在服務器上的程序，先請求后端獲得數據，并整合到HTML中，然后再返回給用戶。

這樣一來，用戶的設備就少了JavaScript多次請求后端的煩惱，加快了運行速度，而爬蟲也可以爬取到填充好內容的HTML網頁了。

看到這里，小汪就想，這么一來，用戶體驗、爬蟲的問題確實解決了，但是讓本來本該發生在用戶瀏覽器上的事情，都在服務器上做了嘛，如果訪問量大的話，咱服務器的壓力不就很大了？

前端程序猿哥哥呵呵一笑，其實不然，你想想，很多用戶都是在訪問同一個網頁，看同一個商品、讀同一篇文章，這些請求，要是服務器的前端就請求后臺一次，然后把整合好的HTML保存起來，下次再有人再來訪問，就把這個生成好的HTML展示給用戶，這樣不就服務器輕松了、用戶訪問也快了么！

小汪又問了，那咋們頁面多了，不就要每個頁面都保存一份HTML文件么，服務器儲存的空間不就越來越少了么？

前端程序猿哥哥繼續答道：久而久之，HTML文件在服務器積累多了，就把好久都沒人訪問的HTML刪了，給其他新保存的HTML文件讓位置，通過“緩存”技術，讓服務器永葆活力。

小汪恍然大悟，原來這就是緩存啊！這下子，小汪終于明白了前后端分離是什么回事，以及為什么要前后端分離。

現在隨著很多大型產品的形成、獨立運行，新的“信息孤島”正在形成。例如微信的公眾號-小程序-朋友圈-圈子，然后通過搜一搜進行統一搜索，內部造血，而不再依賴傳統的搜索引擎為他引流。

又例如淘寶，很多年前就拒絕了讓百度爬蟲爬取他的商品信息，只允許在淘寶內進行搜索。你在百度上搜不到淘寶的商品，在微信上也找不淘寶的任何信息、無法訪問淘寶任何的鏈接，如果你要淘寶購物，就只能去淘寶網站或者下載淘寶APP。新的互聯網格局的形成，肯定會進一步影響著前后端的關系。

本文由 @iCheer 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

懂技術的產品經理可能在遇上bug時都不知道去找誰，本文說明產品前后端如何劃分，相關問題屬于哪個“端”，適合初級產品人閱讀。

產品汪在驗自己產品時，經常遇上bug了，就去找測試小姐姐，測試小姐姐看了看，就說：“這個找后臺的某某吧”，“這個找前端的某某吧”。

小汪就好奇了，那么多程序猿哥哥，他們的職責是怎么劃分的呢？

產品經理眼里的“端”

在產品經理眼里，一般按業務的使用者對產品領域進行劃分，例如淘寶的用戶端、商家端，再例如滴滴的乘客端、司機端、運營后臺；甚至會進一步細分，有網約車司機端、代價司機端等。

當然，也可能按照業務模塊進行劃分，例如物流系統、支付系統、訂單系統等。

前后端：誰前？誰后？

在大部分公司里，一個程序員的工作，可能會覆蓋很多個產品端。例如一位前端的同事，可能既要做用戶端的H5，也要做商家端的網頁，還要做平臺運營后臺的網頁。一個后端的同事，工作也可能覆蓋多個業務模塊。

那他們的工作是怎么劃分的呢？

簡單來說，對于程序猿哥哥來說，前端就是負責“用戶看得見”的內容，將UI稿轉換成網頁、APP、電腦軟件等，同時實現所有交互事件，例如用戶點擊、滑動、拖動等操作。

前端又會根據實現的形式進行細分，常見的有：

1）移動端APP

根據手機系統的不同，又細分為蘋果iOS APP、谷歌Android（安卓） APP，甚至一些非常小眾的手機系統APP，例如微軟的Windows Phone（簡稱WP）的APP。

不同手機系統上APP開發需要用的編程語言差異較大，開發環境也有所差異，所以一個APP前端程序員，一般只會開發一個端，例如只負責安卓端，或者只負責蘋果端。

另外，在移動端，大家經常能聽到一個詞，叫做“原生”。所謂原生就是使用系統指定的編程語言開發的軟件，“非原生”，一般指套用一個網頁瀏覽器，然后再在瀏覽器內用網頁展示內容實現的軟件。

2）PC端軟件

例如我們常用的office系列軟件Word、Excel、PowerPoint；電腦版的QQ、微信、QQ音樂；上網頁用的Google Chrome瀏覽器、Firefox瀏覽器等，都是PC端的軟件。PC端也因系統的差異，前端也會進一步的細分。

3）網頁web

網頁基于HTML（HyperText Markup Language，超文本標記性語言）實現，現在已經發展到了HTML5.0版本，也就是大家耳熟能詳的H5。Web內容具有編程語言統一、與平臺無關的特點，我們可以通過各種電腦網頁瀏覽器、手機上的網頁瀏覽器（UC、百度瀏覽器等），甚至內嵌了網頁瀏覽器的微信、QQ、支付寶等等，實現網頁的訪問。

得益于網頁內容編程語言統一的特點，網頁前端程序員一般能做非常多的事情，例如開發電腦端網頁、手機端網頁、微信公眾號H5等等。

4）小程序

一種新生的事物，某些軟件當用戶規模足夠巨大時，就可以設定一套規范，然后讓前端程序員們直接為這些軟件，而不是不同的系統，開發“程序中的程序”。

這樣的好處就是，用戶不再需要手機上裝各種各樣的APP，一個軟件里就能解決大部分事情。

現在主流的小程序，例如微信小程序、百度小程序、支付寶小程序等，都是基于HTML衍生發展出來的。開發過程與編寫HTML網頁相似，所以一些公司并沒有專門的小程序前端，而是由網頁web程序猿哥哥“被迫營業”同時從事小程序的開發。

目前很多公司推出的小程序，雖然都是基于HTML衍生出來的，但是各自衍生（魔改）方法不一樣，所以具體編寫時也有所差異。目前，市面上有一些小程序代碼轉換工具，例如寫好一個微信小程序，用工具一轉，就能生成一個百度小程序。

相對于“用戶看得見”的前端，那用戶“看不見”的部分，就是由后端負責了，后端程序猿哥哥要負責業務邏輯的實現、訂單、用戶資料等數據的增刪改查。

一款產品的后端，一般只會用一種編程語言編寫。一些功能特別豐富的產品可能會用一種編程語言作為核心，另外用1-2種語言實現一些這類語言擅長的模塊，例如用Java做核心語言，但配套的數據平臺用Python寫之類的。

由于在同一款產品中，后端編程語言不像前端一樣根據系統/設備不同各種開花。所以，后端程序猿哥哥就可以一個人負責多個業務模塊的后端編寫，甚至輪流負責不同模塊的編寫。

后端哥哥也是很辛苦的，因為他們需要去實現各種業務邏輯，訂單流轉、登錄登出及權限管理、實現數據的存儲導出、進行不同系統間的對接等等。

根據問題特征，回溯bug該找誰

介紹完了前端后端分工內容的區別，那么想區分一個bug到底歸誰，那就容易些了。

如果是頁面樣式上的錯位、缺了或多了啥字段或模塊，某些按鍵或交互點了沒反應，就優先找對應內容的前端。

相對比前端的bug，后端bug體現形式就比較豐富：

1）業務邏輯錯誤

例如創建訂單計算金額錯誤、優惠券是否能用判斷條件錯誤、訂單審批流程錯誤等等。

2）點了之后報錯

一個按鈕不是點了沒反應，而是點了就彈出一大堆英文的錯誤信息，這種情況下一般可以先找后端看看問題。

3）404、500錯誤

這種有明顯數字代碼的錯誤，先找后端就沒錯了。

這下子，小汪就明白了，原來前后端的程序猿哥哥們是這樣分工的。

用戶可見的界面、進行的交互操作就是前端負責，業務的邏輯、流程、數據的處理就是后端的職責。

本文由 @iCheer 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

端開發和后端開發是為了什么？有什么區別？

通俗地說，前端工作用戶可以直接看到，而后端開發工作主要在服務器端，用戶無法直接看到。雖然前端開發和后端開發有很大的區別，但是為了更好的用戶體驗，他們的工作是相輔相成的。

1.網站前端是什么？

網站前端指的是網站的頁面制作或靜態頁面制作，是直接與用戶交互的部分，包括你在瀏覽網頁時接觸到的所有視覺內容——從字體到顏色，以及下拉菜單和側邊欄。這些可視內容由瀏覽器解析、處理和呈現后呈現。

舉個簡單的例子，靜態頁面就像是固定布局的內容和圖片。

之所以稱之為靜態，是因為這些內容是不能動態改變的，而動態改變則是指用戶可以在后臺進行上傳、編輯、發布等操作來改變網頁的內容。

簡而言之，網站前端是指網站的頁面制作，網站前端工作利用html、css、js等計算機語言技術制作網站頁面的樣式、布局、動態效果和數據交互，即為網站前端。

2.網站后端是什么？

網站后端是指網站的服務器端技術或后端技術。

為了使服務器、應用程序和數據庫能夠相互交互，我們也說過靜態頁面的缺點是不能動態改變頁面上的內容，實現一些代碼邏輯，比如我們需要實現用戶的注冊和登錄驗證，或者上傳圖片和發布文章等，這都需要后端來實現。

后端工作主要是做平臺部署、界面設計和功能實現。平臺部署主要是配置服務器；接口設計主要針對不同的服務設計相應的功能接口。通常，一個平臺有多個windows套接字。功能是實現具體的業務邏輯。

后端工程師需要有服務器端語言，如asp、java、jsp、php等，用于應用程序構建。采用Linux作為開發部署環境，網站后端技術還包括MySQL、sqlserver等數據庫，用于存儲后端數據。

3.網站前端和后端的區別

現在我們明白了，網站的前端和后端工作是完全不同的。

(1) 呈現方式不同。

前端工作是創建網頁，后端工作是結合數據庫實現一些代碼的功能邏輯。

簡單來說，前端開發人員用一個按鈕在應用程序中創建一個界面，然后按下按鈕獲取客戶數據。后端開發人員編寫代碼，通過指出從數據庫中提取哪些數據并傳遞回前端(最后顯示在那里)，使按鈕工作。

(2)使用不同的技術

前端開發使用的技術包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js、Webpack、AngularJs、ReactJs、VueJs等技術。

以java為例，后端開發主要使用的技術包括但不限于Struts Spring MVC Hibernate HTTP協議Servlet Tomcat服務器。