不懂技術(shù)的產(chǎn)品經(jīng)理可能在遇上bug時(shí)都不知道去找誰(shuí)，本文說明產(chǎn)品前后端如何劃分，相關(guān)問題屬于哪個(gè)“端”，適合初級(jí)產(chǎn)品人閱讀。

產(chǎn)品汪在驗(yàn)自己產(chǎn)品時(shí)，經(jīng)常遇上bug了，就去找測(cè)試小姐姐，測(cè)試小姐姐看了看，就說：“這個(gè)找后臺(tái)的某某吧”，“這個(gè)找前端的某某吧”。

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

產(chǎn)品經(jīng)理眼里的“端”

在產(chǎn)品經(jīng)理眼里，一般按業(yè)務(wù)的使用者對(duì)產(chǎn)品領(lǐng)域進(jìn)行劃分，例如淘寶的用戶端、商家端，再例如滴滴的乘客端、司機(jī)端、運(yùn)營(yíng)后臺(tái)；甚至?xí)M(jìn)一步細(xì)分，有網(wǎng)約車司機(jī)端、代價(jià)司機(jī)端等。

當(dāng)然，也可能按照業(yè)務(wù)模塊進(jìn)行劃分，例如物流系統(tǒng)、支付系統(tǒng)、訂單系統(tǒng)等。

前后端：誰(shuí)前？誰(shuí)后？

在大部分公司里，一個(gè)程序員的工作，可能會(huì)覆蓋很多個(gè)產(chǎn)品端。例如一位前端的同事，可能既要做用戶端的H5，也要做商家端的網(wǎng)頁(yè)，還要做平臺(tái)運(yùn)營(yíng)后臺(tái)的網(wǎng)頁(yè)。一個(gè)后端的同事，工作也可能覆蓋多個(gè)業(yè)務(wù)模塊。

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

簡(jiǎn)單來(lái)說，對(duì)于程序猿哥哥來(lái)說，前端就是負(fù)責(zé)“用戶看得見”的內(nèi)容，將UI稿轉(zhuǎn)換成網(wǎng)頁(yè)、APP、電腦軟件等，同時(shí)實(shí)現(xiàn)所有交互事件，例如用戶點(diǎn)擊、滑動(dòng)、拖動(dòng)等操作。

前端又會(huì)根據(jù)實(shí)現(xiàn)的形式進(jìn)行細(xì)分，常見的有：

1）移動(dòng)端APP

根據(jù)手機(jī)系統(tǒng)的不同，又細(xì)分為蘋果iOS APP、谷歌Android（安卓） APP，甚至一些非常小眾的手機(jī)系統(tǒng)APP，例如微軟的Windows Phone（簡(jiǎn)稱WP）的APP。

不同手機(jī)系統(tǒng)上APP開發(fā)需要用的編程語(yǔ)言差異較大，開發(fā)環(huán)境也有所差異，所以一個(gè)APP前端程序員，一般只會(huì)開發(fā)一個(gè)端，例如只負(fù)責(zé)安卓端，或者只負(fù)責(zé)蘋果端。

另外，在移動(dòng)端，大家經(jīng)常能聽到一個(gè)詞，叫做“原生”。所謂原生就是使用系統(tǒng)指定的編程語(yǔ)言開發(fā)的軟件，“非原生”，一般指套用一個(gè)網(wǎng)頁(yè)瀏覽器，然后再在瀏覽器內(nèi)用網(wǎng)頁(yè)展示內(nèi)容實(shí)現(xiàn)的軟件。

2）PC端軟件

例如我們常用的office系列軟件Word、Excel、PowerPoint；電腦版的QQ、微信、QQ音樂；上網(wǎng)頁(yè)用的Google Chrome瀏覽器、Firefox瀏覽器等，都是PC端的軟件。PC端也因系統(tǒng)的差異，前端也會(huì)進(jìn)一步的細(xì)分。

3）網(wǎng)頁(yè)web

