廣州熱線

原標(biāo)題：產(chǎn)品經(jīng)理需要了解的前后端知識點

作為一名技術(shù)產(chǎn)品經(jīng)理，了解前后端概念是基礎(chǔ)，因為只有了解了這些基礎(chǔ)，作為產(chǎn)品經(jīng)理，你才不會遇到一個明明是前端問題，但是你去和后端工程師溝通，這個時候，你能得到的不是答案，而是白眼。

一、前端工程師的技術(shù)棧

前端工程師的技術(shù)棧：

• 硬技能：HTML/CSS/Java。這3項是前端工程師必備技能。
• 軟技能：用戶體驗。
• 擴展技能：Node.js。

HTML和CSS是標(biāo)記類語言，這兩類是DomainSpecificLanguage，領(lǐng)域特定語言。

Java與前兩者性質(zhì)不同，其本質(zhì)是一門編程語言。

這三門語言，相互耦合，并非獨立。CSS必須與HTML配合，Java邏輯需借助HTML和CSS直觀地展示給用戶。

1.2軟技能

前端工程師是直接面向用戶的，良好的用戶體驗是一個Web產(chǎn)品的基本要素。此處我們討論的用戶體驗并非交互方案或視覺設(shè)計，這些事是UI、UE的工作。我們討論的是以下幾點：

• 保證內(nèi)容的快速展示，減少用戶等待時間
• 保證操作的流暢度
• 如果是移動設(shè)備，盡量減少設(shè)備的耗電量

其實也就是性能。

我們分點解釋上述三點。

為何性能至關(guān)重要？

性能在任何在線業(yè)務(wù)的成功方面都扮演重要角色。以下是一些案例研究，顯示了性能出色的網(wǎng)站與性能較差的網(wǎng)站相比，如何更好地與用戶互動并留住用戶：

• Pinterest的搜索引擎流量和注冊人數(shù)增長15%，得益于其感知等待時間減少40%。
• COOK的轉(zhuǎn)化率提升7%、跳出率下降7%，且每次會話瀏覽頁數(shù)增加10%，得益于其頁面平均加載時間減少850毫秒。

以下是兩個案例研究，顯示了低性能會對業(yè)務(wù)目標(biāo)產(chǎn)生不利影響：

• BBC發(fā)現(xiàn)其網(wǎng)站的加載時間每增加一秒，便會多失去10%的用戶。
• DoubleClickbyGoogle發(fā)現(xiàn)，如果頁面加載時間超過3秒，53%的移動網(wǎng)站訪問活動將遭到拋棄。

我們說Node.js是擴展技能，不是說Node.js本身，而是指以Node.js為代表的Web服務(wù)器端知識。

綜上，以下是前端工程師的職責(zé)能力范疇

二、前后端分離

原始的前后端耦合的串行開發(fā)流程已經(jīng)不能滿足Web產(chǎn)品快速的迭代需求，Web開發(fā)者開始嘗試在開發(fā)、測試和部署等各個環(huán)節(jié)尋求更高效的協(xié)作方式。所以，有了前后端分離。

前后端分離指的是通過將前端工程師與后端工程師進行明確、合理的分工，改善前后端協(xié)作中拖慢開發(fā)進度的環(huán)節(jié)，提高拱卒效率。前后端分離的核心是解耦。從開發(fā)、測試以及部署這3個角度開，前后端分離對工作效率的提升如下：

• 開發(fā)角度。實現(xiàn)并行開發(fā)，縮短開發(fā)周期
• 測試角度。分離使得前后端工程師更快速、精準(zhǔn)地對問題進行定位
• 部署角度。分離將靜態(tài)文件和動態(tài)文件分離部署并結(jié)合回滾策略，簡化了部署流程，增強了應(yīng)用程序的健壯性。

我們分別來看看，原始的前后端耦合的串行開發(fā)，已經(jīng)前后端分離后的開發(fā)模式。

2.1前后端耦合的串行開發(fā)

原始的開發(fā)模式，前端開發(fā)主要工作是將UI設(shè)計稿試用HTML和CSS進行還原，對于Java的開發(fā)頂多是實現(xiàn)一些動畫效果，業(yè)務(wù)邏輯基本不涉及。然后，前端工程師將開發(fā)完成的demo交付給后端工程師，后端工程師做的第一件工作就是將demo代碼中的HTML和CSS套入服務(wù)器模版引擎中，俗稱“套模版”，然后在此基礎(chǔ)上編寫客戶端的Java業(yè)務(wù)邏輯。

但是這種協(xié)同工作模式的開發(fā)效率是非常低下的。后端的工作，只有等待前端完成了之后才可以開展。

2.2前后端分離的開發(fā)模式

合理的分工是前后端分離的第一步，也是后續(xù)各種優(yōu)化方案的基礎(chǔ)。團隊人員按智能分為前端工程師和后端工程師。對于前端工程師來說，后端工程師的唯一產(chǎn)出就是數(shù)據(jù)，包括用于服務(wù)器渲染HTML模版的初始數(shù)據(jù)和客戶端請求返回的數(shù)據(jù)。

明確了各自的分工后，我們分別從開發(fā)、測試和部署3個方面分析前后端分離要解決哪些問題。

2.2.1開發(fā)

開發(fā)階段前后端分離要解決的問題可以按照資源類型分為兩種：靜態(tài)資源的處理和動態(tài)資源的處理。

靜態(tài)資源指的Java、CSS、圖片等，這類資源在瀏覽器的呈現(xiàn)方式是靜態(tài)的，不需要服務(wù)器做任何處理。動態(tài)資源指的是HTML模版。

靜態(tài)資源的處理相對簡單，因為這類文件不依賴任何服務(wù)器環(huán)境，只需要在瀏覽器里解析即可。

2.2.2測試

測試分為兩個階段，第一個階段是前后端工程師測試，這個階段前后端工程師的測試是獨立的，各自的測試流程和結(jié)果不會影響對方。第二個階段是集成測試，這個階段前后端的代碼進行整合。

2.2.3部署

前后端分離在部署階段要解決的問題是靜態(tài)資源和動態(tài)資源的分離部署。

三、總結(jié)

關(guān)于產(chǎn)品經(jīng)理需不需要懂技術(shù)，這個問題已經(jīng)被討論過無數(shù)次了。

往小了說，作為產(chǎn)品經(jīng)理，當(dāng)用戶反饋問題的時候，不懂技術(shù)的產(chǎn)品經(jīng)理，可能連定位問題都會很困難，找不到關(guān)鍵人，如何快速解決問題呢？

往大了說，我們能夠叫上名的世界級Top產(chǎn)品經(jīng)理，張小龍、喬布斯、扎克伯格、周鴻祎這些哪個不是技術(shù)背景的？

所以，我個人覺得，沒在用產(chǎn)品經(jīng)理不需要懂技術(shù)，只需要設(shè)計出精美的產(chǎn)品即可，這種話來敷衍自己，不懂技術(shù)，在與研發(fā)討論功能實現(xiàn)的時候，連插話的勇氣都不會有的（相信我

參考：

1. https://developers.google.com/web/fundamentals/performance/why-performance-matters?hl=zh-cn
2. 前端工程化：體系設(shè)計與實踐

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

題圖來自Unsplash，基于CC0協(xié)議