Esri北京研發(fā)中心原創(chuàng)

Esri(北京)軟件研發(fā)中心成立于2011年,，它是Esri在美國之外成立的第一個研發(fā)中心，也是目前Esri海外最大的研發(fā)中心.,。

時至今日,，Web的發(fā)展經(jīng)過了從無到有、從簡到繁的各個階段,。

1989年,，在歐洲粒子物理實驗室（粒子物理研究通常與來自世界各地的研究所進行合作）的IT部門工作的Tim Berners-Lee向其領(lǐng)導提出了一項名為Information Management: A Proposal的提議：使來自世界各地的遠程站點的研究人員能夠組織和匯集信息，在個人計算機上訪問大量的科研文獻,，并建議在文檔中鏈接其他文檔,，這就是Web的原型。

Tim Berners-Lee

1990年,，Tim以超文本語言HTML為基礎(chǔ)在NeXT電腦上發(fā)明了最原始的Web瀏覽器,。

1991年,，Tim作為布道者在Internet上廣泛推廣Web的理念，與此同時,，美國國家超算應用中心（National Center for Supercomputer Applications）對此表現(xiàn)出了濃厚的興趣,，并開發(fā)了名為Mosaic的瀏覽器，于1993年4月進行了發(fā)布,。

1994年5月,，第一屆萬維網(wǎng)大會在日內(nèi)瓦召開。

從左至右依次為：Joseph Hardin,Robert Cailliau, Tim Berners-Lee, Dan Connolly

1994年7月,，HTML2規(guī)范發(fā)布。

1994年9月,，因特網(wǎng)工程任務組（Internet Engineering Task Force）設立了HTML工作組,。

1994年11月，Mosaic瀏覽器的開發(fā)人員創(chuàng)建了網(wǎng)景公司（Netscape Communications Corp.）,，并發(fā)布了Mosaic Netscape 1.0 beta瀏覽器,，后改名為Navigator。

1994年底,，由Tim牽頭的萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）成立,，這標志著萬維網(wǎng)的正式誕生。

萬維網(wǎng)部分成員

此時的網(wǎng)頁以HTML為主,，是純靜態(tài)的網(wǎng)頁,，網(wǎng)頁是“只讀”的，信息流只能通過服務器到客戶端單向流通,，由此世界進入了Web 1.0時代,。

1995年，網(wǎng)景工程師Brendan Eich花了10天時間設計了JavaScript語言,。起初這種腳本語言叫做Mocha,，后改名LiveScript，后來為了借助Java語言創(chuàng)造良好的營銷效果最終改名為JavaScript,。網(wǎng)景公司把這種腳本語言嵌入到了Navigator 2.0之中,，使其能在瀏覽器中運行。

與此相對的是,，1996年,，微軟發(fā)布了VBScript和JScript。JScript是對JavaScript進行逆向工程的實現(xiàn),，并內(nèi)置于Internet Explorer 3中,。但是JavaScript與JScript兩種語言的實現(xiàn)存在差別，這導致了程序員開發(fā)的網(wǎng)頁不能同時兼容Navigator和Internet Explorer瀏覽器,。Internet Explorer開始搶奪Netscape的市場份額,，這導致了第一次瀏覽器戰(zhàn)爭,。

Netscape的市場份額逐年萎縮

1996年11月，為了確保JavaScript的市場領(lǐng)導地位,，網(wǎng)景將JavaScript提交到歐洲計算機制造商協(xié)會（European Computer Manufacturers Association）以便將其進行國際標準化,。

1997年6月，ECMA以JavaScript語言為基礎(chǔ)制定了ECMAScript標準規(guī)范ECMA-262,。JavaScript是ECMAScript規(guī)范最著名的實現(xiàn)之一,，除此之外，ActionScript和JScript也都是ECMAScript規(guī)范的實現(xiàn)語言,。自此,，瀏覽器廠商都開始逐步實現(xiàn)ECMAScript規(guī)范。

1998年6月,，ECMAScript2規(guī)范發(fā)布,，并通過ISO生成了正式的國際標準ISO/IEC 16262 。

1999年12月,，ECMAScript3規(guī)范發(fā)布,，在此后的十年間，ECMAScript規(guī)范基本沒有發(fā)生變動,。ECMAScript3成為當今主流瀏覽器最廣泛使用和實現(xiàn)的語言規(guī)范基礎(chǔ),。

