產(chǎn)品經(jīng)理從0到1:不懂技術(shù)也能愉快地與開發(fā)相處

30 評論 48753 瀏覽 835 收藏 13 分鐘

這篇文的起因來自NEXT主辦的keynote,主講是墨刀的張元一。聽完照著筆記梳理了下這次演講的邏輯,基本可以給0基礎(chǔ)的產(chǎn)品科普下技術(shù)常識。但邀請程序員來科普有兩大問題:一是有些入門門檻,小白問題被生生忽略了(也可能是我太弱了T.T);二是表述能力短板,后來我整理筆記時,發(fā)現(xiàn)大神的思路其實(shí)很清晰,演講時硬是沒聽出來也是醉了T.T

感謝大神的分享,按照大神的分享框架,我又補(bǔ)充了一些資料,整理了這份盡量通俗易懂的普及文,供如我一樣0技術(shù)基礎(chǔ)的產(chǎn)品補(bǔ)課。

0 什么是前端?什么是后端?

其實(shí)這個部分,元一沒有講的特別通俗易懂(大概是高手不屑于普及這種小白問題T.T),我倒是在知乎上看到一個很贊的說法:在你手機(jī)(電腦)上跑的代碼是前端,在機(jī)房里跑的代碼是后端?!蜗罅耍?/p>

說得正經(jīng)點(diǎn):現(xiàn)在的網(wǎng)站都是MVC(Model View Controller)架構(gòu),就是 業(yè)務(wù)模型(model)-用戶界面(view)-控制器(controller)。這三個層次共同組建了一個網(wǎng)站。

635A2C55

MVC

業(yè)務(wù)模型(model)指的是數(shù)據(jù)和業(yè)務(wù)規(guī)則,就是在數(shù)據(jù)庫中存儲這些數(shù)據(jù),并處理這些數(shù)據(jù)間的邏輯。

用戶界面(view)就是呈現(xiàn)在用戶眼前的這些界面,標(biāo)題在什么位置,用什么字體,右下角要放個什么圖片,之類的。

控制器(controller)處理用戶交互,從界面(view)讀取數(shù)據(jù),向業(yè)務(wù)模型(model)發(fā)送數(shù)據(jù)。
前端工程師,一般負(fù)責(zé)VC的部分;后端工程師,則負(fù)責(zé)M的部分。但各個公司對前端和后端的工作劃分并不完全一致,有些工作前后端都可以做。

1 前端

1.1 前端主要語言

1)Html:全稱HyperText Markup Language,搭建網(wǎng)頁的基礎(chǔ)語言。文檔寫起來并不復(fù)雜,但是功能很強(qiáng)大,而且什么平臺都能用,什么電腦都能用。

2)CSS:但是想網(wǎng)頁更精美更酷炫,就需要用到CSS語言了。CSS能夠?qū)W(wǎng)頁中對象的位置排版進(jìn)行像素級的精確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象和模型樣式編輯的能力,并能夠進(jìn)行初步交互設(shè)計,是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計語言。

3)Javascript:如果想要網(wǎng)頁有更酷炫的交互,就要用到Javascript。它是通過嵌入到html中來實(shí)現(xiàn)自身功能,主要用于添加交互行為,可以在多平臺下運(yùn)行(如Windows、Linux、Mac、Android、iOS等),還可以控制cookies,等等吧。

4)jQuery:這是一個時下最流行的Javascript庫,主要面向查詢(Query)。簡單理解,就是javascript里面那些需要用一行行代碼實(shí)現(xiàn)的體力活,在jQuery里面可以直接打包成模塊,調(diào)取對應(yīng)的接口使用,解放了開發(fā)者更多的時間。這種模塊化的使用方式讓開發(fā)者可以很快就開發(fā)出酷炫的頁面。

5)Bootstrap:Bootstrap也是對Javascript進(jìn)行封裝,它在jQuery的基礎(chǔ)上進(jìn)行更加人性化的完善,其實(shí)就是更方便了。它有很多現(xiàn)成的組件,比如導(dǎo)航欄、下拉菜單、按鈕,都定義好了樣式和交互,直接成套拿來用就行了。

這么看上去,前端語言的內(nèi)在關(guān)系就比較好理解了,舉個栗子:好比一個互聯(lián)網(wǎng)產(chǎn)品就是一個妹紙,html是搭建了她的身體,這個是基礎(chǔ)(要先有個妹紙);CSS是給她穿上漂亮衣服;Javascript是教會她化妝,先隔離后粉底,先眼線后睫毛;jQuery是把化妝進(jìn)行整合,主要負(fù)責(zé)實(shí)現(xiàn)“一個步驟無瑕底妝”;Bootstrap也是對化妝進(jìn)行整合,主要負(fù)責(zé)實(shí)現(xiàn)“一個步驟清純大眼妝”和“一個步驟性感唇妝”,漸漸地,html搭建出來的妹紙就變成女神了……

(我懷疑這么寫程序猿們會看不懂哈哈哈哈哈)

1.2 如何評估前端的能力?

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

