一個(gè)小分享，知識(shí)有限，拋磚引玉。

Ajax

03年的時(shí)候我上六年級(jí)，那時(shí)候網(wǎng)吧剛在小縣城的角落萌生。傳奇，大話西游***代網(wǎng)游一時(shí)風(fēng)靡。我抱著試一試的心態(tài)給了網(wǎng)吧老板兩塊錢(qián)想申請(qǐng)個(gè)號(hào)玩玩，然后接下來(lái)的一個(gè)小時(shí)我一直在，注，冊(cè)，賬，號(hào)。

彼時(shí)網(wǎng)吧用的512k的帶寬，注冊(cè)的時(shí)候，填了一堆信息，提交，頁(yè)面跳轉(zhuǎn)，嘣，”您填寫(xiě)的信息有誤，請(qǐng)重填”。然后跳轉(zhuǎn)回注冊(cè)頁(yè)面，以此循環(huán)。我現(xiàn)在時(shí)常想，如果當(dāng)時(shí)ajax能普及開(kāi)來(lái)，我就可以省2塊錢(qián)了。

那么ajax是什么?

首先ajax是一種技術(shù)。以往的網(wǎng)頁(yè)交互方式，用戶在點(diǎn)擊一個(gè)按鈕后，比如提交按鈕，用戶就要等待漫長(zhǎng)的數(shù)據(jù)和服務(wù)器的交互，期間用戶無(wú)法進(jìn)行任何 操作，只能點(diǎn)根煙。而ajax所做的，就是在向服務(wù)器發(fā)送請(qǐng)求的時(shí)候，我們不必等待結(jié)果，而是可以同時(shí)做其他的事情，等到有了結(jié)果我們可以再來(lái)處理這個(gè)事

其實(shí)ajax技術(shù)早在1998年的時(shí)候就已經(jīng)由微軟實(shí)現(xiàn)了，然而直到2005年2月，Adaptive Path公司的Jesse James Garrett發(fā)表文章“Ajax: A New Approach to Web Applications”,人們讀了后覺(jué)得哎喲不錯(cuò)哦這個(gè)屌，這之后ajax才大規(guī)模普及開(kāi)來(lái)。

ajax的出現(xiàn)，極大了提高了web的用戶體驗(yàn)。時(shí)至今日，即使國(guó)內(nèi)IT發(fā)展再怎么落后，所有網(wǎng)站的登錄注冊(cè)也已經(jīng)實(shí)現(xiàn)了ajax交互。用戶點(diǎn)填寫(xiě)完信息后，頁(yè)面不用刷新就可以知道信息提交成功與否，哪錯(cuò)改哪。

另外ajax作為一種前后端分離的解決方案，也已經(jīng)被國(guó)內(nèi)大多數(shù)不很low的公司所采用，也間接導(dǎo)致了php等網(wǎng)頁(yè)腳本語(yǔ)言的衰落。（來(lái)辯）

jQuery

早年的js編程，代碼的效率是極其低下的，這點(diǎn)尤其體現(xiàn)在操作dom上，開(kāi)發(fā)者想要給一個(gè)按鈕添加事件，要寫(xiě)長(zhǎng)長(zhǎng)一大段重復(fù)的代碼去獲取到這個(gè)按 鈕，再寫(xiě)長(zhǎng)長(zhǎng)一大段重復(fù)的代碼去添加事件。盡管老油條會(huì)將常用的操作封裝起來(lái)，但是對(duì)于不會(huì)封裝的新手，這無(wú)疑是很痛苦的一件事，尤其再加上各種各樣的兼 容。

2006年，本著拯救菜鳥(niǎo)，讓他們do more的宗旨，jquery誕生。jQuery誕生的意義，一是對(duì)ie6 7 8 及各種割據(jù)一方的瀏覽器做好了兼容，二是極大簡(jiǎn)化了dom操作，使開(kāi)發(fā)效率大大提升。jquery很火爆，火爆的有些前端只會(huì)寫(xiě)jquery而不會(huì)寫(xiě)原生 js的程度。時(shí)至今日，說(shuō)jquery write once，see everywhere已經(jīng)不為過(guò)了。

