十年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的技能需求，以后是不是前端工程師是不是該叫全端工程師了。

P:我我對node只有粗淺的了解，也是以后希望學習的方向,不辯。

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草稿的不斷實現與完善，前端之路看起來是一條京畿坦途，我充滿期待。