經常會被剛入行的產品問到“做產品需不需要懂技術？”，我通常的回答是：從一個工程師的角度看, 根據以往合作的經驗, pm懂技術還是很難能可貴的, 一方面大家容易在同一個語言環境內對話, 二者大家都不用扯皮, pm不會不可理喻, eng不會瞞天過海, 三者我覺得這是很好的良性互動,是一種螺旋向上的趨勢。其實讓我回答這個問題還是蠻尷尬的，因為我也是技術小白，由于問的人太多，所以我整理了這份盡量通俗易懂的普及文，供如我一樣0技術基礎的產品補課。

0 什么是前端？什么是后端？

其實這個部分，元一沒有講的特別通俗易懂（大概是高手不屑于普及這種小白問題T.T），我倒是在知乎上看到一個很贊的說法：在你手機（電腦）上跑的代碼是前端，在機房里跑的代碼是后端。……太形象了！

說得正經點：現在的網站都是MVC（Model View Controller）架構，就是業務模型(model)－用戶界面(view)－控制器(controller)。這三個層次共同組建了一個網站。

MVC

業務模型（model）指的是數據和業務規則，就是在數據庫中存儲這些數據，并處理這些數據間的邏輯。

用戶界面（view）就是呈現在用戶眼前的這些界面，標題在什么位置，用什么字體，右下角要放個什么圖片，之類的。

控制器（controller）處理用戶交互，從界面（view）讀取數據，向業務模型（model）發送數據。

前端工程師，一般負責VC的部分；后端工程師，則負責M的部分。但各個公司對前端和后端的工作劃分并不完全一致，有些工作前后端都可以做。

1 前端

1.1 前端主要語言

1）Html：全稱HyperText Markup Language，搭建網頁的基礎語言。文檔寫起來并不復雜，但是功能很強大，而且什么平臺都能用，什么電腦都能用。

2）CSS：但是想網頁更精美更酷炫，就需要用到CSS語言了。CSS能夠對網頁中對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言。

3）Javascript：如果想要網頁有更酷炫的交互，就要用到Javascript。它是通過嵌入到html中來實現自身功能，主要用于添加交互行為，可以在多平臺下運行（如Windows、Linux、Mac、Android、iOS等）,還可以控制cookies，等等吧。

4）jQuery：這是一個時下最流行的Javascript庫，主要面向查詢（Query）。簡單理解，就是javascript里面那些需要用一行行代碼實現的體力活，在jQuery里面可以直接打包成模塊，調取對應的接口使用，解放了開發者更多的時間。這種模塊化的使用方式讓開發者可以很快就開發出酷炫的頁面。

5）Bootstrap：Bootstrap也是對Javascript進行封裝，它在jQuery的基礎上進行更加人性化的完善，其實就是更方便了。它有很多現成的組件，比如導航欄、下拉菜單、按鈕，都定義好了樣式和交互，直接成套拿來用就行了。

這么看上去，前端語言的內在關系就比較好理解了，舉個栗子：好比一個互聯網產品就是一個妹紙，html是搭建了她的身體，這個是基礎（要先有個妹紙）；CSS是給她穿上漂亮衣服；Javascript是教會她化妝，先隔離后粉底，先眼線后睫毛；jQuery是把化妝進行整合，主要負責實現“一個步驟無瑕底妝”；Bootstrap也是對化妝進行整合，主要負責實現“一個步驟清純大眼妝”和“一個步驟性感唇妝”，漸漸地，html搭建出來的妹紙就變成女神了……

（我懷疑這么寫程序猿們會看不懂哈哈哈哈哈）

1.2 如何評估前端的能力？

此段完全copy元一的PPT,從初階到高階分別為：

?只會基本的HTML/CSS, 可以將設計圖轉化為HTML/CSS, 俗稱切圖

?懂一些Javascript，主要是使用現成的框架，jQuery，Bootstrap等等

?知道jQuery，Bootstrap的局限，在需要時可以直接編寫原生JS/CSS

?對JS/CSS非常了解，熱衷于利用瀏覽器的各種最新特性實現各種炫酷效果

?可以根據需要寫出封裝良好的JS類庫或者開發框架

恩，非技術出身的CEO們可以心里有譜了……

2 后端

2.1 后端語言

1）?C#/Java：這兩者都是名聲顯赫的程序設計語言，功能強大且完善。但入門難度也比較高，復雜。

2）PHP：PHP最早是Personal Home Page的縮寫（就是這么直白！任性！），后來更名為Hypertext Preprocessor，就是超文本預處理器。PHP的優勢是可以被嵌入html語言，所以實用性強、入門簡單、容易上手，但缺點同樣很多，因為是開源沒有標準框架，等等吧。