第一次瀏覽器戰(zhàn)爭以IE瀏覽器完勝Netscape而結(jié)束，IE開始統(tǒng)領(lǐng)瀏覽器市場,，份額的最高峰達到2002年的96%,。隨著第一輪大戰(zhàn)的結(jié)束，瀏覽器的創(chuàng)新也隨之減少,。

JavaScript誕生之后,，可以用來更改前端DOM的樣式，實現(xiàn)一些類似于時鐘之類的小功能,。那時候的JavaScript僅限于此,，大部分的前端界面還很簡單，顯示的都是純靜態(tài)的文本和圖片,。這種靜態(tài)頁面不能讀取后臺數(shù)據(jù)庫中的數(shù)據(jù),，為了使得Web更加充滿活力，以PHP,、JSP,、ASP.NET為代表的動態(tài)頁面技術(shù)相繼誕生。

PHP（PHP：Hypertext Preprocessor）最初是由Rasmus Lerdorf在1995年開始開發(fā)的,，現(xiàn)在PHP的標準由PHP Group維護,。PHP是一種開源的通用計算機腳本語言，尤其適用于網(wǎng)絡開發(fā)并可嵌入HTML中使用。PHP的語法借鑒吸收C語言,、Java和Perl等流行計算機語言的特點,，易于一般程序員學習。PHP的主要目標是允許網(wǎng)絡開發(fā)人員快速編寫動態(tài)頁面,。

JSP（JavaServer Pages）是由Sun公司倡導和許多公司參與共同創(chuàng)建的一種使軟件開發(fā)者可以響應客戶端請求,，從而動態(tài)生成HTML、XML或其他格式文檔的Web網(wǎng)頁的技術(shù)標準,。JSP技術(shù)是以Java語言為基礎(chǔ)的,。1999年，JSP1.2規(guī)范隨著J2EE1.2發(fā)布,。

ASP（Active Server Pages）1.0 在1996年隨著IIS 3.0 而發(fā)布,。2002年，ASP.NET發(fā)布,，用于替代ASP,。

隨著這些動態(tài)服務器頁面技術(shù)的出現(xiàn)，頁面不再是靜止的,，頁面可以獲取服務器數(shù)據(jù)信息并不斷更新,。以Google為代表的搜索引擎以及各種論壇相繼出現(xiàn),，使得Web充滿了活力,。

隨著動態(tài)頁面技術(shù)的不斷發(fā)展，后臺代碼變得龐大臃腫,，后端邏輯也越來越復雜,，逐漸難以維護。此時,，后端的各種MVC框架逐漸發(fā)展起來,，以JSP為例，Struct,、Spring等框架層出不窮,。

從Web誕生至2005年，一直處于后端重,、前端輕的狀態(tài),。

在Web最初發(fā)展的階段，前端頁面要想獲取后臺信息需要刷新整個頁面,，這是很糟糕的用戶體驗,。

Google分別在2004年和2005年先后發(fā)布了兩款重量級的Web產(chǎn)品：Gmail和Google Map。這兩款Web產(chǎn)品都大量使用了AJAX技術(shù),，不需要刷新頁面就可以使得前端與服務器進行網(wǎng)絡通信,，這雖然在當今看來是理所應當?shù)模窃谑畮啄昵癆JAX卻是一項革命性的技術(shù)，顛覆了用戶體驗,。

隨著AJAX的流行,，越來越多的網(wǎng)站使用AJAX動態(tài)獲取數(shù)據(jù)，這使得動態(tài)網(wǎng)頁內(nèi)容變成可能,，像Facebook這樣的社交網(wǎng)絡開始變得繁榮起來,，前端一時間呈現(xiàn)出了欣欣向榮的局面。

AJAX使得瀏覽器客戶端可以更方便地向服務器發(fā)送數(shù)據(jù)信息,，這促進了Web 2.0的發(fā)展,。

Google Trend: AJAX從2005年開始得到開發(fā)人員的廣泛關(guān)注

IE在第一次瀏覽器大戰(zhàn)中擊敗Netscape贏得勝利，壟斷了瀏覽器市場,。作為獨裁者,，IE并不遵循W3C的標準，IE成了事實標準,。

Netscape于1998年被AOL收購前創(chuàng)建了Mozilla社區(qū),，F(xiàn)irefox于2004年11月首次發(fā)布，并且9個月內(nèi)下載量超過6000萬,，獲取了巨大的成功,，IE的主導地位首次受到了挑戰(zhàn)，F(xiàn)irefox被認為是Netscape的精神續(xù)作,。

