十年WEB技術發展歷程

Ajax

03年的時候我上六年級，那時候網咖剛在小縣城的角落萌生。傳奇，大話西遊第一代網遊一時風靡。我抱著試一試的心態給了網咖老闆兩塊錢想申請個號玩玩，然後接下來的一個小時我一直在，注，冊，賬，號。

彼時網咖用的512k的頻寬，註冊的時候，填了一堆資訊，提交，頁面跳轉，嘣，”您填寫的資訊有誤，請重填”。然後跳轉回註冊頁面，以此迴圈。我現在時常想，如果當時ajax能普及開來，我就可以省2塊錢了。

那麼ajax是什麼?

首先ajax是一種技術。以往的網頁互動方式，使用者在點選一個按鈕後，比如提交按鈕，使用者就要等待漫長的資料和伺服器的互動，期間使用者無法進行任何操作，只能點根菸。而ajax所做的，就是在向伺服器傳送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果我們可以再來處理這個事。

其實ajax技術早在1998年的時候就已經由微軟實現了，然而直到2005年2月，Adaptive Path公司的Jesse James Garrett發表文章"Ajax: A New Approach to Web Applications"，人們讀了後覺得哎喲不錯哦這個屌，這之後ajax才大規模普及開來。

ajax的出現，極大了提高了web的使用者體驗。時至今日，即使國內IT發展再怎麼落後，所有網站的登入註冊也已經實現了ajax互動。使用者點填寫完資訊後，頁面不用重新整理就可以知道資訊提交成功與否，哪錯改哪。

另外ajax作為一種前後端分離的解決方案，也已經被國內大多數不很low的公司所採用，也間接導致了php等網頁尾本語言的衰落。

jQuery

早年的js程式設計，程式碼的效率是極其低下的，這點尤其體現在操作dom上，開發者想要給一個按鈕新增事件，要寫長長一大段重複的程式碼去獲取到這個按鈕，再寫長長一大段重複的程式碼去新增事件。儘管老油條會將常用的操作封裝起來，但是對於不會封裝的新手，這無疑是很痛苦的一件事，尤其再加上各種各樣的相容。

2006年，本著拯救菜鳥，讓他們do more的宗旨，jquery誕生。jQuery誕生的意義，一是對ie6 7 8 及各種割據一方的瀏覽器做好了相容，二是極大簡化了dom操作，使開發效率大大提升。jquery很火爆，火爆的有些前端只會寫jquery而不會寫原生js的程度。時至今日，說jquery write once，see everywhere已經不為過了。

jquery的另一個意義（我認為）在於，它催化了人們對前端的興趣與探索，相比linux，你用很低的成本，就可以寫出一個讓不懂程式設計的妹子說歐巴你碉堡了的效果，讓人們覺得哎喲（又）不錯哦這個屌。此後大量的類庫和基於jquey的外掛雨後春筍般誕生，前端行業歌舞昇平欣欣向榮，網頁開發進入一個新時代。

Chrome

天下武功出谷歌。在ie6,7,8的時代裡面，儘管Firefox也緩慢的挑戰ie的地位。但和2009年開始Google開始推廣的chrome瀏覽器產生的顛覆性影響比起來，遜色很多。Chrome使用Apple的開源核心webkit，良好的設計標準和市場反應；促進瀏覽器快速迭代，讓IE在windows10中徹底消失。

chrome瀏覽器的推出，將簡化前端的入門程度又推進了一步，其自帶的除錯工具好用又無腦，我們可以利用其輕鬆的檢視網路狀態，載入順序，進行斷點除錯等，同時谷歌的外掛功能，又給開發者提供了極大便利。

目前chrome最新版開始採用blink核心，測試版本中，已經可以對css3動畫進行追蹤和除錯。在我還沒有想象到的時候，chrome已經實現了它。

一句話，沒有chrome，就沒有新中國，就只能用firefox了。

GitHub

隨著軟體專案的迭代加快，專案版本工具也不斷的演進，經歷CVS, SVN,GIT。到目前為止CVS差不多已經從網際網路行業慢慢消失，SVN作為檔案和文件儲存存在，由linux核心發明人Linus建立的版本工具GIT現在作為程式碼版本標準。Github依賴於git成為開發人員團隊協作的社群！到2015年1月github上已註冊的開發人員超過一千萬，開源專案幾千萬。其中2014中國研發者在github上增長最快。你幾乎可以在上面找到一切你想要的程式碼…比如username..password..

OAUTH

