經(jīng)常會(huì)被剛?cè)胄械漠a(chǎn)品問到“做產(chǎn)品需不需要懂技術(shù)？”，我通常的回答是：從一個(gè)工程師的角度看, 根據(jù)以往合作的經(jīng)驗(yàn), pm懂技術(shù)還是很難能可貴的, 一方面大家容易在同一個(gè)語言環(huán)境內(nèi)對(duì)話, 二者大家都不用扯皮, pm不會(huì)不可理喻, eng不會(huì)瞞天過海, 三者我覺得這是很好的良性互動(dòng),是一種螺旋向上的趨勢(shì)。其實(shí)讓我回答這個(gè)問題還是蠻尷尬的，因?yàn)槲乙彩羌夹g(shù)小白，由于問的人太多，所以我整理了這份盡量通俗易懂的普及文，供如我一樣0技術(shù)基礎(chǔ)的產(chǎn)品補(bǔ)課。
0 什么是前端？什么是后端？
其實(shí)這個(gè)部分，元一沒有講的特別通俗易懂（大概是高手不屑于普及這種小白問題T.T），我倒是在知乎上看到一個(gè)很贊的說法：在你手機(jī)（電腦）上跑的代碼是前端，在機(jī)房里跑的代碼是后端。……太形象了！
說得正經(jīng)點(diǎn)：現(xiàn)在的網(wǎng)站都是MVC（Model View Controller）架構(gòu)，就是業(yè)務(wù)模型(model)－用戶界面(view)－控制器(controller)。這三個(gè)層次共同組建了一個(gè)網(wǎng)站。
MVC
業(yè)務(wù)模型（model）指的是數(shù)據(jù)和業(yè)務(wù)規(guī)則，就是在數(shù)據(jù)庫中存儲(chǔ)這些數(shù)據(jù)，并處理這些數(shù)據(jù)間的邏輯。
用戶界面（view）就是呈現(xiàn)在用戶眼前的這些界面，標(biāo)題在什么位置，用什么字體，右下角要放個(gè)什么圖片，之類的。
控制器（controller）處理用戶交互，從界面（view）讀取數(shù)據(jù)，向業(yè)務(wù)模型（model）發(fā)送數(shù)據(jù)。
前端工程師，一般負(fù)責(zé)VC的部分；后端工程師，則負(fù)責(zé)M的部分。但各個(gè)公司對(duì)前端和后端的工作劃分并不完全一致，有些工作前后端都可以做。
1 前端
1.1 前端主要語言
1）Html：全稱HyperText Markup Language，搭建網(wǎng)頁的基礎(chǔ)語言。文檔寫起來并不復(fù)雜，但是功能很強(qiáng)大，而且什么平臺(tái)都能用，什么電腦都能用。
2）CSS：但是想網(wǎng)頁更精美更酷炫，就需要用到CSS語言了。CSS能夠?qū)W(wǎng)頁中對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。
3）Javascript：如果想要網(wǎng)頁有更酷炫的交互，就要用到Javascript。它是通過嵌入到html中來實(shí)現(xiàn)自身功能，主要用于添加交互行為，可以在多平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）,還可以控制cookies，等等吧。
4）jQuery：這是一個(gè)時(shí)下最流行的Javascript庫，主要面向查詢（Query）。簡(jiǎn)單理解，就是javascript里面那些需要用一行行代碼實(shí)現(xiàn)的體力活，在jQuery里面可以直接打包成模塊，調(diào)取對(duì)應(yīng)的接口使用，解放了開發(fā)者更多的時(shí)間。這種模塊化的使用方式讓開發(fā)者可以很快就開發(fā)出酷炫的頁面。
5）Bootstrap：Bootstrap也是對(duì)Javascript進(jìn)行封裝，它在jQuery的基礎(chǔ)上進(jìn)行更加人性化的完善，其實(shí)就是更方便了。它有很多現(xiàn)成的組件，比如導(dǎo)航欄、下拉菜單、按鈕，都定義好了樣式和交互，直接成套拿來用就行了。
這么看上去，前端語言的內(nèi)在關(guān)系就比較好理解了，舉個(gè)栗子：好比一個(gè)互聯(lián)網(wǎng)產(chǎn)品就是一個(gè)妹紙，html是搭建了她的身體，這個(gè)是基礎(chǔ)（要先有個(gè)妹紙）；CSS是給她穿上漂亮衣服；Javascript是教會(huì)她化妝，先隔離后粉底，先眼線后睫毛；jQuery是把化妝進(jìn)行整合，主要負(fù)責(zé)實(shí)現(xiàn)“一個(gè)步驟無瑕底妝”；Bootstrap也是對(duì)化妝進(jìn)行整合，主要負(fù)責(zé)實(shí)現(xiàn)“一個(gè)步驟清純大眼妝”和“一個(gè)步驟性感唇妝”，漸漸地，html搭建出來的妹紙就變成女神了……
（我懷疑這么寫程序猿們會(huì)看不懂哈哈哈哈哈）
1.2 如何評(píng)估前端的能力？
此段完全copy元一的PPT,從初階到高階分別為：
?只會(huì)基本的HTML/CSS, 可以將設(shè)計(jì)圖轉(zhuǎn)化為HTML/CSS, 俗稱切圖
?懂一些Javascript，主要是使用現(xiàn)成的框架，jQuery，Bootstrap等等
?知道jQuery，Bootstrap的局限，在需要時(shí)可以直接編寫原生JS/CSS
?對(duì)JS/CSS非常了解，熱衷于利用瀏覽器的各種最新特性實(shí)現(xiàn)各種炫酷效果
?可以根據(jù)需要寫出封裝良好的JS類庫或者開發(fā)框架
恩，非技術(shù)出身的CEO們可以心里有譜了……
2 后端
2.1 后端語言
1）?C#/Java：這兩者都是名聲顯赫的程序設(shè)計(jì)語言，功能強(qiáng)大且完善。但入門難度也比較高，復(fù)雜。
2）PHP：PHP最早是Personal Home Page的縮寫（就是這么直白！任性！），后來更名為Hypertext Preprocessor，就是超文本預(yù)處理器。PHP的優(yōu)勢(shì)是可以被嵌入html語言，所以實(shí)用性強(qiáng)、入門簡(jiǎn)單、容易上手，但缺點(diǎn)同樣很多，因?yàn)槭情_源沒有標(biāo)準(zhǔn)框架，等等吧。
3）Ruby：Ruby是一種面向開發(fā)者的語言，語法簡(jiǎn)單（“懂英語的人都能學(xué)會(huì)”——張?jiān)唬⒅厝诵曰?，而不是一味從機(jī)器的角度著想。所以Ruby的優(yōu)點(diǎn)就是易懂易上手，開發(fā)效率高，但數(shù)據(jù)量大時(shí)性能不足。
4）Node.js：這是基于Javascript的一種語言，適合有前端基礎(chǔ)的人進(jìn)入后端使用；采用異步編程模型，處理高并發(fā)時(shí)有性能優(yōu)勢(shì)。
5）Lisp：號(hào)稱業(yè)界最強(qiáng)的編程語言沒有之一，更多是Geek和科學(xué)家們的鐘愛。有興趣可以去多了解一下，作為入門科普就不多研究了。
6）無后端：一些移動(dòng)應(yīng)用初期可以沒有后端，實(shí)現(xiàn)項(xiàng)目的快速啟動(dòng)。無后端（noBackend）致力于讓構(gòu)建一個(gè)應(yīng)用的過程變得更簡(jiǎn)單，實(shí)際上是通過前端代碼抽象成后端接口?？捎玫墓ぞ哂蠪acebook Parse, Google Firebase以及國(guó)內(nèi)的LeanCloud。
2.2 數(shù)據(jù)庫
數(shù)據(jù)庫是按照數(shù)據(jù)結(jié)構(gòu)對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)、組織和管理的庫。你可以簡(jiǎn)單地把數(shù)據(jù)庫想象成公司的文件柜，每個(gè)柜子里放不同的文件，通過柜子編號(hào)可以找到你要的資料；把資料放進(jìn)去時(shí)，也放到對(duì)應(yīng)編號(hào)的柜子里去。而在數(shù)據(jù)庫中，還涉及到數(shù)據(jù)的不同類型、數(shù)據(jù)間的映射關(guān)系等等的信息。
數(shù)據(jù)庫有很多種類型，常見的有ORACLE、DB2、SQL Server、Sybase、Informix、MySQL、VF、Access等等（是的，這些都是不同類型的數(shù)據(jù)庫），這里主要介紹的時(shí)MySQL和MongoDB。
1）MySQL：MySQL是一個(gè)關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。什么是關(guān)系型？就是說有關(guān)聯(lián)的數(shù)據(jù)是保存在同一個(gè)表內(nèi)，而不是把所有數(shù)據(jù)堆在一起，這樣查起來就很方便。MySQL的優(yōu)點(diǎn)是體積小、速度快、成本低，是很多中小型網(wǎng)站的首選。但是，關(guān)系型數(shù)據(jù)庫的缺點(diǎn)是在海量訪問并發(fā)和海量數(shù)據(jù)管理時(shí)的力不從心，而且對(duì)數(shù)據(jù)庫的升級(jí)和擴(kuò)展很麻煩，往往需要停機(jī)維護(hù)和數(shù)據(jù)遷移。這是令人難以忍受的。
2）MongoDB：MongoDB是一個(gè)基于分布式文檔存儲(chǔ)的數(shù)據(jù)庫，介于關(guān)系型數(shù)據(jù)庫和非關(guān)系型數(shù)據(jù)庫之間，他可以支持很松散的數(shù)據(jù)結(jié)構(gòu)，所以能夠支持較復(fù)雜的數(shù)據(jù)類型；同時(shí)又能支持關(guān)系型數(shù)據(jù)庫表單查詢的大部分功能，所以在一定程度上集成了兩者的優(yōu)點(diǎn)。
2.3 服務(wù)器如何辨別用戶是誰？
服務(wù)器辨別用戶是通過Cookie和Session實(shí)現(xiàn)的。
1）Cookie：Cookie是一種數(shù)據(jù)，它由服務(wù)器生成，發(fā)送到你的瀏覽器，然后由瀏覽器保存到本地的某個(gè)文件夾里，等你下次再登陸這個(gè)網(wǎng)站時(shí)，瀏覽器就會(huì)把你的Cookie發(fā)送給服務(wù)器，這時(shí)服務(wù)器就知道了“啊原來又是你丫”。一條Cookie的生命一般是一個(gè)輪回，就是當(dāng)你第二次登錄網(wǎng)站時(shí)，第一次登陸的那條Cookie會(huì)被覆蓋；但也可以指定周期，比如“一個(gè)月內(nèi)自動(dòng)登陸”這種情況……
2）Session：Session實(shí)際上是一種時(shí)間的概念，就是你打開一個(gè)網(wǎng)站到關(guān)閉這個(gè)網(wǎng)站之間的時(shí)間。這段時(shí)間里，你在網(wǎng)站上的動(dòng)作都被當(dāng)做Session保存在服務(wù)器中，比如說“返回上一個(gè)瀏覽頁面”這種動(dòng)作，就是由Session實(shí)現(xiàn)的。Session保存在服務(wù)器上，關(guān)閉了網(wǎng)站怎么辦？你的Session會(huì)被編上號(hào)，以SessionID的形式發(fā)送到瀏覽器，以Cookie的形式保存在本地，這就是Cookie和Session的親密合作。
當(dāng)然各個(gè)網(wǎng)站的策略不太一致，下次瀏覽某網(wǎng)站時(shí)，可以留意下自己的操作行為是如何被記錄的。
3 移動(dòng)開發(fā)
開發(fā)移動(dòng)應(yīng)用程序主要分為以下三種情況：
1）原生：指的是完全基于移動(dòng)平臺(tái)寫代碼（比如iOS平臺(tái)支持Xcode和Objective-C，安卓平臺(tái)支持Eclipse和Java），看上去外觀最好，用起來性能最佳，實(shí)現(xiàn)的功能最多，當(dāng)然也就比較費(fèi)工夫。適合對(duì)速度、性能特別敏感的應(yīng)用，如拍照、視頻類，通常開發(fā)周期為4-6周；
2）HTML5：使用標(biāo)準(zhǔn)的Web技術(shù)（通常是HTML5、JavaScript和CSS），可以只編寫一次就跨平臺(tái)運(yùn)行，更快做跨屏適配，效果很酷炫，但也有一些功能的局限，通常開發(fā)周期為1-2周；
3）混合式：就是將HTML5嵌入到原生器中，集成了以上兩者的優(yōu)點(diǎn)和缺點(diǎn)。適合已有web端產(chǎn)品，想以最低成本遷移到移動(dòng)端，通常開發(fā)周期為3-4周。
但是值得提醒的是：
懂了技術(shù)，不代表就能和程序員和諧相處。
如果不懂人情事故，就是程序員轉(zhuǎn)產(chǎn)品，也未必能和程序員打好交道。
大概就是這樣了。各位走過路過的大神：如有不妥之處，還請(qǐng)指正
