我所經歷的前端開發變化

         你們都在說，前端的變化太快了。每當前端有新的進展，同行都會調侃，別更新了，學不動了。變化太快，快在哪裏，那些發生了變化，我從本身說短不長的三年前端開發，來反映這些年的變化。

        雖然只有剛剛三年開發經驗，可是由於有外包的經驗，歷通過大大小小的項目。這些項目中既有使用最新的技術，也有四五年前一路維護下來的舊的技術。下面從幾個方面來一一來探討。

1 語言變化

首先HTML，其實我不太知道HTML5之前的版本是什麼樣的，由於從我進入這個領域，就是在H5最火熱的時候，只知道HTML5會多一些新的標籤，好比video、canvas，同時也有一些新的存儲方案好比sessionstorge.如今的瀏覽器基本都支持這些變化。

其次是CSS，變化固然是CSS3,增長了一些新的動畫屬性如transition和佈局屬性如flex等，能夠搭配HTML5作出一些炫酷的頁面效果。我知道的變化僅僅如此，由於我沒有經歷過CSS2以及更老的時期。

對於HTML和CSS的這些變化，瀏覽器都有一個支持的過程，其中不得不提IE系列，入行的時候，項目還要求兼容IE7，因此我從網上找了一系列的IE hack語法，可是如今我都忘記怎麼用了，就連IE都好長時間沒有打開過了，最近打開微軟的瀏覽器是試用換了Chrome內核的Edge。看看，三年之間，微軟都變芯了。

最重要是是js的變化，2015年ES6發佈了，那時候我還沒入編程，還不知道有JavaScript這們子語言，到今天ES七、ES8都發布了。固然大部分瀏覽器還不能徹底支持這些新的語法，還要依賴babel來轉譯爲ES5。

說到ES6，還要提一下coffeescript，在某個老項目接觸到過，發現會有大量的語法，好比箭頭函數，跟ES6很相似。在ES6發佈前，coffeescript好像還挺火，因此技術選型選擇了它。固然ES6發佈之後，你們都切換到這個「正統」的標準上，coffeescrpt也落寞了。

js在服務器端版本的nodejs，這幾年也在大量進入到實際的項目上，而不只僅做爲前端的一些工具使用。就我所經歷和了解的狀況，nodejs會在大型公司如阿里和創業型公司落地較多。大公司都有主力後端語言，nodejs並無能力去撬動好比java、php等的地位，可是能夠幫助前端拓展業務邊界，好比做爲BFF層，既能夠解放後端，又能賦能前端。小的創業公司可能人員和技術都很靈活，更青睞於先後端語言的統一，這樣nodejs就頗有自然的競爭力。

還要說下Typescript,可能當下很是火，我並無用過，可是據說許多前端都推薦項目上使用，而且好像越大的項目效果越好，好比vscode這個開源項目夠大吧，都已經所有用Typescript開發了。

2. 代碼組織結構的變化

代碼組織結構實際上是跟項目大小相關的，比方說一個活動頁，可能最傳統的html、css、js就徹底能知足，若是非要加入webpack等反而畫蛇添足。

同時也跟js模塊化的發展而變化，ES6發佈前，js並無原生提供模塊化的。

傳統的開發，就單純的前端三劍客就足夠了，只要在html頁面引入css和js，同時要保證js的引入順序，否則可能會報錯。並且多人開發，常常會發生命名衝突的事情，因此就有了函數封裝、對象封裝、IIFE閉包這種基礎的模塊封裝。

再後來，隨着nodejs推出的commonjs模塊規範，在瀏覽器端也有AMD和CMD這樣的模塊工具出來。同時npm包愈來愈流行，如今前端應該都會npm install 吧。

等到ES6，開始有原生支持的模塊化語法。固然如今瀏覽器尚未徹底支持。

3. 框架（庫）的變化

不能否認，Jquery的時代一去不復返。but 我所在的公司還有好老項目是在用jquery開發的，由於前面公司用的都是vue or react，用Jquery的時候很是至少，最多用到它的ajax方法。因此如今天天跟jquery還有zepote打交道，都不得不查文檔，同時能深入體會到這種手動一個一個改變dom的麻煩 、亂，還有不可維護性。

Jquery以後，還有backbone(好像這麼寫）...以及Angular等一系列MVC框架的出現，大大提升前端的開發效率，固然我入行時候，他們都不怎麼火了，好奇，我也沒在項目上碰到他們。好吧，這裏就短短一提，以表尊敬。

再而後 ,React出現了，靠着jsx以及virtual dom高性能的表現，迅速躋身框架一哥。去年在項目上開始用React，大概有一年了。

當我2016年開始接觸前端，學的是最新的Vue，對我這種新手很是友好，接觸到的也是官方一手文檔。也是靠着Vue找打的工做。可是老實說，我跟喜歡React。

目前來講，我今年作的項目中，既有Jquery（固然都是老項目），也有React，還有Vue。

4. 工具的變化

如今用的大概都是webpack，由於你若是用Vue或React，基本上就不得不用webpack。

之前多是grunt or gulp，他們都只是流程工具，可是webpack確實模塊打包工具。

5. 開發方式的變化

無非開發-聯調-測試-上線萬年不變的流程。可是具體到開發-聯調這個階段，其實變化也發生很大變化了。由於做爲前端，除了純靜態頁面，基本上都要依賴後端。簡單來講，就是先後端分離的變化。下面作個比較。

先後端不分離時代，舉其中一種例子：

前端項目是做爲後端項目的一部分，好比一個java後端項目，開發初期，我須要單起一個分支，裝好java環境，裝上intelj IDEA,裝上gradle，而後啓動這個java項目，前端開發html 、css、js，跟後端商定接口格式，而後造一些假數據，來完成基本流程。等後端開發完成後，合併代碼，在用真的接口返回的數據進行聯調。上線也不用前端操做，直接隨後端項目上線。

這種開發方式很是痛苦，由於你並不熟悉後端這一套工具，常常服務啓動不了或報錯，一搞搞半天。其實這還不算最痛苦的，曾經有個項目，後端是Php，前端要開發samrtPHP模塊，還必須登陸開發機上，在linux環境下，用vim來寫代碼，是否是要了命了。

先後端分離時代：

如今基本上都是先後端分離，先後端只經過接口聯繫。這就很爽了，前端只須要前端這一套環境，nodejs、webpack等等，只要接口文檔肯定了，想怎麼開發怎麼開發。

其中，更進一層，前端經過nodejs開創了BFF（backend for frontend）層，鏈接口都接管了，後端只須要提供基礎的微服務。不再用發愁跟後端要求返回這個這個這個字段。

更進一步，如今前端開始經過nodejs，開始ssr（服務端渲染），來解決客戶端渲染產生的白屏等問題。

變化是無時無刻的，總結這些變化，才能更好的把握當下和預測將來的趨勢。