之后Firefox瀏覽器一路奮起直追,，逐漸蠶食IE市場份額，這引發(fā)了第二次瀏覽器戰(zhàn)爭,。在2008年底時,，F(xiàn)irefox的市場份額達到了25%以上，IE則跌至65%以下,。

第二次瀏覽器戰(zhàn)爭中,，隨著以Firefox和Opera為首的W3C陣營與IE對抗程度的加劇，瀏覽器碎片化問題越來越嚴重,，不同的瀏覽器執(zhí)行不同的標準,，對于開發(fā)人員來說這是一個惡夢。

為了解決瀏覽器兼容性問題,，Dojo,、jQuery、YUI,、ExtJS,、MooTools等前端Framework相繼誕生。前端開發(fā)人員用這些Framework頻繁發(fā)送AJAX請求到后臺,，在得到數(shù)據(jù)后,，再用這些Framework更新DOM樹,。

其中，jQuery獨領(lǐng)風騷,，幾乎成了所有網(wǎng)站的標配,。Dojo、YUI,、ExtJS等提供了很多組件,，這使得開發(fā)復雜的企業(yè)級Web應用成為可能。

Google Trend: 藍色jQuery,，紅色Dojo,，綠色YUI，紫色ExtJS,，黃色MooTools

1999年,，W3C發(fā)布了HTML 4.0.1版本，在之后的幾年,，沒有再發(fā)布更新的Web標準,。隨著Web的迅猛發(fā)展，舊的Web標準已不能滿足Web應用的快速增長,。

2004年6月,，Mozilla基金會和Opera軟件公司在萬維網(wǎng)聯(lián)盟（W3C）所主辦的研討會上提出了一份聯(lián)合建議書，其中包括Web Forms 2.0的初步規(guī)范草案,。建議舉行一次投票,，以表決W3C是否應該擴展HTML和DOM，從而滿足Web應用中的新需求,。研討會最后以8票贊成,，14票反對否決此建議,，這引起一些人的不滿,，不久后，部分瀏覽器廠商宣布成立網(wǎng)頁超文本技術(shù)工作小組（WHATWG）,，以繼續(xù)推動該規(guī)范的開發(fā)工作,，該組織再度提出Web Applications 1.0規(guī)范草案，后來這兩種規(guī)范合并形成HTML5,。2007年,，獲得W3C接納，并成立了新的HTML工作團隊,。2008年1月22日,，第一份正式草案發(fā)布。

HTML5草案發(fā)布不久,，Google在2008年12月發(fā)布了Chrome瀏覽器,，加入了第二次瀏覽器大戰(zhàn)當中,。Chrome使用了Safari開源的WebKit作為布局引擎，并且研發(fā)了高效的JavaScript引擎V8,。

盡管HTML5在網(wǎng)絡開發(fā)人員中非常出名了,，但是它成為主流媒體的一個話題是在2010年的4月，當時蘋果公司的CEO喬布斯發(fā)表一篇題為“對Flash的思考”的文章,，指出隨著HTML5的發(fā)展,，觀看視頻或其它內(nèi)容時，Adobe Flash將不再是必須的,。這引發(fā)了開發(fā)人員間的爭論,，包括HTML5雖然提供了加強的功能，但開發(fā)人員必須考慮到不同瀏覽器對標準不同部分的支持程度的不同,，以及HTML5和Flash間的功能差異,。

在第二次瀏覽器大戰(zhàn)中，各個瀏覽器廠商都以提升JavaScript運行效率和支持HTML5各種新特性為主要目標,，促進了瀏覽器的良性競爭,。在這一場戰(zhàn)爭中，Chrome攻城略地,，搶奪IE市場份額,。2013年，Chrome超過IE,，成為市場份額最高的瀏覽器,。2016年，Chrome占據(jù)了瀏覽器市場的半壁江山,。

全球瀏覽器市場份額（2009-2017）

自2008年以來,，瀏覽器中不斷支持的HTML5新特性讓開發(fā)者激動不已：WebWorker可以讓JavaScript運行在多線程中，WebSocket可以實現(xiàn)前端與后臺的雙工通信,，WebGL可以創(chuàng)建Web3D網(wǎng)頁游戲......

桌面瀏覽器對HTML5支持程度（2009-2017）

