前端簡史

若是你對這幾年前端的劇烈變革感到茫然，或許接下來5分鐘的閱讀會有所幫助。

前端太廣袤，我只能試圖從一個側面去窺探在過去的十幾年裏，究竟發生了什麼。

蠻荒時代

Ajax誕生於1998年，2005年開始被普遍使用。也標誌着先後端分離的時代到來，先後端分離極大地解放了前端生產力。大量PC頁面被創造，在反覆的實踐中，人們逐漸沒法忍受原生 JavaScript 繁雜的DOM操做，一個龐然大物悄然萌芽。
2006年，jquery初版發佈，在發佈後數年時間裏，Jquery 社區以一種近乎瘋狂的速度擴張。大量的插件被創造，極大地提高了前端的創造力。
若是咱們把前端的發展時間線作一個梳理，那麼2006年以前，我稱之爲蠻荒時代。

百家爭鳴

• 2008年移動宣佈開放3G網絡，花了兩年時間3G開始普及。
• 2010年6月iphone4發佈，移動時代到來。
• 2013年 Android 以碾壓的優點佔領手機市場。

3G網絡和 Andorid 的普及使得大量APP如雨後春筍般破土而出。當時 Ios 和 android 開發者比較少，要兼容 Android 和 Ios 就要付出高額的人力成本。Hybird App跨平臺優點開始體現。一個只用10天就被創造出來的腳本語言（JavaScript）開始了構建Web App的歷程，前端利器 Jquery 在面對複雜業務邏輯的應用時開始顯得力不從心。

2012年，Ionic 發佈，Hybird 開發模式逐漸成熟。在同時代還有 Mui ，Hybird敏捷的開發速度和跨平臺的優點讓不少公司看到了機會。

若是說開發成本和效率的提高帶來了 Hybird 的風靡，那麼 用戶體驗這個永不落幕的話題就帶來了同時代 SPA 的崛起。與此同時，因爲 Node 在服務端大放異彩，前端開始擁有本身的自動化工具 Grunt 。前端今後也脫去頁面仔的稱號加入了工程師的隊伍。

2009年goole發佈 Angular ，數據雙向綁定，模塊化，數據模型共享，路由開始成爲解決單頁應用複雜業務場景的利器。

Hybird 與 SPA 幾乎在同一時代崛起，咱們姑且將這個秩序極其混亂的時代稱爲前端的戰國時代。

三足鼎立

2013年單頁應用的概念已經深刻人心,與此同時 React 橫空出世。在隨後的一年時間裏，React 以其虛擬DOM、組件化、單向數據流，在性能、編程體驗以及數據流簡潔性上全面超越Angular，以黑馬的姿態脫穎而出。

Hybird 的本質是利用 Android 和 Ios 的webview渲染頁面和交互，而webview渲染效率低下，就致使 Hybird 在性能上與Native相去甚遠。

React Native 開始進入人們的視線，React Native 雖然是使用 JavaScript 構建，可是經過中間框架使得 JavaScript 具有與 Object-C 交互的能力，轉而構建原生應用，因此 React Native 與 Hybird 沒有直接的關係。出道即巔峯，完美的性能和敏捷的開發模式成就了React在前端領域霸主的地位。

歷史老是在高歌猛進中夾雜着悲壯，你方唱罷，我登場，誰都不敢說永遠屹立於巔峯不敗。

2014年 Vue 初版發佈，當時React正風光無量，在 Angular , React 面前，Vue 彷佛絕不起眼。可誰知道，一場暗流洶涌的變革就要來臨。

2015年，Vue 以其更爲輕、快的性能優點，平滑的學習曲線和漸進式地編程體驗開始狂野生長。前端社區也出現了一批狂熱的信徒。或許是 Vue 與 React 有太多的類似之處，每當人們比較兩個框架時，性能和開發體驗彷佛再也不是重點，更多的是指責和謾罵。

歷史老是在人們爭得面紅耳赤時默默給出答案。

• 2015年3月，React Native 發佈
• 2016年5月，Vue 發佈2.0版本
• 2016年9月，Angular 發佈2.0版本
• 2017年3月，Angular 發佈4.0版本

Angular 歷經七年沉澱，在劇烈的迭代中重生而且攜帶 TypeScript 強勢迴歸。它彷佛要向全部人證實誰纔是曾今的霸主，眼見它起高樓，眼見它宴賓客，眼見它樓塌了。儘管這一次 Angular 帶來了許多驚喜，可是它的對手彷佛也更加地強大了，Angular 、React 、Vue在一片喧鬧聲中造成了三足鼎立之勢。

另外一個戰場

2017年就要接近尾聲，站在這個節點上咱們能看到的趨勢，就是合併。中國有句老話「 天下之勢，分久必和 ，和久必分 」。當你們喋喋不休地爭論自家東西有多好的時候，總會有一個大哥站出來，聲振寰宇，打破嘈雜：「 嘿，丟下大家手上那破爛玩意，跟我來 」。

• Jquery做爲上一個時代的王者，逐漸板結固化成爲前端基石。
• Sass成爲css預處理器的最佳選擇，postCss，less逐漸退出歷史舞臺。
• Es6 統一模塊化，RequireJS，CommonJS逐漸被取代。
• Webpack統一自動化工具，Grunt，Gulp成爲歷史。
• Babel，TypeScript因爲鮮明的特性應用於不一樣的業務場景。
• Vue，Angular，React雖然三足鼎立，可是React依舊強勢。

上半場的較量已經結束，下半場的較量剛剛開始。而這一次較量圍繞的核心，並非哪一方面或者哪幾個方面，而是全方面的較量。不只如此，這一次再也不是前端的內戰，而是前端工程師們拿起過去十幾年激烈廝殺而涌現出的利器與Native的較量。

2017年2月goole的chrome團隊宣佈，PWA(Progressive Web Application)將得到與原生一致的體驗，主要包括：

• 離線緩存
• 桌面應用圖標
• 消息推送
• 漸進式的用戶體驗提高

漸進式的用戶體驗提高指的是，經過預加載，預緩存，骨架屏，懶加載等技術減小用戶等待時間以及弱網秒加載，達到Native沉浸式的體驗。

將來已經來臨

2009年，自Node誕生的那一刻起，JavaScript的野心就開始暴露出來，儘管Node在服務端的應用僅限於處理少數高併發的場景。卻成就了前端的自動化工具帶來了前端的空前繁榮。

試想，當Native在性能上再也不佔據優點時，"write once run anywhere"將成爲WebApp最爲強大的特色，並且在編程體驗上，Web敏捷的視圖構建方式和完善的生態系統將全方位地超越Native。那句玩笑話，在不久的未來是否會被應驗：

能被javaScript改寫的，終將被javaScript改寫。

若是有一天，用戶再也不須要應用市場，不須要下載就能即時體驗，開發者不用等待複雜的審覈和上線流程，真正作到敏捷構建，快速迭代的時候，或許那個時代會被稱爲Web3.0。

結語

以上內容爲我的原創，轉載請註明出處。任何有誤的地方，請在下方留言，我會第一時間改正。