jquery的另一個(gè)意義（我認(rèn)為）在于，它催化了人們對(duì)前端的興趣與探索，相比linux，你用很低的成本，就可以寫(xiě)出一個(gè)讓不懂編程的妹子說(shuō)歐 巴你碉堡了的效果，讓人們覺(jué)得哎喲（又）不錯(cuò)哦這個(gè)屌。此后大量的類(lèi)庫(kù)和基于jquey的插件雨后春筍般誕生，前端行業(yè)歌舞升平欣欣向榮，網(wǎng)頁(yè)開(kāi)發(fā)進(jìn)入一 個(gè)新時(shí)代。

#p#

Chrome

天下武功出谷歌。在ie6,7,8的時(shí)代里面，盡管Firefox也緩慢的挑戰(zhàn)ie的地位。但和2009年開(kāi)始Google開(kāi)始推廣的chrome 瀏覽器產(chǎn)生的顛覆性影響比起來(lái)，遜色很多。Chrome使用Apple的開(kāi)源內(nèi)核webkit，良好的設(shè)計(jì)標(biāo)準(zhǔn)和市場(chǎng)反應(yīng)；促進(jìn)瀏覽器快速迭代，讓IE在 windows10中徹底消失。

chrome瀏覽器的推出，將簡(jiǎn)化前端的入門(mén)程度又推進(jìn)了一步，其自帶的調(diào)試工具好用又無(wú)腦，我們可以利用其輕松的查看網(wǎng)絡(luò)狀態(tài)，加載順序，進(jìn)行斷點(diǎn)調(diào)試等，同時(shí)谷歌的插件功能，又給開(kāi)發(fā)者提供了極大便利。

目前chrome***版開(kāi)始采用blink內(nèi)核，測(cè)試版本中，已經(jīng)可以對(duì)css3動(dòng)畫(huà)進(jìn)行追蹤和調(diào)試。在我還沒(méi)有想象到的時(shí)候，chrome已經(jīng)實(shí)現(xiàn)了它。

一句話，沒(méi)有chrome，就沒(méi)有新中國(guó)，就只能用firefox了。

GitHub

隨著軟件項(xiàng)目的迭代加快，項(xiàng)目版本工具也不斷的演進(jìn)，經(jīng)歷CVS, SVN,GIT。到目前為止CVS差不多已經(jīng)從互聯(lián)網(wǎng)行業(yè)慢慢消失，SVN作為文件和文檔存儲(chǔ)存在，由linux內(nèi)核發(fā)明人Linus創(chuàng)建的版本工具 GIT現(xiàn)在作為代碼版本標(biāo)準(zhǔn)。Github依賴于git成為開(kāi)發(fā)人員團(tuán)隊(duì)協(xié)作的社區(qū)！到2015年1月github上已注冊(cè)的開(kāi)發(fā)人員超過(guò)一千萬(wàn)，開(kāi)源項(xiàng) 目幾千萬(wàn)。其中2014中國(guó)研發(fā)者在github上增⻓長(zhǎng)最快。你幾乎可以在上面找到一切你想要的代碼…比如username..password..

[[139912]]

OAUTH

OAuth1或OAuth2與以往的授權(quán)方式不同之處是OAUTH的授權(quán)不會(huì)使第三方觸及到用戶的帳號(hào)信息（如用戶名與密碼）。
產(chǎn)生背景：最常見(jiàn)的服務(wù)場(chǎng)景，用戶需要使用兩個(gè)不同企業(yè)的服務(wù)，登錄驗(yàn)證A企業(yè)，下載內(nèi)容；然后登錄驗(yàn)證B企業(yè)，上傳內(nèi)容到B企業(yè)服務(wù)，復(fù)雜又耗時(shí)。無(wú)論 是用戶，還是A、B都會(huì)想要互通服務(wù)。這就產(chǎn)生了核實(shí)身份的需求。舊的用戶名、密碼機(jī)制會(huì)造成A/B企業(yè)有權(quán)限查看甚至修改對(duì)方的用戶資源。為了達(dá)到確認(rèn) 身份、服務(wù)互通，Google、Yahoo、Microsoft牽頭促使OAuth1.0產(chǎn)生。之后的OAuth2.0是各大互聯(lián)網(wǎng)企業(yè)基于https安 全的一次新規(guī)劃。

目前最常見(jiàn)的應(yīng)用場(chǎng)景主要在授權(quán)登錄上,如微信,qq,微博等等

#p#

JSON