?只會基本的HTML/CSS, 可以將設(shè)計圖轉(zhuǎn)化為HTML/CSS, 俗稱切圖

?懂一些Javascript,主要是使用現(xiàn)成的框架,jQuery,Bootstrap等等

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

?對JS/CSS非常了解,熱衷于利用瀏覽器的各種最新特性實(shí)現(xiàn)各種炫酷效果

?可以根據(jù)需要寫出封裝良好的JS類庫或者開發(fā)框架

恩,非技術(shù)出身的CEO們可以心里有譜了……

2 后端

2.1 后端語言

1) C#/Java:這兩者都是名聲顯赫的程序設(shè)計語言,功能強(qiáng)大且完善。但入門難度也比較高,復(fù)雜。

2)PHP:PHP最早是Personal Home Page的縮寫(就是這么直白!任性?。?,后來更名為Hypertext Preprocessor,就是超文本預(yù)處理器。PHP的優(yōu)勢是可以被嵌入html語言,所以實(shí)用性強(qiáng)、入門簡單、容易上手,但缺點(diǎn)同樣很多,因為是開源沒有標(biāo)準(zhǔn)框架,等等吧。

3)Ruby:Ruby是一種面向開發(fā)者的語言,語法簡單(“懂英語的人都能學(xué)會”——張元一),注重人性化,而不是一味從機(jī)器的角度著想。所以Ruby的優(yōu)點(diǎn)就是易懂易上手,開發(fā)效率高,但數(shù)據(jù)量大時性能不足。

4)Node.js:這是基于Javascript的一種語言,適合有前端基礎(chǔ)的人進(jìn)入后端使用;采用異步編程模型,處理高并發(fā)時有性能優(yōu)勢。

5)Lisp:號稱業(yè)界最強(qiáng)的編程語言沒有之一,更多是Geek和科學(xué)家們的鐘愛。有興趣可以去多了解一下,作為入門科普就不多研究了。

6)無后端:一些移動應(yīng)用初期可以沒有后端,實(shí)現(xiàn)項目的快速啟動。無后端(noBackend)致力于讓構(gòu)建一個應(yīng)用的過程變得更簡單,實(shí)際上是通過前端代碼抽象成后端接口??捎玫墓ぞ哂蠪acebook Parse, Google Firebase以及國內(nèi)的LeanCloud。

2.2 數(shù)據(jù)庫

數(shù)據(jù)庫是按照數(shù)據(jù)結(jié)構(gòu)對數(shù)據(jù)進(jìn)行存儲、組織和管理的庫。你可以簡單地把數(shù)據(jù)庫想象成公司的文件柜,每個柜子里放不同的文件,通過柜子編號可以找到你要的資料;把資料放進(jìn)去時,也放到對應(yīng)編號的柜子里去。而在數(shù)據(jù)庫中,還涉及到數(shù)據(jù)的不同類型、數(shù)據(jù)間的映射關(guān)系等等的信息。

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

1)MySQL:MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。什么是關(guān)系型?就是說有關(guān)聯(lián)的數(shù)據(jù)是保存在同一個表內(nèi),而不是把所有數(shù)據(jù)堆在一起,這樣查起來就很方便。MySQL的優(yōu)點(diǎn)是體積小、速度快、成本低,是很多中小型網(wǎng)站的首選。但是,關(guān)系型數(shù)據(jù)庫的缺點(diǎn)是在海量訪問并發(fā)和海量數(shù)據(jù)管理時的力不從心,而且對數(shù)據(jù)庫的升級和擴(kuò)展很麻煩,往往需要停機(jī)維護(hù)和數(shù)據(jù)遷移。這是令人難以忍受的。

2)MongoDB:MongoDB是一個基于分布式文檔存儲的數(shù)據(jù)庫,介于關(guān)系型數(shù)據(jù)庫和非關(guān)系型數(shù)據(jù)庫之間,他可以支持很松散的數(shù)據(jù)結(jié)構(gòu),所以能夠支持較復(fù)雜的數(shù)據(jù)類型;同時又能支持關(guān)系型數(shù)據(jù)庫表單查詢的大部分功能,所以在一定程度上集成了兩者的優(yōu)點(diǎn)。

2.3 服務(wù)器如何辨別用戶是誰?

服務(wù)器辨別用戶是通過Cookie和Session實(shí)現(xiàn)的。

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

2)Session:Session實(shí)際上是一種時間的概念,就是你打開一個網(wǎng)站到關(guān)閉這個網(wǎng)站之間的時間。這段時間里,你在網(wǎng)站上的動作都被當(dāng)做Session保存在服務(wù)器中,比如說“返回上一個瀏覽頁面”這種動作,就是由Session實(shí)現(xiàn)的。Session保存在服務(wù)器上,關(guān)閉了網(wǎng)站怎么辦?你的Session會被編上號,以SessionID的形式發(fā)送到瀏覽器,以Cookie的形式保存在本地,這就是Cookie和Session的親密合作。

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

3 移動開發(fā)

