場(chǎng)景一：“這個(gè)需求做不了，你想其他產(chǎn)品方案吧”——其實(shí)是程序員覺(jué)得開(kāi)發(fā)起來(lái)太難或者太麻煩而糊弄產(chǎn)品經(jīng)理。在你轉(zhuǎn)身準(zhǔn)備離去的那刻，不巧你眼角的余光瞟到他輕蔑上揚(yáng)的嘴角：“憨憨”。場(chǎng)景二：“你一點(diǎn)技術(shù)都不懂，這個(gè)方案太奇葩，按照目前的技術(shù)框架無(wú)法實(shí)現(xiàn)，鍵盤(pán)給你，你來(lái)敲”——因?yàn)榇_實(shí)無(wú)法用技術(shù)實(shí)現(xiàn)，并向你投來(lái)鄙視的眼光，看著你默默走開(kāi)的背景，他緩緩的放下了雙手側(cè)舉的鍵盤(pán)。

有些朋友可能遇到過(guò)我在上方提到的兩種情況，這也是很多不懂技術(shù)的產(chǎn)品經(jīng)理會(huì)擔(dān)憂(yōu)的難題。要么程序員因?yàn)樘y或太麻煩而不想做需求，就欺負(fù)你不懂技術(shù)糊弄你；要么就是你提的需求太天馬行空，沒(méi)有考慮技術(shù)實(shí)現(xiàn)的可行性，落的被程序員鄙視的下場(chǎng)（可能還會(huì)被打）。這也是為什么我們經(jīng)常聽(tīng)到網(wǎng)上關(guān)于產(chǎn)品經(jīng)理和程序員之間的吐槽段子。

那么問(wèn)題來(lái)了，產(chǎn)品經(jīng)理到底要不要懂技術(shù)呢？應(yīng)該懂多少呢？個(gè)人認(rèn)為不需要深入到會(huì)寫(xiě)代碼，但要去了解技術(shù)，至少要知道技術(shù)實(shí)現(xiàn)的基本原理。產(chǎn)品經(jīng)理懂技術(shù)不僅能有利于自身的產(chǎn)品決策，而且在和程序員溝通需求方案的時(shí)候，你就會(huì)更容易理解程序員的意思，同時(shí)程序員也能夠很好的理解你說(shuō)的話(huà)。大大提高與程序員的溝通效率，從此媽媽再也不用擔(dān)心我被走夜路不安全了呢(#^.^#)

· 正 · 文 · 來(lái) · 啦 ·

接下來(lái)就是技術(shù)干貨，通俗易懂，讓零技術(shù)基礎(chǔ)的人看完后都能明白基本的技術(shù)實(shí)現(xiàn)原理。

本文就以一個(gè)簡(jiǎn)單的開(kāi)發(fā)技術(shù)架構(gòu)展開(kāi)來(lái)說(shuō)，如下圖：

• 第一層是產(chǎn)品展現(xiàn)在用戶(hù)眼前的樣子，有多種形態(tài)，一般稱(chēng)為“前端”或“終端”。

• 第二層是網(wǎng)關(guān)層，是后端與前端交互業(yè)務(wù)數(shù)據(jù)的中間層。

• 第三層是后端服務(wù)，由各種后端技術(shù)開(kāi)發(fā)完成。幾乎所有的數(shù)據(jù)處理邏輯都是由后端來(lái)完成，比如我們?cè)诋a(chǎn)品設(shè)計(jì)時(shí)定的登錄驗(yàn)證規(guī)則、手機(jī)號(hào)合法性等等

• 最底層是數(shù)據(jù)庫(kù)，可以理解為用來(lái)存儲(chǔ)數(shù)據(jù)、文件的倉(cāng)庫(kù)。

接下來(lái)分別講講每一層的含義和原理。

第一層：前端服務(wù)

前端服務(wù)就是產(chǎn)品最終展現(xiàn)在用戶(hù)眼前的樣子，有多種形態(tài)，比如APP、WEB前端（web網(wǎng)站—電腦上的網(wǎng)站，wap網(wǎng)站—手機(jī)上的網(wǎng)站）、PC客戶(hù)端、小程序、快應(yīng)用等等。

