這篇文的起因來自NEXT主辦的keynote，主講是墨刀的張元一。聽完照着筆記梳理了下這次演講的邏輯，基本可以給0基礎的産品科普下技術常識。但邀請程序員來科普有兩大問題：一是有些入門門檻，小白問題被生生忽略了（也可能是我太弱了T.T）；二是表述能力短闆，後來我整理筆記時，發現大神的思路其實很清晰，演講時硬是沒聽出來也是醉了T.T

　　感謝大神的分享，按照大神的分享框架，我又補充了一些資料，整理了這份盡量通俗易懂的普及文，供如我一樣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周。

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

　　本文作者莔莔有神（pokeclub）投稿發布，轉載請注明來源于人人都是産品經理并附帶本文鍊接

　　,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!