Json雖然是2001年就產(chǎn)生的標(biāo)準(zhǔn)，但被廣泛應(yīng)用是在2008年之后各種Ajax應(yīng)用、iPhone、Android設(shè)備流行之后。舊的服務(wù)體 系多是企業(yè)級(jí)，所以XML對(duì)java型的企業(yè)級(jí)服務(wù)定位有益。但對(duì)于流量限制，語(yǔ)義簡(jiǎn)單的API服務(wù)來(lái)說(shuō)，XML龐大、冗余、不易學(xué)又占帶寬。

去年我剛工作的時(shí)候，后臺(tái)給我返回一個(gè)數(shù)組，沒(méi)有發(fā)言權(quán)的我在是要遍歷這個(gè)數(shù)組還是轉(zhuǎn)化為json格式之間糾結(jié)了很久。

Json的普及,從另一個(gè)角度體現(xiàn)了web開(kāi)發(fā)的一個(gè)優(yōu)勢(shì),不管你后臺(tái)是java ruby php還是python,你只要給我一個(gè)json格式的接口,我就能撐起整個(gè)地球。

DJANGO&RAILS

敏捷開(kāi)發(fā)打破了項(xiàng)目研發(fā)模式。在2010之后的WEB2.0時(shí)代，Html5盛行，前端工作被分離出去，PHP那種網(wǎng)頁(yè)腳本的優(yōu)勢(shì)沒(méi)那么明顯，雖然 在CMS和論壇模板上依然有優(yōu)勢(shì)。Django和Rails的***優(yōu)勢(shì)在于，他讓個(gè)人或兩三個(gè)的小團(tuán)隊(duì)，實(shí)現(xiàn)整套產(chǎn)品成為可能。以Instagram為 例，最初兩個(gè)python工程師用django快速實(shí)現(xiàn)了服務(wù)端的所有功能，在用戶增長(zhǎng)時(shí)，再將大訪問(wèn)量和大數(shù)據(jù)量的服務(wù)獨(dú)立出去。

盡管現(xiàn)實(shí)殘酷，rails每況日下，IE8和rails誰(shuí)先消失只是先后問(wèn)題，但其提供的解決方案還是被很多后生所效仿。人們都會(huì)記得這朵曇花。

Bootstrap

2011年Twitter開(kāi)源的網(wǎng)頁(yè)端GUI框架。jquery兼容了不同瀏覽器的js部分，bootstrap則兼容了不同瀏覽器的css部分。 甚至于說(shuō)，作為一個(gè)后端開(kāi)發(fā)，你無(wú)需了解css，無(wú)需前端，無(wú)需設(shè)計(jì)師，只要看一看bootstrap的文檔，就可以搭起一個(gè)美觀大方的后臺(tái)管理系統(tǒng)。常 見(jiàn)類(lèi)似的GUI框架還有zurb的foundation,google的materialize，百度也曾出過(guò)一個(gè)名為GMU的移動(dòng)端框架。

就我個(gè)人來(lái)說(shuō)，我并不喜歡這些gui框架，盡管他們簡(jiǎn)化了css，實(shí)現(xiàn)了一些很炫酷的效果，盡管我在項(xiàng)目中也用到過(guò)這些，盡管我不想承認(rèn)我是綠茶。 這些框架***的缺點(diǎn)就是，千篇一律，所有的頁(yè)面都是一個(gè)樣子，一樣的nav，一樣的sidebar，一樣的表單，連鼠標(biāo)點(diǎn)上去放個(gè)光都一模一樣。就像我如 果長(zhǎng)了三條腿（雖然確實(shí)長(zhǎng)了三條腿）別人會(huì)說(shuō)我很別致讓他們眼前一亮，但如果所有人都長(zhǎng)了三條腿，web也就失去其魅力了。另一個(gè)缺點(diǎn)是臃腫，一個(gè)css 就走100多k的流量，其js插件又大都依賴jquery，忍心么。

當(dāng)然，其為了解決響應(yīng)式提出的柵格化html的思想還是很值得借鑒的。

IOS & ANDROID系統(tǒng)的普及

2009年之后IOS和Android的快速發(fā)展，導(dǎo)致WEB開(kāi)發(fā)發(fā)生以下改變：
1. html5在移動(dòng)瀏覽器上優(yōu)先實(shí)現(xiàn)，Android和IOS設(shè)備全面支持html5、CSS3，加速了IE消失
2. 上網(wǎng)隨時(shí)隨地發(fā)生。鼠標(biāo)點(diǎn)擊、內(nèi)容繁復(fù)的網(wǎng)頁(yè)越來(lái)越簡(jiǎn)潔，響應(yīng)式設(shè)計(jì)快速流行。
3. APP和服務(wù)器交互大部分和網(wǎng)頁(yè)一樣基于HTTP協(xié)議，webapp，hybrid app的概念被提出。