完成一個(gè)前端產(chǎn)品的步驟基本分為3大步：

1、畫(huà)頁(yè)面的樣式（樣子）：所有的頁(yè)面樣式都是前端開(kāi)發(fā)工程師畫(huà)上去的，雖然有一些前端框架可以直接用，但是頁(yè)面細(xì)節(jié)還是需要按照實(shí)際需求調(diào)整，比如頁(yè)面的布局、按鈕的顏色、柵格欄的間距、字體的大小等等；

2、頁(yè)面邏輯（邏輯）：一個(gè)前端頁(yè)面畫(huà)好之后，如果沒(méi)有寫(xiě)入邏輯，那只能算是一個(gè)靜態(tài)頁(yè)面，就好比是一張靜靜的圖片，什么動(dòng)效都沒(méi)有。如果我們想要頁(yè)面產(chǎn)生交互效果，比如點(diǎn)擊按鈕實(shí)現(xiàn)什么效果，輸入信息的驗(yàn)證、頁(yè)面之間的跳轉(zhuǎn)等等，就需要程序員寫(xiě)入大量的前端處理邏輯。

3、前后端交互（數(shù)據(jù)閉環(huán)）：頁(yè)面畫(huà)完了，邏輯也寫(xiě)好了，但是還差一個(gè)東西——數(shù)據(jù)！數(shù)據(jù)要從哪里來(lái)？比如點(diǎn)擊用戶(hù)頭像，進(jìn)入該用戶(hù)的個(gè)人信息頁(yè)面，用戶(hù)信息這個(gè)數(shù)據(jù)從哪里來(lái)？這就是由后端服務(wù)提供的。

前端向后端服務(wù)發(fā)起一個(gè)HTTP請(qǐng)求去問(wèn)后端要數(shù)據(jù)，后端接受請(qǐng)求后就向前端提供對(duì)應(yīng)的數(shù)據(jù)。同樣的，如果前端修改一個(gè)信息后點(diǎn)擊提交，也會(huì)發(fā)起一個(gè)HTTP請(qǐng)求給后端，由后端處理完之后再反饋給前端。

剛才提到了，產(chǎn)品可以呈現(xiàn)為多種形態(tài)，接下來(lái)就講講常見(jiàn)的幾種：

一、APP

目前市場(chǎng)上APP主要分為IOS版本和安卓版本。由于手機(jī)操作系統(tǒng)的不同，程序員寫(xiě)代碼時(shí)使用的語(yǔ)言也不同，安卓APP用的主流語(yǔ)言是JAVA，IOS則是用object C開(kāi)發(fā)。這就是為什么公司里面有安卓工程師和IOS工程師的區(qū)分。當(dāng)然也有牛逼哥拉斯的程序員一人同時(shí)干安卓和IOS的活，不過(guò)頭發(fā)可能掉的會(huì)更快。

安卓開(kāi)發(fā)：安卓機(jī)上的APP剛才說(shuō)是主要開(kāi)發(fā)語(yǔ)言是JAVA，JAVA語(yǔ)言主要是處理頁(yè)面邏輯的，畫(huà)頁(yè)面樣式還得需要一些布局文件，然后去調(diào)整細(xì)節(jié)。

這里要注意，由于市面上安卓機(jī)型眾多，屏幕大小也不同（因?yàn)榘沧肯到y(tǒng)是開(kāi)源的，很多手機(jī)廠(chǎng)商都會(huì)定制屬于自己的安卓操作系統(tǒng)，比如錘子、小米、華為等）。所以安卓工程師需要花費(fèi)大部分時(shí)間去做不同屏幕的適配、不同機(jī)型版本的兼容。這也是PM在推進(jìn)開(kāi)發(fā)過(guò)程中需要注意的一點(diǎn)。

IOS開(kāi)發(fā)：IOS系統(tǒng)是蘋(píng)果爸爸自己做的，且不是開(kāi)源的。因?yàn)镮OS開(kāi)發(fā)者只能在蘋(píng)果生態(tài)的環(huán)境內(nèi)進(jìn)行開(kāi)發(fā)工作，而且蘋(píng)果的開(kāi)發(fā)者賬號(hào)是收費(fèi)的。這就是為什么公司里的IOS開(kāi)發(fā)工程師用的是清一色的蘋(píng)果電腦。另外你的產(chǎn)品想上架在APP STORE里面，還得給蘋(píng)果爸爸交所謂的“保護(hù)費(fèi)”。

