這篇文的起因來自NEXT主辦的keynote,主講是墨刀的張?jiān)?。聽完照著筆記梳理了下這次演講的邏輯,基本可以給0基礎(chǔ)的產(chǎn)品科普下技術(shù)常識(shí)。但邀請(qǐng)程序員來科普有兩大問題:一是有些入門門檻,小白問題被生生忽略了(也可能是我太弱了T.T);二是表述能力短板,后來我整理筆記時(shí),發(fā)現(xiàn)大神的思路其實(shí)很清晰,演講時(shí)硬是沒聽出來也是醉了T.T
感謝大神的分享,按照大神的分享框架,我又補(bǔ)充了一些資料,整理了這份盡量通俗易懂的普及文,供如我一樣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í)際上是通過前端代碼抽象成后端接口。可用的工具有Facebook Parse, Google Firebase以及國內(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周。
大概就是這樣了。一不小心寫了將近3000字我也是蠻拼的……
#專欄作家#
莔莔有神(微信公眾號(hào):破殼,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)載。
收藏 已收藏 {{ postmeta.bookmark }}
點(diǎn)贊 已贊 {{ postmeta.postlike }}
已做產(chǎn)品快2年了,看完了才知道自己還是技術(shù)白癡。我這PM做的夠失敗
不懂開發(fā)的產(chǎn)品經(jīng)理,不是好老公!
IT小白的科普文章,與產(chǎn)品經(jīng)理相去甚遠(yuǎn)
不標(biāo)準(zhǔn)。。。
感謝分享~
想要加入人人產(chǎn)品經(jīng)理官方微信群,可以加我微信:qdxyCoco 備注:微信群
忘記備注的同學(xué),可以直接給Coco發(fā)送:微信群
其實(shí)寫得并不準(zhǔn)確
感謝分享
我是會(huì)開發(fā)的產(chǎn)品經(jīng)理??
感謝分享,剛轉(zhuǎn)行的產(chǎn)品小白明白了一些
好收藏
寫的很好,希望能連載一些針對(duì)產(chǎn)品經(jīng)理的技術(shù)文章,非常感謝作者的分享
這移動(dòng)開發(fā)的開發(fā)周期估的好尷尬,沒舉需要做的功能例子,直接說周期 ?
三種開發(fā)方式的時(shí)間有對(duì)比就夠了
沒技術(shù)基礎(chǔ)的產(chǎn)品感覺就是耍流氓
感謝分享,之前就懂點(diǎn),不過比較模糊,現(xiàn)在清晰多了
謝謝分享
沒什么內(nèi)容呀,都是摘抄的,服了
同感,不過能發(fā)布是一種實(shí)力
。。。。。原來自己發(fā)的評(píng)論不能刪除啊。。。。我就做個(gè)表情發(fā)送測(cè)試。。。。不好意思。ps,文章寫得很通俗易懂,贊~
??
感謝,我個(gè)技術(shù)小白終于能入門了。正在各處搜集基礎(chǔ)互聯(lián)網(wǎng)知識(shí)
感謝分享
謝謝 明白點(diǎn)啦
嗯 開發(fā)肯定看的懂啦 ??
很感謝,真的明白好多
0基礎(chǔ)的人表示收獲滿滿??!終于有點(diǎn)明白我們公司的各位技術(shù)大神了 ??
陰影部分總結(jié)得真好,一目了然
“曾經(jīng)是面霸”
厲害,雖然沒有完全明白,但感覺接近了大神一樣 ?
?? ?? ?? ??