關(guān)于webapp，這里簡(jiǎn)單說(shuō)下web相比原生的優(yōu)勢(shì)

• 跨平臺(tái)：常說(shuō)的一次編譯，到處運(yùn)行

• 免安裝：打開(kāi)瀏覽器，就能使用

• 快速部署：升級(jí)只需在服務(wù)器更新代碼，而不像客戶端需要更新版本

• 超鏈接：可以與其他網(wǎng)站互連，可以被搜索引擎檢索

聽(tīng)起來(lái)刁刁的，這些優(yōu)勢(shì)卻經(jīng)不住推敲。首先，不同系統(tǒng)的用戶使用習(xí)慣是不同的，ios用戶返回按鈕習(xí)慣在左上角，而安卓用戶卻習(xí)慣在屏幕最下方的位置，產(chǎn)品經(jīng)理問(wèn)，那放在哪兒。呵呵噠不知道。其次，曾經(jīng)看過(guò)一個(gè)調(diào)查報(bào)告，問(wèn)用戶更喜歡用客戶端還是web端。

喜歡客戶端的用戶遠(yuǎn)遠(yuǎn)超過(guò)了web端。你問(wèn)我喜歡什么，我也是喜歡客戶端。你問(wèn)我為什么，我覺(jué)得比較有安全感吧，而且更新版本讓我覺(jué)得很爽，很有存 在感，讓我知道我并沒(méi)有被世界遺忘，讓我知道你們產(chǎn)品在更新，在為我操心。另外超鏈接..我一個(gè)客戶端要你seo干什么。這還沒(méi)完，webapp的缺點(diǎn)還 有一大把，***的缺點(diǎn)莫過(guò)于沒(méi)有GPU加速，想要實(shí)現(xiàn)一個(gè)復(fù)雜一些動(dòng)畫(huà)，真是要了瀏覽器親命了。其次網(wǎng)頁(yè)是單線程的，加載dom時(shí)會(huì)阻塞js，導(dǎo)致的結(jié)果 就是，卡。一卡就煩了，煩了就關(guān)了，用戶減一。

而hybrid就不同了，hybrid app的意思是混合原生應(yīng)用，將需要頻繁更新的頁(yè)面作為web放在遠(yuǎn)程更新。這是一個(gè)靠譜的解決方案，BAT有很多案例，如微信發(fā)布的JS SDK，掌上百度和淘寶客戶端Android版；

當(dāng)然這里邊的坑有很多，有機(jī)會(huì)，我把我踩過(guò)的坑講給你們聽(tīng)。

#p#

NodeJS

我糾結(jié)了一會(huì)node屬不屬于前端范疇的問(wèn)題。我認(rèn)為是屬于的。

解決高并發(fā)一直是后臺(tái)哥哥們樂(lè)于討論的問(wèn)題，比如咱們的好近實(shí)時(shí)監(jiān)控系統(tǒng)，理論上每個(gè)連接都會(huì)生成一個(gè)新線程，每個(gè)新線程可能需要 2 MB 配套內(nèi)存。在一個(gè)擁有 8 GB RAM 的系統(tǒng)上，理論上***的并發(fā)連接數(shù)量是 4,000 個(gè)用戶。隨著用戶的增長(zhǎng)，咱們希望監(jiān)控程序支持更多用戶，這樣，就必須添加更多服務(wù)器。當(dāng)然，這會(huì)增加業(yè)務(wù)成本，尤其是服務(wù)器成本。除了成本上升外，還有 一個(gè)技術(shù)問(wèn)題：用戶可能針對(duì)每個(gè)請(qǐng)求使用不同的服務(wù)器，因此，任何共享資源都必須在所有服務(wù)器之間共享，到這里，技術(shù)就到了瓶頸。node誕生的初衷，就 是為了解決這個(gè)問(wèn)題。node解決這個(gè)問(wèn)題的方法是：更改連接到服務(wù)器的方式。每個(gè)連接發(fā)射一個(gè)在 Node 引擎的進(jìn)程中運(yùn)行的事件，而不是為每個(gè)連接生成一個(gè)新的 OS 線程，并為其分配一些配套內(nèi)存。

