靜態頁面

那一年，是靜態頁面的年代。

最早期的Web介面基本都是在網際網路上使用，人們瀏覽某些內容，填寫幾個表單，並且提交。當時的介面以瀏覽為主，基本都是HTML程式碼，有時候穿插一些JavaScript，作為客戶端校驗這樣的基礎功能。程式碼的組織比較簡單，而且CSS的運用也是比較少的。

由美工負責設計好網站介面，再用一些自動化的軟體拉伸幾下和切圖，將設計好的圖就可以通過網頁排版軟體輸出表格的佈局，排版，細節調整，一個網站就出來了。

我們用的是Dreamweaver，更老的是Frontpage.
少帥Elwin還是堅持：手寫HTML程式碼是基本功

網站頁面逐漸複雜，開始表現和內容相分離，CSS逐漸盛行；
網站也需要有動態效果，我們開始編寫基礎的Javascript指令碼，更多時候是Javascript指令碼的搬運工。

那一年，前端工程師是一個橋樑：
對於設計師，他是一個工程師，配合使頁面儘量達到和設計一致效果
對於程式開發人員，他是一個設計師，將設計頁面轉化為靜態頁面，需要用程式碼對設計頁面進行最初的還原，實現好相應的前臺的效果

智慧手機初起，WAP頁面開發
雖然是智慧手機，但依然是靜態的WAP頁面，依然是要用傳統的方法進行HTML+CSS的排版，只不過為了適配手機，需要學習更多WML和WMLSCRIPT語言。

那一年你做得最多是什麼？

• 瀏覽器相容，跟IE不同版本鬥爭
  
  
• 解析度適配

• HTML DOM值獲取和判斷

• Alert

動態頁面和動態技術年代

這個時代的典型特徵是Ajax的出現，最為典型是Gmail，因為恰當地應用了這些技術，獲得了很好的使用者體驗。由於Ajax的出現，規模更大，效果更好的Web程式逐漸出現，在這些程式中，JavaScript程式碼的數量迅速增加。

出於程式碼組織的需要，“JavaScript框架”這個概念逐步形成，當時的主流是prototype和mootools，這兩者各有千秋，提供了各自方式的面向物件組織思路，對一些原生的JavaScript型別提供了一些擴充套件、封裝和一些資料結構定義。

這個時代的明星除了Ajax外，還湧現一個超級巨星jQuery.

jQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫，相容各種瀏覽器，核心理念是寫得更少,做得更多。jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發的庫。

如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。當時比較多人使用他作為動態特效和DOM的連續操作，現在更多人通過外掛來擴充套件。

09 年之前，JavaScript 還處於對自身語言的完善過程中，而到了 09 年，JavaScript 類庫已經頗為成熟，jQuery/Prototype/YUI/Dojo 等都已經發布了好幾個穩定版本，各大類庫也是相互吸收優點，不斷完善並提高自身效能，

同時，樣式上，CSS2.0是一套全新的樣式表結構，讓程式設計師開發時可以不考慮顯示和介面就可以製作表單和介面，顯示問題可由美工或是程式設計師後期再來編寫相應的 CSS2.0樣式來解決，實現比較理想的內容和表現效果真正分離。

Web2.0年代

2010-2011 年 HTML5 的技術發展和推廣都向前邁進了一大步，語義明確的標籤體系、簡潔明瞭的富媒體支援、本地資料的儲存技術、canvas 等等各類技術被廣泛應用，基於H5的移動端開發工具和除錯工具也日益成熟。

jQuery 已經成為大小公司日常開發的標配，成千上萬的 JQ 外掛讓網頁開發變得尤為輕鬆，同時Node.js已經悄然崛起，前端技術也開始滲入服務端開發領域的陣地。

2012年，隨著智慧手機的發展，萌生了眾多移動端框架，如 Sencha Touch/Zepto.js/JQ Mobile 等，相對 PC 端框架，它們更加輕便。

CSS3語言逐漸成熟，將以前的規範作為一個模組實在是太龐大而且比較複雜，目前朝著模組化發展的，出現了LESS、SASS和 Stylus 等預處理語言，Web 開發變得更加緊湊。

此時這個時代的一個巨星Bootstrap，也被Twitter也推出了，Bootstrap提供了優雅的HTML和CSS規範，它簡潔靈活，使得 Web 開發更加快捷，也是多端響應適配的利器。

隨著Web應用的日益複雜和需要適配的終端的多樣式，單頁面應用程式、響應式開發、動態載入、預處理語言在前端開發逐漸盛行。

程式設計思想的切換，迎來了 CoffeeScript 和 TypeScript，在前端工程化上，幾個派系相互爭鬥，產出了 AMD、CMD、KMD 等規範，也衍生了 SeaJS、RequireJS 等模組化工具。

這個時代，前端開發技術不僅僅是介面的頁面顯示實現了，更加作為一種獨立的開發技術，跟類似JAVA/PHP/c#等比肩作戰了。

前端攻城獅們，這個年代變化太跳躍，跟上了嗎？

工業化年代