OAuth1或OAuth2與以往的授權方式不同之處是OAUTH的授權不會使第三方觸及到使用者的帳號資訊（如使用者名稱與密碼）。產生背景：最常見的服務場景，使用者需要使用兩個不同企業的服務，登入驗證A企業，下載內容；然後登入驗證B企業，上傳內容到B企業服務，複雜又耗時。無論是使用者，還是A、B都會想要互通服務。這就產生了核實身份的需求。舊的使用者名稱、密碼機制會造成A/B企業有許可權檢視甚至修改對方的使用者資源。為了達到確認身份、服務互通，Google、Yahoo、Microsoft牽頭促使OAuth1.0產生。之後的OAuth2.0是各大網際網路企業基於https安全的一次新規劃。

目前最常見的應用場景主要在授權登入上，如微信、qq、微博等等。

JSON

Json雖然是2001年就產生的標準，但被廣泛應用是在2008年之後各種Ajax應用、iPhone、Android裝置流行之後。舊的服務體系多是企業級，所以XML對java型的企業級服務定位有益。但對於流量限制，語義簡單的API服務來說，XML龐大、冗餘、不易學又佔頻寬。

去年我剛工作的時候，後臺給我返回一個數組，沒有發言權的我在是要遍歷這個陣列還是轉化為json格式之間糾結了很久。

Json的普及，從另一個角度體現了web開發的一個優勢，不管你後臺是java ruby php還是python，你只要給我一個json格式的介面，我就能撐起整個地球。

DJANGO&RAILS

敏捷開發打破了專案研發模式。在2010之後的WEB2.0時代，Html5盛行，前端工作被分離出去，PHP那種網頁尾本的優勢沒那麼明顯，雖然在CMS和論壇模板上依然有優勢。Django和Rails的最大優勢在於，他讓個人或兩三個的小團隊，實現整套產品成為可能。以Instagram為例，最初兩個python工程師用django快速實現了服務端的所有功能，在使用者增長時，再將大訪問量和大資料量的服務獨立出去。

儘管現實殘酷，rails每況日下，IE8和rails誰先消失只是先後問題，但其提供的解決方案還是被很多後生所效仿。人們都會記得這朵曇花。

Bootstrap

2011年Twitter開源的網頁端GUI框架。jquery相容了不同瀏覽器的js部分，bootstrap則相容了不同瀏覽器的css部分。甚至於說，作為一個後端開發，你無需瞭解css，無需前端，無需設計師，只要看一看bootstrap的文件，就可以搭起一個美觀大方的後臺管理系統。常見類似的GUI框架還有zurb的foundation,google的materialize，百度也曾出過一個名為GMU的移動端框架。

就我個人來說，我並不喜歡這些gui框架，儘管他們簡化了css，實現了一些很炫酷的效果，儘管我在專案中也用到過這些，儘管我不想承認我是綠茶。這些框架最大的缺點就是，千篇一律，所有的頁面都是一個樣子，一樣的nav，一樣的sidebar，一樣的表單，連滑鼠點上去放個光都一模一樣。就像我如果長了三條腿（雖然確實長了三條腿）別人會說我很別緻讓他們眼前一亮，但如果所有人都長了三條腿，web也就失去其魅力了。另一個缺點是臃腫，一個css就走100多k的流量，其js外掛又大都依賴jquery，忍心麼。

當然，其為了解決響應式提出的柵格化html的思想還是很值得借鑑的。

IOS & ANDROID系統的普及

2009年之後IOS和Android的快速發展，導致WEB開發發生以下改變：1. html5在移動瀏覽器上優先實現，Android和IOS裝置全面支援html5、CSS3，加速了IE消失。2. 上網隨時隨地發生。滑鼠點選、內容繁複的網頁越來越簡潔，響應式設計快速流行。3. APP和伺服器互動大部分和網頁一樣基於HTTP協議，webapp，hybrid app的概念被提出。

關於webapp，這裡簡單說下web相比原生的優勢。

跨平臺：常說的一次編譯，到處執行
免安裝：開啟瀏覽器，就能使用
快速部署：升級只需在伺服器更新程式碼，而不像客戶端需要更新版本
超連結：可以與其他網站互連，可以被搜尋引擎檢索

聽起來刁刁的，這些優勢卻經不住推敲。首先，不同系統的使用者使用習慣是不同的，ios使用者返回按鈕習慣在左上角，而安卓使用者卻習慣在螢幕最下方的位置，產品經理問，那放在哪兒。呵呵噠不知道。其次，曾經看過一個調查報告，問使用者更喜歡用客戶端還是web端。