2014年10月28日,，W3C正式發(fā)布HTML 5.0推薦標準。

早在1994年,，Netspace就公布了其Netspace Enterprise Server中的一種服務器腳本實現(xiàn),，叫做LiveWire，是最早的服務器端JavaScript,，甚至早于瀏覽器中的JavaScript,。對于這門圖靈完備的語言，Netspace很早就開始嘗試將它用在后端,。

微軟在1996年發(fā)布的IE 3.0中內(nèi)嵌了自己的JScript語言,，其兼容JavaScript語法。1997年年初,，微軟在它的服務器IIS 3.0中也包含了JScript,，這就是我們在ASP中能使用的腳本語言,。

1997年，Netspace為了用Java實現(xiàn)JavaScript而創(chuàng)建了Rhino項目,，最終Rhino演變成一個基于Java實現(xiàn)的JavaScript引擎,，由Mozilla維護并開源。Rhino可以為Java應用程序提供腳本能力,。2006年12月,，J2SE 6將Rhino作為Java默認的腳本引擎。

SpiderMonkey是Mozilla用C/C++語言實現(xiàn)的一個JavaScript引擎,，從Firefox 3.5開始作為JavaScript編譯引擎,，并被CouchDB等項目作為服務端腳本語言使用。

可以看到,，JavaScript最開始就能同時運行在前后端,，但時在前后端的待遇卻不盡相同。隨著Java,、PHP,、.Net等服務器端技術(shù)的風靡，與前端瀏覽器中的JavaScript越來越流行相比,，服務端JavaScript逐漸式微,。

2008年Chrome發(fā)布，其JavaScript引擎V8的高效執(zhí)行引起了Ryan Dahl的注意,。2009年,，Ryan利用Chrome的V8引擎打造了基于事件循環(huán)的異步I/O框架——Node.js誕生。

Node.js具有以下特點：

基于事件循環(huán)的異步I/O框架,，能夠提高I/O吞吐量

單線程運行,，能夠避免了多線程變量同步的問題

使得JavaScript可以編寫后臺代碼，前后端編程語言統(tǒng)一,。

Node.js的出現(xiàn)吸引了很多前端開發(fā)人員開始用JavaScript開發(fā)服務器代碼,，其異步編程風格也深受開發(fā)人員的喜愛。Node.js的偉大不僅在于拓展了JavaScript在服務器端的無限可能,，更重要的是它構(gòu)建了一個龐大的生態(tài)系統(tǒng),。

2010年1月,，NPM作為Node.js的包管理系統(tǒng)首次發(fā)布,。開發(fā)人員可以按照CommonJS的規(guī)范編寫Node.js模塊，然后將其發(fā)布到NPM上面供其他開發(fā)人員使用,。目前NPM具有40萬左右的模塊,，是世界上最大的包模塊管理系統(tǒng)。

2016年常見包管理系統(tǒng)模塊數(shù)量,，NPM高居榜首

Node.js也催生了node-webkit等項目,，用JavaScript開發(fā)跨平臺的桌面軟件也成為可能,。Node.js給開發(fā)人員帶來了無窮的想象，JavaScript大有一統(tǒng)天下的趨勢,。

隨著HTML5的流行,，前端不再是人們眼中的小玩意，以前在C/S中實現(xiàn)的桌面軟件的功能逐步遷移到了前端,，前端的代碼邏輯逐漸變得復雜起來,。

以前只用于后臺的MV*等架構(gòu)在前端逐漸使用起來，以下列舉了部分常用的MV*框架,。

隨著這些MV*框架的出現(xiàn),，網(wǎng)頁逐漸由Web Site演變成了Web App，最終導致了復雜的單頁應用（ Single Page Application）的出現(xiàn),。

隨著iOS和Android等智能手機的廣泛使用,，移動瀏覽器也逐步加強了對HTML5特性的支持力度。

移動瀏覽器對HTML5支持程度（2009-2017）

移動瀏覽器的發(fā)展,，導致了流量入口逐漸從PC分流到移動平臺,，這是Web發(fā)展的新機遇。移動Web面臨著更大的碎片化和兼容性問題,，jQuery Mobile,、Sencha Touch、Framework7,、Ionic等移動Web框架也隨之出現(xiàn),。