這個時代，隨著Web端功能的日益複雜和專案越來越龐大，人們開始考慮這樣一些問題：

• 如何更好地多人協同開發？
• 如何更好地做好系統持續更新和迭代開發？
• 如何更好地模組化開發和分工
• 如果更好管理越來越龐大的程式碼和頁面資源？

大型專案碰到的前端難題

一個大型的JavaScript專案通常需要解決哪些問題?

• 成千上萬行的程式碼的更新,迭代,重構；

• 多人蔘與/長時間維護,開發職責區分困難;

• 大型頁面和單應用頁面載入速度問題;

• 靜態資源(html/js/css/圖片資源等 )過多導致上線時的重複性工作量增大;

• 眾多外引用包的管理;

解決方法：

－成千上萬行的程式碼的更新,迭代,重構：

採用封裝,繼承 等現代化程式語言的面向物件程式設計方式，使用prototype/__proto__這些技術棧。

－多人蔘與/長時間維護,開發職責區分困難：

參考JAVA等開發模式和框架，採用合適的前端MVC、MVP、MVVM框架，我們把這些框架統稱為MV*框架。掌握前端框架可以更好的區分職責,而框架統一的 API實現了長時間多人開發/維護的可能性。

相關框架：
操作虛擬 DOM( Virtual DOM )的 React;
單純的踐行 MVC 理論的 Backbone.js;
MVM 風格的 AngularJS等

－頁面載入速度問題：

由於SPA是單頁面應用,因此頁面在載入的時候幾乎包含了全部功能,但使用者往往卻只使用其中的一部分,所以網速的限制,頻寬的浪費,使用者的等待則是另一個難題。

『模組化開發』 是解決這類難 題的銀彈,而 AMD / CMD的理論自然成為前端開發者們掌握的必要知識,而 requre.js / seajs則是 這些理論的具體實現方式。由於 Http 的特性所致 ( 分散的,小的靜態資源在載入的時候更慢 ),因此合併/壓縮則是另外一個解決方案。

－靜態資源過多導致上線時的重複性工作量增大：

當這類靜態資源很少的時候,手動合併/壓縮 並沒有問題,反之這些資源呈指數上升的時候,手動方案顯示不是一個好辦法。自動化方案 的引入勢在必行,而其中踐行者:grunt/gulp/webpack就需要掌握了。

－眾多外引用包的管理：

JavaScript 先天不具有其它語言的包管理功能，components、bower、spm這類技術棧為我們解決了包管理問題，目前npm 開始主導整個市場。

其他前端技術

ECMAScript 6

ES6（ECMAScript2015）的出現，無疑給前端開發人員帶來了新的驚喜，它包含了一些很棒的新特性，可以更加方便的實現很多複雜的操作，提高開發人員的效率。

ES6是一種新的javascript規範，他最重要的特性（之一）就是包含了：Class（原生OOP）和Module（原生模組化）方案。

注：這個是編寫Javascript的另外一個高效語言，但是否要採用，還有待時間認證。

Mobile H5應用框架

結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。

React Native由FB推出，設計理念引入了很多新的概念，在 JavaScript中用React抽象作業系統原生的UI元件代替DOM元素來渲染，採用元件化，JSX，Flux等，學習曲線比較陡峭.

MUI,國產的，配合官方的IDE Hbuilder使用，算是目前在低端安卓裝置上表現最好的Hybrid框架，UI控制元件模仿了ratchet

阿里推出的Weex，有些人稱為Vue-Native，採用Webcomponents形式宣告組建和搭建介面，通過transformer層把元件中的資料繫結，style等的解析提前到了在渲染真實dom之前，編譯成json，或js function。最後在Web View中直接生成dom，在native中生成native控制元件。

未來前端開發

使用者體驗變得越來越重要，響應式技術的發展也是後續網頁應用的一大特點，端和端之間的差異只是在表現上，越來越多移動端應用的釋出已經脫離了後端，前端完全通過非同步方式獲取資料。

JavaScript 從客戶端的指令碼語言縱身躍進進入了後端行列，而今也開始深入到移動端 Native 領域，確實是無孔不入。Web APIs 將會成為 Web App 和 Mobile App 的一箇中心點，前端基於後端的 RESTful 服務構建應用，也給前端開發者創造了無數的可能。

前端攻城獅未來的發展，可能會是Web技術棧的不斷融合，包含了從前端設計、互動、前端實現、網路資料傳輸、後端實現、後端運維和資料庫等幾個方面。

回到現在，學習建議

少帥Elwin給前端入門者的建議：

基礎要紮實，手寫HTML,CSS,Javascript是基本技能一定要掌握好。

不為使用框架而使用框架，根據專案實際需要使用框架。

推薦入門掌握框架：jQuey,Bootstrap，進階框架（偏應用類場景使用）：AngularJS,RequireJS.

遵守幾個規則：

• DRY(Don‘trepeatyourself), 不要重複自己

• 簡單原則(Keep It Simple and Stupid)

• 低耦合原則(Minimize Coupling)

• 採用適合團隊使用的技術，而不是最好的技術或框架