網(wǎng)頁(yè)基于HTML（HyperText Markup Language，超文本標(biāo)記性語(yǔ)言）實(shí)現(xiàn)，現(xiàn)在已經(jīng)發(fā)展到了HTML5.0版本，也就是大家耳熟能詳?shù)腍5。Web內(nèi)容具有編程語(yǔ)言統(tǒng)一、與平臺(tái)無(wú)關(guān)的特點(diǎn)，我們可以通過各種電腦網(wǎng)頁(yè)瀏覽器、手機(jī)上的網(wǎng)頁(yè)瀏覽器（UC、百度瀏覽器等），甚至內(nèi)嵌了網(wǎng)頁(yè)瀏覽器的微信、QQ、支付寶等等，實(shí)現(xiàn)網(wǎng)頁(yè)的訪問。

得益于網(wǎng)頁(yè)內(nèi)容編程語(yǔ)言統(tǒng)一的特點(diǎn)，網(wǎng)頁(yè)前端程序員一般能做非常多的事情，例如開發(fā)電腦端網(wǎng)頁(yè)、手機(jī)端網(wǎng)頁(yè)、微信公眾號(hào)H5等等。

4）小程序

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

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

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

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

相對(duì)于“用戶看得見”的前端，那用戶“看不見”的部分，就是由后端負(fù)責(zé)了，后端程序猿哥哥要負(fù)責(zé)業(yè)務(wù)邏輯的實(shí)現(xiàn)、訂單、用戶資料等數(shù)據(jù)的增刪改查。

一款產(chǎn)品的后端，一般只會(huì)用一種編程語(yǔ)言編寫。一些功能特別豐富的產(chǎn)品可能會(huì)用一種編程語(yǔ)言作為核心，另外用1-2種語(yǔ)言實(shí)現(xiàn)一些這類語(yǔ)言擅長(zhǎng)的模塊，例如用Java做核心語(yǔ)言，但配套的數(shù)據(jù)平臺(tái)用Python寫之類的。

由于在同一款產(chǎn)品中，后端編程語(yǔ)言不像前端一樣根據(jù)系統(tǒng)/設(shè)備不同各種開花。所以，后端程序猿哥哥就可以一個(gè)人負(fù)責(zé)多個(gè)業(yè)務(wù)模塊的后端編寫，甚至輪流負(fù)責(zé)不同模塊的編寫。

后端哥哥也是很辛苦的，因?yàn)樗麄冃枰?shí)現(xiàn)各種業(yè)務(wù)邏輯，訂單流轉(zhuǎn)、登錄登出及權(quán)限管理、實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)導(dǎo)出、進(jìn)行不同系統(tǒng)間的對(duì)接等等。

根據(jù)問題特征，回溯bug該找誰(shuí)

介紹完了前端后端分工內(nèi)容的區(qū)別，那么想?yún)^(qū)分一個(gè)bug到底歸誰(shuí)，那就容易些了。

如果是頁(yè)面樣式上的錯(cuò)位、缺了或多了啥字段或模塊，某些按鍵或交互點(diǎn)了沒反應(yīng)，就優(yōu)先找對(duì)應(yīng)內(nèi)容的前端。

相對(duì)比前端的bug，后端bug體現(xiàn)形式就比較豐富：

1）業(yè)務(wù)邏輯錯(cuò)誤

例如創(chuàng)建訂單計(jì)算金額錯(cuò)誤、優(yōu)惠券是否能用判斷條件錯(cuò)誤、訂單審批流程錯(cuò)誤等等。

2）點(diǎn)了之后報(bào)錯(cuò)

一個(gè)按鈕不是點(diǎn)了沒反應(yīng)，而是點(diǎn)了就彈出一大堆英文的錯(cuò)誤信息，這種情況下一般可以先找后端看看問題。

3）404、500錯(cuò)誤

這種有明顯數(shù)字代碼的錯(cuò)誤，先找后端就沒錯(cuò)了。

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

用戶可見的界面、進(jìn)行的交互操作就是前端負(fù)責(zé)，業(yè)務(wù)的邏輯、流程、數(shù)據(jù)的處理就是后端的職責(zé)。

本文由 @iCheer 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。