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

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)載。