二、WEB端

我們?nèi)粘Ｄ苡脼g覽器打開(kāi)的都屬于WEB端。用電腦瀏覽器打開(kāi)的是web網(wǎng)頁(yè)，用手機(jī)瀏覽器打開(kāi)的是wap網(wǎng)頁(yè)，包括你用微信、支付寶掃碼之后打開(kāi)的頁(yè)面（小程序除外）?？傮w來(lái)說(shuō)WEB端的使用率其實(shí)比APP還高。WEB端的實(shí)現(xiàn)分為3部分：

• 最基本的HTML頁(yè)面布局。全稱(chēng)Hypertext Markup Language，也就是超文本鏈接標(biāo)志語(yǔ)言。

• CSS層疊樣式表。它是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）的計(jì)算機(jī)語(yǔ)言。

• JavaScript，也就是程序員嘴里常常提到的“JS”。注意JavaScript和JAVA是兩種語(yǔ)言，不能混為一談

第1部分：HTML頁(yè)面。

大家可以這么理解，我們?cè)诰W(wǎng)站上看到的是HTML頁(yè)面，它是由各種HTML標(biāo)簽組成的，開(kāi)頭和結(jié)尾分別是和這樣的標(biāo)簽。

我們看到的內(nèi)容都被寫(xiě)在中的標(biāo)簽里面。如下圖：

網(wǎng)站中的輸入框，都是被寫(xiě)在標(biāo)簽里面的，如下圖：

第2部分：CSS樣式表。

它是用于控制和渲染HTML標(biāo)簽的樣式。CSS就類(lèi)似女生的化妝品，有的女生化妝就是仙女，不化妝就是路人甲，同樣，如果一個(gè)HTML如果沒(méi)有CSS控制樣式，那頁(yè)面就會(huì)丑的讓人無(wú)法直視。但有所不同的是，有的女生天生麗質(zhì)不需要化妝就很好看，但是HTML不化妝就慘不忍睹，你看到的就是參差不齊，亂七八糟的框架，毫無(wú)美感。所以HTML是網(wǎng)頁(yè)的結(jié)構(gòu)框架，而CSS用于包裝美化網(wǎng)頁(yè)，控制網(wǎng)頁(yè)布局，字體，顏色、背景、模塊間距以及其他效果等等

最后就是JavaScript。

它是最核心的一個(gè)部分。JavaScript的主要功能不僅可以控制頁(yè)面邏輯，還負(fù)責(zé)連接前后端的交互。前端發(fā)起HTTP請(qǐng)求到后端請(qǐng)求數(shù)據(jù)，完成填寫(xiě)數(shù)據(jù)后發(fā)起HTTP請(qǐng)求到后端提交數(shù)據(jù)，這些都是由JavaScript來(lái)完成的。

這么說(shuō)吧，朋友們，沒(méi)有JavaScript，只有HTML+CSS樣式，頂多就是畫(huà)布上安靜的美女。但是有了JavaScript，那就是在你面前活生生的女神。試想一下，你約女神去吃飯，結(jié)果來(lái)的只是她的一張自拍照，會(huì)是什么感覺(jué).....

另外我們聽(tīng)到程序員討論時(shí)會(huì)提到的angularJS（被封裝過(guò)的JavaScript），VUE（被封裝過(guò)的HTML+CSS樣式），常常弄的我們一頭霧水。作為PM，我們不用知道其具體實(shí)現(xiàn)原理，只需要把它們理解為：被封裝過(guò)的更牛逼的語(yǔ)言！就類(lèi)似模板一樣，程序員可以直接拿來(lái)用。簡(jiǎn)單說(shuō)，封裝邏輯框架就是為了省代碼，提高開(kāi)發(fā)效率。

三、小程序