開發(fā)移動應(yīng)用程序主要分為以下三種情況:

1)原生:指的是完全基于移動平臺寫代碼(比如iOS平臺支持Xcode和Objective-C,安卓平臺支持Eclipse和Java),看上去外觀最好,用起來性能最佳,實(shí)現(xiàn)的功能最多,當(dāng)然也就比較費(fèi)工夫。適合對速度、性能特別敏感的應(yīng)用,如拍照、視頻類,通常開發(fā)周期為4-6周;

2)HTML5:使用標(biāo)準(zhǔn)的Web技術(shù)(通常是HTML5、JavaScript和CSS),可以只編寫一次就跨平臺運(yùn)行,更快做跨屏適配,效果很酷炫,但也有一些功能的局限,通常開發(fā)周期為1-2周;

3)混合式:就是將HTML5嵌入到原生器中,集成了以上兩者的優(yōu)點(diǎn)和缺點(diǎn)。適合已有web端產(chǎn)品,想以最低成本遷移到移動端,通常開發(fā)周期為3-4周。

大概就是這樣了。一不小心寫了將近3000字我也是蠻拼的……

#專欄作家#

莔莔有神(微信公眾號:破殼,pokeclub),人人都是產(chǎn)品經(jīng)理專欄作家,新晉產(chǎn)品喵,將細(xì)膩的人文視角和嚴(yán)謹(jǐn)?shù)漠a(chǎn)品邏輯相結(jié)合,探討互聯(lián)網(wǎng)產(chǎn)品和工作的方方面面。曾經(jīng)是面霸,承接職業(yè)咨詢。

本文系作者授權(quán)發(fā)布,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 已做產(chǎn)品快2年了,看完了才知道自己還是技術(shù)白癡。我這PM做的夠失敗

    來自廣東 回復(fù)
  2. 不懂開發(fā)的產(chǎn)品經(jīng)理,不是好老公!

    回復(fù)
  3. IT小白的科普文章,與產(chǎn)品經(jīng)理相去甚遠(yuǎn)

    回復(fù)
  4. 不標(biāo)準(zhǔn)。。。

    回復(fù)
  5. 感謝分享~
    想要加入人人產(chǎn)品經(jīng)理官方微信群,可以加我微信:qdxyCoco 備注:微信群
    忘記備注的同學(xué),可以直接給Coco發(fā)送:微信群

    來自廣東 回復(fù)
  6. 其實(shí)寫得并不準(zhǔn)確

    回復(fù)
  7. 感謝分享

    來自浙江 回復(fù)
  8. 我是會開發(fā)的產(chǎn)品經(jīng)理??

    回復(fù)
  9. 感謝分享,剛轉(zhuǎn)行的產(chǎn)品小白明白了一些

    回復(fù)
  10. 好收藏

    回復(fù)
  11. 寫的很好,希望能連載一些針對產(chǎn)品經(jīng)理的技術(shù)文章,非常感謝作者的分享

    來自澳大利亞 回復(fù)
  12. 這移動開發(fā)的開發(fā)周期估的好尷尬,沒舉需要做的功能例子,直接說周期 ?

    來自廣東 回復(fù)
    1. 三種開發(fā)方式的時間有對比就夠了

      回復(fù)
  13. 沒技術(shù)基礎(chǔ)的產(chǎn)品感覺就是耍流氓

    回復(fù)
  14. 感謝分享,之前就懂點(diǎn),不過比較模糊,現(xiàn)在清晰多了

    回復(fù)
  15. 謝謝分享

    來自四川 回復(fù)
  16. 沒什么內(nèi)容呀,都是摘抄的,服了

    來自江蘇 回復(fù)
    1. 同感,不過能發(fā)布是一種實(shí)力

      來自廣東 回復(fù)
  17. 。。。。。原來自己發(fā)的評論不能刪除啊。。。。我就做個表情發(fā)送測試。。。。不好意思。ps,文章寫得很通俗易懂,贊~

    來自上海 回復(fù)
  18. ??

    來自上海 回復(fù)
  19. 感謝,我個技術(shù)小白終于能入門了。正在各處搜集基礎(chǔ)互聯(lián)網(wǎng)知識

    來自天津 回復(fù)
  20. 感謝分享

    回復(fù)
  21. 謝謝 明白點(diǎn)啦

    回復(fù)
  22. 嗯 開發(fā)肯定看的懂啦 ??

    來自上海 回復(fù)
  23. 很感謝,真的明白好多

    回復(fù)
  24. 0基礎(chǔ)的人表示收獲滿滿??!終于有點(diǎn)明白我們公司的各位技術(shù)大神了 ??

    來自北京 回復(fù)
  25. 陰影部分總結(jié)得真好,一目了然

    來自北京 回復(fù)
  26. “曾經(jīng)是面霸”

    來自重慶 回復(fù)
  27. 厲害,雖然沒有完全明白,但感覺接近了大神一樣 ?

    來自江蘇 回復(fù)
  28. ?? ?? ?? ??

    來自廣東 回復(fù)