十年WEB技術發展歷程

Ajax

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

彼時網吧用的512k的帶寬，註冊的時候，填了一堆信息，提交。頁面跳轉，嘣。」您填寫的信息有誤，請重填」。而後跳轉回註冊頁面，以此循環。我現在時常想，假設當時ajax能普及開來。我就可以省2塊錢了。

那麼ajax是什麼?

首先ajax是一種技術。

以往的網頁交互方式。用戶在點擊一個button後，比方提交button，用戶就要等待漫長的數據和server的交互，期間用戶沒法進行不論什麼操做，僅僅能點根菸。而ajax所作的。就是在向server發送請求的時候，咱們沒必要等待結果。而是可以同一時候作其它的事情，等到有告終果咱們可以再來處理這個事。

事實上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上。開發人員想要給一個button加入事件。要寫長長一大段反覆的代碼去獲取到這個button，再寫長長一大段反覆的代碼去加入事件。

雖然老油條會將常用的操做封裝起來，但是對於不會封裝的新手，這無疑是很是痛苦的一件事，尤爲再加上各類各樣的兼容。

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的受權不會使第三方觸及到用戶的賬號信息（如username與password）。
產生背景：最多見的服務場景，用戶需要使用兩個不一樣企業的服務。登陸驗證A企業。下載內容；而後登陸驗證B企業，上傳內容到B企業服務。複雜又耗時。

無論是用戶。仍是A、B都會想要互通服務。這就產生了覈實身份的需求。舊的username、password機制會形成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爲例，最初兩個pythonproject師用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設備全面支持html五、CSS3，加速了IE消失。
2. 上網隨時隨地發生。鼠標點擊、內容繁複的網頁愈來愈簡潔，響應式設計高速流行。
3. APP和server交互大部分和網頁同樣基於HTTP協議，webapp。hybrid app的概念被提出。

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

• 跨平臺：常說的一次編譯，處處執行
• 免安裝：打開瀏覽器。就能使用
• 高速部署：升級僅僅需在server更新代碼，而不像client需要更新版本號
• 超連接：可以與其它站點互連。可以被搜索引擎檢索

聽起來刁刁的。這些優點卻經不住推敲。

首先，不一樣系統的用戶使用習慣是不一樣的，ios用戶返回button習慣在左上角，而安卓用戶卻習慣在屏幕最下方的位置，產品經理問。那放在哪兒。

呵呵噠不知道。其次，之前看過一個調查報告。問用戶更喜歡用client仍是web端。

喜歡client的用戶遠遠超過了web端。你問我喜歡什麼，我也是喜歡client。你問我爲何，我認爲比較有安全感吧，而且更新版本號讓我認爲很是爽，很是有存在感，讓我知道我並無被世界遺忘。讓我知道大家產品在更新，在爲我擔憂。另外超連接..我一個client要你seo幹什麼。這還沒完，webapp的缺點還有一大把，最大的缺點莫過於沒有GPU加速，想要實現一個複雜一些動畫，真是要了瀏覽器親命了。

其次網頁是單線程的，載入dom時會堵塞js，致使的結果就是，卡。一卡就煩了，煩了就關了，用戶減一。

而hybrid就不一樣了，hybrid app的意思是混合原生應用。將需要頻繁更新的頁面做爲web放在遠程更新。這是一個靠譜的解決方式。BAT有很是多案例，如微信公佈的JS SDK。掌上百度和淘寶clientAndroid版。

固然這裏邊的坑有很是多，有機會。我把我踩過的坑講給大家聽。

NodeJS

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

解決高併發一直是後臺哥哥們樂於討論的問題，比方我們的好近實時監控系統。理論上每個鏈接都會生成一個新線程，每個新線程可能需要 2 MB 配套內存。

在一個擁有 8 GB RAM 的系統上，理論上最大的併發鏈接數量是 4,000 個用戶。

隨着用戶的增加，我們但願監控程序支持不少其它用戶，這樣，就必須加入不少其它server。固然，這會添加業務成本。尤爲是server成本。除了成本上升外。還有一個技術問題：用戶可能針對每個請求使用不一樣的server，所以。不論什麼共享資源都必須在所有server之間共享，到這裏，技術就到了瓶頸。

node誕生的初衷。就是爲了解決問題。node解決問題的方法是：更改鏈接到server的方式。每個鏈接發射一個在 Node 引擎的進程中執行的事件，而不是爲每個鏈接生成一個新的 OS 線程。併爲其分配一些配套內存。

nodejs屬於server端語言。在先後端分離這場圈地運動中是前端的一個有利武器，同一時候在前端本身主動化上也提供了大量的可編程工具（grunt,bower,gulp等），淘寶百度對nodejs的熱度一直很是高，天然而然我認爲這是一個趨勢。

去年美團成立了美團酒店的團隊，選擇了node做爲後臺語言。圈走了後臺大部分的工做。我在想，前端js加上node再加上對UI的技能需求，之後前端project師是否是該叫全端project師了。

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

將來

3D頁遊？WebOS？ 虛擬現實？

最後，隨着用戶硬件性能的提高，網絡帶寬的愈來愈粗。傳感系統。Retina，WebGL技術的日漸成熟。再加上O2O的蓬勃發展，上邊這些會成爲現實麼？