拿微信小程序來(lái)說(shuō)，小程序是微信出的一款基于微信內(nèi)的應(yīng)用，但它不是一個(gè)應(yīng)用程序，是微信基于網(wǎng)頁(yè)端開(kāi)發(fā)語(yǔ)言（CSS、JavaScript）拓展封裝而來(lái)。把原來(lái)的CSS樣式表、JavaScript進(jìn)行封裝，然后基于微信APP的功能提供一些可用的接口供開(kāi)發(fā)人員開(kāi)發(fā)，開(kāi)發(fā)完成后提交給微信，微信進(jìn)行打包處理呈現(xiàn)給最終用戶(hù)，就是我們?cè)谖⑿胖锌吹降男〕绦颉?/p>

第二層：API網(wǎng)關(guān)和負(fù)載均衡

網(wǎng)關(guān)一詞較早出現(xiàn)在網(wǎng)絡(luò)設(shè)備里面，比如兩個(gè)相互獨(dú)立的局域網(wǎng)段之間通過(guò)路由器或者橋接設(shè)備進(jìn)行通信， 這中間的路由或者橋接設(shè)備我們稱(chēng)之為網(wǎng)關(guān)。

而API網(wǎng)關(guān)則是將各系統(tǒng)對(duì)外暴露的服務(wù)聚合起來(lái)，所有要調(diào)用這些服務(wù)的系統(tǒng)都需要通過(guò)API網(wǎng)關(guān)進(jìn)行訪(fǎng)問(wèn)，基于這種方式網(wǎng)關(guān)可以對(duì)API（接口）進(jìn)行統(tǒng)一管控，例如：認(rèn)證、鑒權(quán)、流量控制、協(xié)議轉(zhuǎn)換、監(jiān)控等等。

這里只說(shuō)說(shuō)我們常見(jiàn)的面向Web或者App的場(chǎng)景，在物理形態(tài)上類(lèi)似前后端分離，前端應(yīng)用通過(guò) API（接口）調(diào)用后端服務(wù)，需要網(wǎng)關(guān)具有認(rèn)證、鑒權(quán)、緩存、監(jiān)控告警等功能。

關(guān)于負(fù)載均衡原理網(wǎng)上的專(zhuān)業(yè)詞匯解釋有很多，也很詳細(xì)。但是不了解技術(shù)的人往往看完還是一頭霧水。我們只需要這樣理解：原本是一臺(tái)服務(wù)器干活，然后工作量增加產(chǎn)生負(fù)載，就平均分?jǐn)偨o多個(gè)服務(wù)器，從而協(xié)同完成工作任務(wù)。

第三層：后端服務(wù)

前端服務(wù)是整個(gè)產(chǎn)品的表現(xiàn)層，后端服務(wù)就是整個(gè)產(chǎn)品底層邏輯最核心的地方，負(fù)責(zé)處理業(yè)務(wù)邏輯，數(shù)據(jù)存取，然后提供接口給前端服務(wù)進(jìn)行調(diào)用。

這個(gè)時(shí)候有朋友就會(huì)問(wèn)：你剛講的，前端服務(wù)會(huì)處理各種邏輯，那為什么還要后端服務(wù)來(lái)處理呢？因?yàn)榍岸颂幚硎遣话踩?，前端是直接暴露給用戶(hù)的，前端程序中的JavaScript、HTML、CSS代碼都會(huì)被加載到用戶(hù)使用的瀏覽器中，你的數(shù)據(jù)就很容易被懂技術(shù)的不法分子篡改、利用。而后端服務(wù)對(duì)于用戶(hù)來(lái)說(shuō)是不可見(jiàn)的，它只會(huì)接受數(shù)據(jù)請(qǐng)求，返回結(jié)果，但是用戶(hù)就無(wú)法得知它是如何處理數(shù)據(jù)的。

就拿最常見(jiàn)的登錄功能來(lái)說(shuō)，前端服務(wù)給用戶(hù)展現(xiàn)一個(gè)登錄的頁(yè)面，用戶(hù)輸入賬號(hào)密碼，點(diǎn)擊登錄后，前端服務(wù)就會(huì)發(fā)起HTTP請(qǐng)求向后端提交你的賬號(hào)密碼，這時(shí)候只有你自己和后端服務(wù)器知道你輸入了什么，后端服務(wù)器就會(huì)在數(shù)據(jù)庫(kù)里的一大推賬號(hào)密碼中進(jìn)行匹配，然后把結(jié)果返回給前端。如果匹配成功，說(shuō)明你是已注冊(cè)用戶(hù)，就會(huì)讓你登錄成功，否則就登錄失敗。

