淺談前端開發

趙商 重慶工程學院移動互聯工程研究中心

Web前端開發從曾經的美工到現在的獨立熱門行業，短短的幾年時間，隨著JS或者叫ES的熱門而興起，作為一個高校在職老師，很多同學都問過我類似的問題，前端是什么，前端比后端如何，前端好學么，前端就業如何，如今我就用我對web前端開發的理解和體會，淺淺談談。

首先我們來看看整個Web前端的開發狀況，Web前端應用發展的歷史大概經歷了四個階段：第一個階段使用的是簡單的靜態頁面；第二個階段使用得是JSP、ASP、PHP等動態腳本語言；第三個階段是Web2.0階段，其核心技術是AJAX和JQUERY；第四個階段是基于ES6的各種框架的SPA應用。

整個前端開發技術棧我們可以分為前端語言，前端MVC框架，UI框架，模塊化和打包，自動化構建，包管理，測試工具共七個部分。

1. 前端語言

從ES6或者說ES2015開始，JavaScript語言本身的標準化和發展進入劃時代的階段。除了一些新的語法糖，如胖箭頭、class關鍵字等，讓JS代碼更加清爽外，新的extend繼承方式、let，const變量等特性的引入則讓JS更加像一門“正常”的語言。

異步操作似乎是JavaScript規范一直在孜孜解決的問題，從最早的回調函數，到Promise，到Generator函數，再到async，這些新特性一方面解決了回調地獄問題，另外一方面也讓代碼更加符合人類的串行思維方式。如果覺得Promise這種異步處理方式滿足不了復雜的應用場景，可以采用RxJS。RxJS是響應式編程的庫，基于流式編程使得編寫異步代碼更加容易。

當然有些瀏覽器始終落后于時代，如IE，不支持ES5以后的JavaScript新特性，但好在我們有Babel在，盡管放手使用最新的ES特性。將Babel串到你的構建流程中，它會將新的特性轉化為瀏覽器支持更好的ES5代碼。

2.前端MVC框架

通常前端技術選型最核心的決策點就是所謂的前端MVC框架，目前熱度最高的三大前端框架是Angular（2.0+）、React和Vue。三者都采用了組件化的思想，組件化的將html、js、css組織在一起。

Angular是由Google推出的基于TypeScript的MVVM框架，視圖和模型雙向綁定，通過指令增強模板的表達能力，同時可以自定義組件化的指令，支持依賴注入、注解。由于策略上的問題，Angular2.0與AngularJS 1.0不同，因此，近兩年Angular的活躍度有所下降，但毫無疑問它是一個重量級的企業級框架。

React由Facebook主推，最顯著的特點是一切以JS為中心，HTML和CSS都由JS代碼生成，因而還出現了一種新的語法：JSX。React實現了Virtual DOM，在DOM變化的場景下，有不錯的表現。另外，React本身并不是一個大而全的框架，有自己獨有的狀態管理方式Redux。

Vue是三者之中最新、最輕量的一個框架，由原google程序員尤雨溪發起，也是主要關注視圖部分，既支持雙向綁定也可以單向綁定。Vue既有Angular的模板，又有React的Virtual Dom，性能表現在三者中最好。Vue提供了自己的Vuex做狀態管理。

值得一提的是，上面三個主流框架都有對應的移動端方案，比如Angular對應的Ionic，React的React Native以及Vue對應的Weex。

3.UI框架

UI框架可以分為CSS框架、CSS預處理工具、UI控件庫、數據可視化庫等等。

所謂CSS框架其實也就是提前寫好的一些CSS，只要在你的HTML中加上對應的類，就能展現出CSS應用的效果。CSS框架雖然也很多，但是影響力比較大的仍舊是老牌的Bootstrap、Semantic-ui等，從CSS發展的趨勢看，移動優先，響應式布局，支持網格布局和Flexbox技術，這些是最新CSS框架著力發展的方向。