3）Ruby：Ruby是一種面向開發者的語言，語法簡單（“懂英語的人都能學會”——張元一），注重人性化，而不是一味從機器的角度著想。所以Ruby的優點就是易懂易上手，開發效率高，但數據量大時性能不足。

4）Node.js：這是基于Javascript的一種語言，適合有前端基礎的人進入后端使用；采用異步編程模型，處理高并發時有性能優勢。

5）Lisp：號稱業界最強的編程語言沒有之一，更多是Geek和科學家們的鐘愛。有興趣可以去多了解一下，作為入門科普就不多研究了。

6）無后端：一些移動應用初期可以沒有后端，實現項目的快速啟動。無后端（noBackend）致力于讓構建一個應用的過程變得更簡單，實際上是通過前端代碼抽象成后端接口。可用的工具有Facebook Parse, Google Firebase以及國內的LeanCloud。

2.2 數據庫

數據庫是按照數據結構對數據進行存儲、組織和管理的庫。你可以簡單地把數據庫想象成公司的文件柜，每個柜子里放不同的文件，通過柜子編號可以找到你要的資料；把資料放進去時，也放到對應編號的柜子里去。而在數據庫中，還涉及到數據的不同類型、數據間的映射關系等等的信息。

數據庫有很多種類型，常見的有ORACLE、DB2、SQL Server、Sybase、Informix、MySQL、VF、Access等等（是的，這些都是不同類型的數據庫），這里主要介紹的時MySQL和MongoDB。

1）MySQL：MySQL是一個關系型數據庫管理系統。什么是關系型？就是說有關聯的數據是保存在同一個表內，而不是把所有數據堆在一起，這樣查起來就很方便。MySQL的優點是體積小、速度快、成本低，是很多中小型網站的首選。但是，關系型數據庫的缺點是在海量訪問并發和海量數據管理時的力不從心，而且對數據庫的升級和擴展很麻煩，往往需要停機維護和數據遷移。這是令人難以忍受的。

2）MongoDB：MongoDB是一個基于分布式文檔存儲的數據庫，介于關系型數據庫和非關系型數據庫之間，他可以支持很松散的數據結構，所以能夠支持較復雜的數據類型；同時又能支持關系型數據庫表單查詢的大部分功能，所以在一定程度上集成了兩者的優點。

2.3 服務器如何辨別用戶是誰？

服務器辨別用戶是通過Cookie和Session實現的。

1）Cookie：Cookie是一種數據，它由服務器生成，發送到你的瀏覽器，然后由瀏覽器保存到本地的某個文件夾里，等你下次再登陸這個網站時，瀏覽器就會把你的Cookie發送給服務器，這時服務器就知道了“啊原來又是你丫”。一條Cookie的生命一般是一個輪回，就是當你第二次登錄網站時，第一次登陸的那條Cookie會被覆蓋；但也可以指定周期，比如“一個月內自動登陸”這種情況……

2）Session：Session實際上是一種時間的概念，就是你打開一個網站到關閉這個網站之間的時間。這段時間里，你在網站上的動作都被當做Session保存在服務器中，比如說“返回上一個瀏覽頁面”這種動作，就是由Session實現的。Session保存在服務器上，關閉了網站怎么辦？你的Session會被編上號，以SessionID的形式發送到瀏覽器，以Cookie的形式保存在本地，這就是Cookie和Session的親密合作。

當然各個網站的策略不太一致，下次瀏覽某網站時，可以留意下自己的操作行為是如何被記錄的。

3 移動開發

開發移動應用程序主要分為以下三種情況：

1）原生：指的是完全基于移動平臺寫代碼（比如iOS平臺支持Xcode和Objective-C，安卓平臺支持Eclipse和Java），看上去外觀最好，用起來性能最佳，實現的功能最多，當然也就比較費工夫。適合對速度、性能特別敏感的應用，如拍照、視頻類，通常開發周期為4-6周；

2）HTML5：使用標準的Web技術（通常是HTML5、JavaScript和CSS），可以只編寫一次就跨平臺運行，更快做跨屏適配，效果很酷炫，但也有一些功能的局限，通常開發周期為1-2周；

3）混合式：就是將HTML5嵌入到原生器中，集成了以上兩者的優點和缺點。適合已有web端產品，想以最低成本遷移到移動端，通常開發周期為3-4周。

但是值得提醒的是：

懂了技術，不代表就能和程序員和諧相處。

如果不懂人情事故，就是程序員轉產品，也未必能和程序員打好交道。

大概就是這樣了。各位走過路過的大神：如有不妥之處，還請指正