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

一、前端工程師的技術棧

前端工程師的技術棧：

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

1.1 硬技能

HTML和CSS是標記類語言，這兩類是Domain Specific Language，領域特定語言。

JavaScript與前兩者性質不同，其本質是一門編程語言。

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

1.2 軟技能

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

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

其實也就是性能。

我們分點解釋上述三點。

為何性能至關重要？

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

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

以下是兩個案例研究，顯示了低性能會對業務目標產生不利影響：

• BBC 發現其網站的加載時間每增加一秒，便會多失去 10% 的用戶。
• DoubleClick by Google 發現，如果頁面加載時間超過 3 秒，53% 的移動網站訪問活動將遭到拋棄。

1.3 擴展技能

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

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

二、前后端分離

原始的前后端耦合的串行開發流程已經不能滿足Web產品快速的迭代需求，Web開發者開始嘗試在開發、測試和部署等各個環節尋求更高效的協作方式。所以，有了前后端分離。

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

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

我們分別來看看，原始的前后端耦合的串行開發，已經前后端分離后的開發模式。

2.1 前后端耦合的串行開發

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

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

2.2 前后端分離的開發模式

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

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

2.2.1 開發

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

靜態資源指的JavaScript、CSS、圖片等，這類資源在瀏覽器的呈現方式是靜態的，不需要服務器做任何處理。動態資源指的是HTML模版。

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

2.2.2 測試

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

2.2.3 部署

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

三、總結

關于產品經理需不需要懂技術，這個問題已經被討論過無數次了。

往小了說，作為產品經理，當用戶反饋問題的時候，不懂技術的產品經理，可能連定位問題都會很困難，找不到關鍵人，如何快速解決問題呢？

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

所以，我個人覺得，沒在用產品經理不需要懂技術，只需要設計出精美的產品即可，這種話來敷衍自己，不懂技術，在與研發討論功能實現的時候，連插話的勇氣都不會有的（相信我

參考：

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

本文由 @一顆西蘭花 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議