我們常說(shuō)“要調(diào)用后端的接口”，其中的接口就是由后端服務(wù)開(kāi)發(fā)的，說(shuō)簡(jiǎn)單點(diǎn)就是打開(kāi)一個(gè)端口，接收各種數(shù)據(jù)、處理，再把處理結(jié)果返回給你。你可以理解為餐廳里面的服務(wù)員，你要點(diǎn)菜直接叫“服務(wù)員我要點(diǎn)菜...”。服務(wù)員負(fù)責(zé)記錄你要點(diǎn)的菜，然后等后廚做好之后再把菜給你端上來(lái)，至于后廚的菜到底是怎么做出來(lái)的，用的色拉油還是地溝油你完全不知道，你只管吃就好了。

第四層：數(shù)據(jù)褲

什么是數(shù)據(jù)庫(kù)？前端負(fù)責(zé)提交和拿數(shù)據(jù)，后端負(fù)責(zé)處理數(shù)據(jù)。那么，當(dāng)數(shù)據(jù)被前端提交給后端，后端服務(wù)處理數(shù)據(jù)，數(shù)據(jù)再被存在庫(kù)房里面，這個(gè)庫(kù)房就叫數(shù)據(jù)庫(kù)。數(shù)據(jù)庫(kù)分很多種類(lèi)型，根據(jù)不同的數(shù)據(jù)場(chǎng)景來(lái)存儲(chǔ)不同的數(shù)據(jù)，至于存哪些數(shù)據(jù)是由后端服務(wù)決定的。

最后：打包和發(fā)布

“趕緊打包，打好包就提測(cè)了，測(cè)試人員在催了”“沒(méi)有bug了吧，沒(méi)有我就打正式包了，準(zhǔn)備正式提交發(fā)版了哦”

當(dāng)開(kāi)發(fā)人員把PM設(shè)計(jì)的產(chǎn)品開(kāi)發(fā)完成后，是不能直接發(fā)布到服務(wù)器上的，需要經(jīng)過(guò)編譯、打包，也就是把開(kāi)發(fā)語(yǔ)言編譯成機(jī)器可以識(shí)別的語(yǔ)言，然后把所有文件放在一個(gè)可運(yùn)行的軟件包里面才行。當(dāng)然，一個(gè)產(chǎn)品在正式上線(xiàn)之前會(huì)放到開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境，當(dāng)在這兩個(gè)環(huán)境下測(cè)試都沒(méi)有問(wèn)題之后，才能發(fā)布到正式的生產(chǎn)環(huán)境。有時(shí)候到正式環(huán)境之后，為了保險(xiǎn)起見(jiàn)，測(cè)試人員還會(huì)再測(cè)一輪，因?yàn)椴煌沫h(huán)境可能引起不同的問(wèn)題。

總結(jié)

以上就是針對(duì)開(kāi)發(fā)流程的簡(jiǎn)單概述，真實(shí)情況當(dāng)然要復(fù)雜的多。所以我們?cè)谄綍r(shí)的工作中應(yīng)該多和程序員交流，在與他們的溝通中，我們自然也會(huì)增加對(duì)技術(shù)知識(shí)的理解。也許你還會(huì)驚喜的發(fā)現(xiàn)，他們也有可愛(ài)有趣的一面。

除此之外，在工作之余，產(chǎn)品經(jīng)理也要多去看看技術(shù)相關(guān)方面的書(shū)籍和資料，通過(guò)這種方式多去了解一些技術(shù)方面的知識(shí)。當(dāng)我們了解的更多，設(shè)計(jì)產(chǎn)品的時(shí)候，我們就會(huì)在產(chǎn)品設(shè)計(jì)初期就把一些目前無(wú)法實(shí)現(xiàn)的功能給換一種方式實(shí)現(xiàn)。

本文由作者@Zss_Zhou 在PMCAFF社區(qū)發(fā)布，轉(zhuǎn)載請(qǐng)注明作者及出處。