CSS預處理工具的主要目的是彌補CSS語法不夠強大，解決書寫啰嗦等問題。目前最主流的三個預處理器是SASS/SCSS、LESS和Stylus，主要特性是提供了變量、函數和mixin、import以及一些邏輯控制語法等。

UI控件庫提供諸如 Grid、Calendar、Panel等Web控件，常見的如Ext JS、jQuery UI、EasyUI等。除了基礎控件庫，還有動畫庫如Popmotion，圖標庫如Font Awesome等。

數據可視化庫提供各種統計圖表，如餅狀圖，折線圖等，比較常用是Highcharts、Echarts和C3。如果現有庫還不夠用，可以考慮基于D3自己畫。

4.模塊化和打包

一開始，Web應用還沒有這么復雜，JavaScript根本沒有模塊化的概念，算得上封裝的只是function和object，立即執行函數（IIFE）達到了封裝私有變量的目的，避免了全局變量受到文件內變量的污染。隨著前端應用的發展迫使人們開始考慮模塊化的問題。模塊系統將互相依賴的多個文件和目錄拆分，所有代碼都可以按需加載并彼此訪問。

最早，伴隨著node.js的崛起，CommonJS規范成了JS模塊化的規范。但是由于其采用同步加載的方式，所以并不適合Web應用的模塊化。后來，AMD（異步模塊定義）成為瀏覽器端模塊加載的規范，比較流行的庫是RequireJS。ES6出現之后，JavaScript語言本身終于支持模塊化了。不需要將所有代碼都放在一個IIFE或回調中，只需要在模塊中聲明需要的內容，所有的聲明都被限定在模塊的作用域中，對所有腳本和模塊全局不可見，然后將需要暴露的模塊資源使用export關鍵字導出，當其它模塊依賴此模塊時再通過import關鍵字導入。在不遠的將來，ES內置的模塊化將取代第三方庫。

5. 自動化構建

寫完代碼，在發布前，還需要進行構建，比如使用了TypeScript等方言，需要用Babel transpile到標準的ES5，如果用到CSS預處理工具如SASS，需要從.scss文件生成.css文件，進一步，為了提高前端加載效率，可能需要將js、css等文件打包壓縮，生成雪碧圖等等。grunt和gulp都是前端的自動化構建工具，grunt通過配置驅動，gulp是代碼流式的處理方式，兩者都有大量的插件支持各種任務。比較而言，gulp更加簡單易用，上手更快，要優于grunt。然而，由于webpack等同樣具備自動化構建功能的打包工具的興起，其他自動化構建工具現在的作用不如以前了。

6.包管理

曾經，NPM是Node模塊的管理器，而Bower是前端模塊管理器，前后端包管理分工明確。但是經過幾年的發展，NPM逐漸有一統JavaScript包管理的趨勢，大多數前端模塊都能在NPM上找到。

7. 測試工具（用于單元測試和E2E測試）

根據功能和作用進行分類：

提供測試環境（Mocha，Jasmine，Jest，Karma）

提供測試結構（Mocha，Jasmine，Jest，Cucumber）

提供斷言功能（Chai，Jasmine，Jest，Unexpected）

生成和比較組件和數據結構的快照，以確保以前運行的更改（Jest，Ava）

提 供 mocks，spies 和 stubs（Sinon，Jasmine，enzyme，Jest，testdouble）

生成代碼覆蓋率報告（Istanbul，Jest）

提供一個瀏覽器或類似瀏覽器的環境，控制他們的場景執行（Protractor，Nightwatch，Phantom，Casper）

最后通過從以上這些點，我個人做下對于前端開發的特性總結：

1.雜而難，難度甚至超過了一般的后臺開發，更新變化快。

2.web前端開發正在向響應式和移動端方向大步邁進。

3.做前端開發其實就是做編程，不光要有后端開發的特性，同時還要有設計師的特性。

所以對于勵志于從事前端開發的朋友或者同學來講，如果打定決心想在這條線上走的更遠，那么就要抱著啃透它的決心，砥礪前行。