nodejs屬于服務(wù)器端語(yǔ)言，在前后端分離這場(chǎng)圈地運(yùn)動(dòng)中是前端的一個(gè)有利武器，同時(shí)在前端自動(dòng)化上也提供了大量的可編程工具 （grunt,bower,gulp等），淘寶百度對(duì)nodejs的熱度一直很高，自然而然我認(rèn)為這是一個(gè)趨勢(shì)。去年美團(tuán)成立了美團(tuán)酒店的團(tuán)隊(duì)，選擇了 node作為后臺(tái)語(yǔ)言，圈走了后臺(tái)大部分的工作。我在想，前端js加上node再加上對(duì)UI的技能需求，以后是不是前端工程師是不是該叫全端工程師了。

P:我我對(duì)node只有粗淺的了解，也是以后希望學(xué)習(xí)的方向,不辯。

BIG DATA

大數(shù)據(jù)大概是過(guò)去幾年最火熱的名詞，我一大批同學(xué)聽(tīng)說(shuō)數(shù)據(jù)挖掘年薪30萬(wàn)都嗷嗷嗷去做數(shù)據(jù)庫(kù)了。
大多數(shù)時(shí)候，我們?cè)谡劥髷?shù)據(jù)其實(shí)都是在談在海量數(shù)據(jù)下的數(shù)據(jù)挖掘、數(shù)據(jù)分析、智能推薦、實(shí)時(shí)分析等。不同公司的技術(shù)方案不同，我只列兩個(gè)國(guó)內(nèi)成功的案例：
• 京東個(gè)性化電商，場(chǎng)景包括基于行為、偏好、地域、時(shí)間、好友關(guān)系等維度，向不同的用戶推薦不同的產(chǎn)品，不同用戶搜索產(chǎn)品排序也不同…
• 百度地圖東莞8小時(shí)遷徙圖；百度搜索智能提醒
• 360手機(jī)衛(wèi)士，電話號(hào)碼防騷擾功能是通過(guò)用戶的地域、身份、騷擾趨勢(shì)，將標(biāo)記的2.56億個(gè)電話號(hào)碼選出1000個(gè)和用戶關(guān)聯(lián)度***的，寫(xiě)入用戶手機(jī)的10k的文本里，達(dá)到不聯(lián)網(wǎng)不做任何網(wǎng)絡(luò)交互的情況下，為用戶防騷擾

#p#

HTML5+CSS3

這是這幾年被說(shuō)爛了的一個(gè)詞，人人都在說(shuō)HTML5，問(wèn)HTML5是什么，他們也說(shuō)不清楚，就是酷，就是炫，就是酷炫。

在我看來(lái)，HTML5只是一個(gè)三人成虎的東西，它吸引的眼球遠(yuǎn)超過(guò)了它提供的功能，HTML5只是提供了一些新的API，就等于一個(gè)app從1.0 升級(jí)到2.0增加了附近的人功能而已。而且其提供的API，也就是在移動(dòng)端試一試水，在pc端因?yàn)榧嫒莸膯?wèn)題，始終不能被明媒正娶。pc端的開(kāi)發(fā)還是以 HTML4.0+CSS2為基準(zhǔn)漸進(jìn)增強(qiáng)。至于css3，它最被人關(guān)注的動(dòng)畫(huà)，也是flash玩剩下的東西。

移動(dòng)端的飛速發(fā)展催化了HTML5的發(fā)展，HTML5的發(fā)展也促使各瀏覽器趨于標(biāo)準(zhǔn)化。

這條標(biāo)準(zhǔn)化路上，微信功不可沒(méi)，1024，圍住神經(jīng)貓，淘寶十年，LEXUS NX這些融合了大量HTML5+CSS3元素的頁(yè)面讓人印象深刻。

此外，微軟拋棄IE代號(hào)，開(kāi)發(fā)edge，各大瀏覽器廠商的不斷標(biāo)準(zhǔn)化，HTML5草案定稿，ES6草稿的不斷實(shí)現(xiàn)與完善，前端之路看起來(lái)是一條京畿坦途，我充滿期待。

未來(lái)

3D頁(yè)游？WebOS？ 虛擬現(xiàn)實(shí)？

***，隨著用戶硬件性能的提升，網(wǎng)絡(luò)帶寬的越來(lái)越粗，傳感系統(tǒng)，Retina，WebGL技術(shù)的日漸成熟，再加上O2O的蓬勃發(fā)展，上邊這些會(huì)成為現(xiàn)實(shí)么？