相比于Native App，移動Web開發(fā)成本低,、跨平臺,、發(fā)布周期短的優(yōu)勢愈發(fā)明顯，但是Native App的性能和UI體驗要遠勝于移動Web,。移動Web與Native App孰優(yōu)孰劣的爭論愈演愈烈,，在無數(shù)開發(fā)者的實踐中，人們發(fā)現(xiàn)兩者不是替代關(guān)系,，而是應該將兩者結(jié)合起來,，取長補短，Hybrid技術(shù)逐漸得到認同,。

Hybrid技術(shù)指的是利用Web開發(fā)技術(shù),，調(diào)用Native相關(guān)API，實現(xiàn)移動與Web二者的有機結(jié)合,，既能體現(xiàn)Web開發(fā)周期短的優(yōu)勢,，又能為用戶提供Native體驗。

根據(jù)實現(xiàn)原理,，Hybrid技術(shù)可以分為兩大類：

1. 將HTML5的代碼放到Native App的WebView控件中運行,，WebView為Web提供宿主環(huán)境,，JavaScript代碼通過WebView調(diào)用Native API。典型代表有PhoneGap(Cordova)以及國內(nèi)的AppCan等,。

2. 將HTML5代碼針對不同平臺編譯成不同的原生應用,，實現(xiàn)了Web開發(fā)，Native部署,。這一類的典型代表有Titanium和NativeScript,。

Hybrid一系列技術(shù)中很難找出一種方案適應所有應用場景，我們需要根據(jù)自身需求對不同技術(shù)進行篩選與整合,。

JavaScript語言是ECMAScript標準的一種實現(xiàn),，截止2017年2月，ECMAScript一共發(fā)布了7個版本,。

1997年6月,， ECMAScript 1.0標準發(fā)布。

1998年6月,，ECMAScript 2.0發(fā)布,。

1999年12月，ECMAScript 3.0發(fā)布,。

2007年10月,，Mozilla主張的ECMAScript 4.0版草案發(fā)布，對3.0版做了大幅升級,，該草案遭到了以Yahoo,、Microsoft、Google為首的大公司的強烈反對,，JavaScript語言的創(chuàng)造者Brendan Eich和IE架構(gòu)師Chris Wilson甚至在博客上就ES4向后兼容性問題打起了口水仗,，最后由于各方分歧太大，ECMA開會決定廢棄中止ECMAScript 4.0草案,。經(jīng)各方妥協(xié),，在保證向下兼容的情況下，將部分增強的功能放到ECMAScript 3.1標準中,，將原有ECMAScript 4.0草案中激進的功能放到以后的標準中,。不久，ECMAScript 3.1就改名為ECMAScript 5,。

2009年12月,，本著'Don’t break the web'原則，ECMAScript 5發(fā)布,。新增了strict模式,、屬性getter和setter等。

2011年6月,，ECMAScript 5.1發(fā)布,。

2015年6月，ECMAScript 6.0發(fā)布,。該版本增加了許多新的語法,，包括支持let、const,、Arrow function,、Class、Module,、Promise,、Iterator、Generator,、Set,、Map、async,、Symbol,、Proxy、Reflect,、Decorator等,。TC39委員會計劃以后每年都發(fā)布一個新版本的ECMAScript，所以ECMAScript 6.0改名為ECMAScript 2015,。

2016年6月,，在ECMAScript 2015的基礎(chǔ)上進行了部分增強，發(fā)布了ECMAScript 2016,。

在ECMAScript的各個版本中,，ECMAScript 6.0無疑最受人矚目的，它增加了許多新特性,，極大拓展了JavaScript語法和能力,，以至于許多瀏覽器都只能支持部分ES6中的新特性。隨之,，Babel和TypeScript逐漸流行起來,，編寫ES6代碼，然后用Babel或TypeScript將其編譯為ES5等瀏覽器支持的JavaScript,。

ECMAScript以后每年將會發(fā)布一個新版本,，這無疑將持續(xù)促使瀏覽器廠商不斷為JavaScript注入新的功能與特性，JavaScript走上了快速發(fā)展的正軌,。

今天的前端已經(jīng)不再是網(wǎng)頁誕生之初的樣子,，每天都有新的技術(shù)框架涌現(xiàn)。

GitHub + NPM/BOWER + ES6/ES7/Babel/TypeScript + HTML5 + CSS3/SASS/LESS/PostCSS + React/Vue/Angular + Webpack/Browserify/Gulp/Grunt + Node.js/Express/KOA + Hybrid

這就是今天的前端。