天天看點

産品經理懂點技術之:什麼是前後端,他們怎麼分工的?

産品汪在驗自己産品時,經常遇上bug了,就去找測試小姐姐,測試小姐姐看了看,就說:“這個找背景的XX吧”,“這個找前端的XX吧”,小汪就好奇了,那麼多程式猿哥哥,他們的職責是怎麼劃分的呢?

産品經理眼裡的“端”

産品經理懂點技術之:什麼是前後端,他們怎麼分工的?

在産品經理眼裡,一般按業務的使用者對産品領域進行劃分,例如淘寶的使用者端、商家端;再例如滴滴的乘客端、司機端、營運背景,甚至會進一步細分,有網約車司機端、代價司機端等;當然,也可能按照業務子產品進行劃分,例如物流系統、支付系統、訂單系統等。

前後端:誰前?誰後?

在大部分公司裡,一個程式員的工作,可能會覆寫很多個産品端。例如一位前端的同僚,可能既要做使用者端的H5,也要做商家端的網頁,還要做平台營運背景的網頁。一個後端的同僚,工作也可能覆寫多個業務子產品。那他們的工作是怎麼劃分的呢?

産品經理懂點技術之:什麼是前後端,他們怎麼分工的?

簡單來說,對于程式猿哥哥來說,前端就是負責“使用者看得見”的内容,将UI稿轉換成網頁、APP、電腦軟體等,同時實作所有互動事件,例如使用者點選、滑動、拖動等操作。

前端又會根據實作的形式進行細分,常見的有:

  • 移動端APP:根據手機系統的不同,又細分為蘋果iOS APP、谷歌Android(安卓) APP,甚至一些非常小衆的手機系統APP,例如微軟的Windows Phone(簡稱WP)的APP。

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

另外在移動端,大家經常能聽到一個詞,叫做“原生”,所謂原生就是使用系統指定的程式設計語言開發的軟體,“非原生”,一般指套用一個網頁浏覽器,然後再在浏覽器内用網頁展示内容實作的軟體。

  • PC端軟體:例如我們常用的office系列軟體Word、Excel、PowerPoint;電腦版的QQ、微信、QQ音樂;上網頁用的Google Chrome浏覽器、Firefox浏覽器等,都是PC端的軟體。PC端也因系統的差異,前端也會進一步的細分。
  • 網頁web:網頁基于HTML(HyperText Markup Language,超文本标記性語言)實作,現在已經發展到了HTML5.0版本,也就是大家耳熟能詳的H5。web内容具有程式設計語言統一、與平台無關的特點,我們可以通過各種電腦網頁浏覽器、手機上的網頁浏覽器(UC、百度浏覽器等),甚至内嵌了網頁浏覽器的微信、QQ、支付寶等等,實作網頁的通路。得益于網頁内容程式設計語言統一的特點,網頁前端程式員一般能做非常多的事情,例如開發電腦端網頁、手機端網頁、微信公衆号H5等等。
  • 小程式:一種新生的事物,某些軟體當使用者規模足夠巨大時,就可以設定一套規範,然後讓前端程式員們直接為這些軟體,而不是不同的系統,開發“程式中的程式”,這樣的好處就是,使用者不再需要手機上裝各種各樣的APP,一個軟體裡就能解決大部分事情。現在主流的小程式,例如微信小程式、百度小程式、支付寶小程式等,都是基于HTML衍生發展出來的,開發過程與編寫HTML網頁相似,是以一些公司并沒有專門的小程式前端,而是由網頁web程式猿哥哥“被迫營業”同時從事小程式的開發。
目前很多公司推出的小程式,雖然都是基于HTML衍生出來的,但是各自衍生(魔改)方法不一樣,是以具體編寫時也有所差異,目前市面上有一些小程式代碼轉換工具,例如寫好一個微信小程式,用工具一轉,就能生成一個百度小程式。

相對于“使用者看得見”的前端,那使用者“看不見”的部分,就是由後端負責了,後端程式猿哥哥要負責業務邏輯的實作、訂單、使用者資料等資料的增删改查。

一款産品的後端,一般隻會用一種程式設計語言編寫,一些功能特别豐富的産品可能會用一種程式設計語言作為核心,另外用1-2種語言實作一些這類語言擅長的子產品,例如用Java做核心語言,但配套的資料平台用Python寫之類的。由于在同一款産品中後端程式設計語言不像前端一樣根據系統/裝置不同各種開花,是以後端程式猿哥哥就可以一個人負責多個業務子產品的後端編寫,甚至輪流負責不同子產品的編寫。

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

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

介紹完了前端後端分工内容的差別,那麼想區分一個bug到底歸誰,那就容易些了。如果是頁面樣式上的錯位、缺了或多了啥字段或子產品,某些按鍵或互動點了沒反應,就優先找對應内容的前端。

相對比前端的bug,後端bug展現形式就比較豐富:

  • 業務邏輯錯誤:例如建立訂單計算金額錯誤、優惠券是否能用判斷條件錯誤、訂單審批流程錯誤等等
  • 點了之後報錯:一個按鈕不是點了沒反應,而是點了就彈出一大堆英文的錯誤資訊,這種情況下一般可以先找後端看看問題
産品經理懂點技術之:什麼是前後端,他們怎麼分工的?
  • 404、500錯誤:這種有明顯數字代碼的錯誤,先找後端就沒錯了
産品經理懂點技術之:什麼是前後端,他們怎麼分工的?
産品經理懂點技術之:什麼是前後端,他們怎麼分工的?

這下子,小汪就明白了,原來前後端的程式猿哥哥們是這樣分工的,使用者可見的界面、進行的互動操作就是前端負責,業務的邏輯、流程、資料的處理就是後端的職責。