喜歡客戶端的使用者遠遠超過了web端。你問我喜歡什麼，我也是喜歡客戶端。你問我為什麼，我覺得比較有安全感吧，而且更新版本讓我覺得很爽，很有存在感，讓我知道我並沒有被世界遺忘，讓我知道你們產品在更新，在為我操心。另外超連結..我一個客戶端要你seo幹什麼。這還沒完，webapp的缺點還有一大把，最大的缺點莫過於沒有GPU加速，想要實現一個複雜一些動畫，真是要了瀏覽器親命了。其次網頁是單執行緒的，載入dom時會阻塞js，導致的結果就是，卡。一卡就煩了，煩了就關了，使用者減一。

而hybrid就不同了，hybrid app的意思是混合原生應用，將需要頻繁更新的頁面作為web放在遠端更新。這是一個靠譜的解決方案，BAT有很多案例，如微信釋出的JS SDK，掌上百度和淘寶客戶端Android版。

當然這裡邊的坑有很多，有機會，我把我踩過的坑講給你們聽。

NodeJS

我糾結了一會node屬不屬於前端範疇的問題。我認為是屬於的。

解決高併發一直是後臺哥哥們樂於討論的問題，比如咱們的好近實時監控系統，理論上每個連線都會生成一個新執行緒，每個新執行緒可能需要 2 MB 配套記憶體。在一個擁有 8 GB RAM 的系統上，理論上最大的併發連線數量是 4,000 個使用者。隨著使用者的增長，咱們希望監控程式支援更多使用者，這樣，就必須新增更多伺服器。當然，這會增加業務成本，尤其是伺服器成本。除了成本上升外，還有一個技術問題：使用者可能針對每個請求使用不同的伺服器，因此，任何共享資源都必須在所有伺服器之間共享，到這裡，技術就到了瓶頸。node誕生的初衷，就是為了解決這個問題。node解決這個問題的方法是：更改連線到伺服器的方式。每個連線發射一個在 Node 引擎的程序中執行的事件，而不是為每個連線生成一個新的 OS 執行緒，併為其分配一些配套記憶體。

nodejs屬於伺服器端語言，在前後端分離這場圈地運動中是前端的一個有利武器，同時在前端自動化上也提供了大量的可程式設計工具（grunt,bower,gulp等），淘寶百度對nodejs的熱度一直很高，自然而然我認為這是一個趨勢。去年美團成立了美團酒店的團隊，選擇了node作為後臺語言，圈走了後臺大部分的工作。我在想，前端js加上node再加上對UI的技能需求，以後前端工程師是不是該叫全端工程師了。

BIG DATA

大資料大概是過去幾年最火熱的名詞，我一大批同學聽說資料探勘年薪30萬都嗷嗷嗷去做資料庫了。大多數時候，我們在談大資料其實都是在談在海量資料下的資料探勘、資料分析、智慧推薦、實時分析等。不同公司的技術方案不同，我只列兩個國內成功的案例：• 京東個性化電商，場景包括基於行為、偏好、地域、時間、好友關係等維度，向不同的使用者推薦不同的產品，不同使用者搜尋產品排序也不同…• 百度地圖東莞8小時遷徙圖；百度搜索智慧提醒• 360手機衛士，電話號碼防騷擾功能是透過使用者的地域、身份、騷擾趨勢，將標記的2.56億個電話號碼選出1000個和使用者關聯度最高的，寫入使用者手機的10k的文本里，達到不聯網不做任何網路互動的情況下，為使用者防騷擾

HTML5+CSS3

這是這幾年被說爛了的一個詞，人人都在說HTML5，問HTML5是什麼，他們也說不清楚，就是酷，就是炫，就是酷炫。

在我看來，HTML5只是一個三人成虎的東西，它吸引的眼球遠超過了它提供的功能，HTML5只是提供了一些新的API，就等於一個app從1.0升級到2.0增加了附近的人功能而已。而且其提供的API，也就是在移動端試一試水，在pc端因為相容的問題，始終不能被明媒正娶。pc端的開發還是以HTML4.0+CSS2為基準漸進增強。至於css3，它最被人關注的動畫，也是flash玩剩下的東西。

移動端的飛速發展催化了HTML5的發展，HTML5的發展也促使各瀏覽器趨於標準化。

這條標準化路上，微信功不可沒，1024，圍住神經貓，淘寶十年，LEXUS NX這些融合了大量HTML5+CSS3元素的頁面讓人印象深刻。

此外，微軟拋棄IE代號，開發edge，各大瀏覽器廠商的不斷標準化，HTML5草案定稿，ES6草稿的不斷實現與完善，前端之路看起來是一條京畿坦途，我充滿期待。