這些年,前端開發已然今非昔比

發表於2016-03-17

多年前,有知名企業前端前輩如是說:前端是做什麼的?在一個網頁上你看到的就是前端工程師做的。也有人說:前端是設計師在UED最親密的合作伙伴。很顯然,這些概念放之今日都顯得太片面。

誠然,讓時光倒流幾年,回到div+css剛剛統治網頁設計前端領域的時代,將設計師製作的設計稿用html+css的形式高質量的還原,並最終呈現給網際網路使用者,這幾乎就是前端工程師的全部。如果還能用Javascript(後簡稱:JS)給頁面增加一些動畫或其他互動效果(如:無縫滾動、選項卡等),那簡直堪稱大神了。所以那個年代,前端開發者並沒有大放異彩的條件,地位顯然還很低,而那時IE6還是事實上得標準。

隨著歷史的發展,時逢谷歌Gmail網頁版郵件服務問世,Web富應用時代逐漸到來。Gmail使用的非同步重新整理(Ajax)模式,為網頁前端開發開啟了新紀元。Ajax技術可以讓同一個網頁中的內容在互不影響的情況下分批次的在必要的時候進行更新。這極大程度上降低了網頁白屏時間,在使用者瀏覽的同時進行內容更新而不重新整理頁面,保證了使用者訪問的流暢性,降低了使用者等待成本。因此,這一時期Ajax被大範圍應用到網頁應用中,而前端工程師也順應潮流,紛紛投身JS非同步程式設計。Ajax的使用讓許多企業嚐到了甜頭,前端工程師的地位逐漸得到了提升,很多開發者逐漸在這一領域嶄露頭角,各種非同步框架(Prototype、jQuery等),各種非同步實現方案(頁面懶載入、延遲載入等)層出不窮。

然而,Ajax激起的浪潮遠不止於此。隨著Ajax技術日趨成熟,越來越多的前端開發者已經深入瞭解了它。開發者們發現傳統Web技術,由於頁面結構和資料的組裝都在服務端完成,而在請求響應過程中通過網路傳輸的是大段完整的html片段,甚至整個頁面。這給伺服器帶來了很大的負擔,也浪費了很多的頻寬資源,也間接增加了使用者等待成本,並且在後端模版(例如:針對PHP的Smarty、面向JAVA的Velocity等)的複用上會存在麻煩。為了解決這些問題,優化體驗,資料與結構分離,前後端分離的呼聲逐漸高漲。服務端只負責資料的計算與存取,而資料在網路中以JSON格式的純文字字串的形式傳遞,大部分頁面結構的拼裝工作由前端完成。這樣的技術方案優勢是很明顯的:前後端職責明確,相互獨立,工作上幾乎互不干擾;單個請求傳輸內容上減少了大量的html片段,只保留資料,並且JSON對前後端友好,減少頻寬浪費;結構與樣式完全由前端自己控制,降低前後端耦合等等!在這樣形勢的驅動下,前端工程師們也交出了傲人的成績,諸多優秀的前端模版引擎(Mustache、artTemplate、xTemplate等)應運而生。當然,這也給新時代的前端工程師們提出了更高的要求:瞭解頁面渲染原理、HTTP工作原理、演算法及資料結構等等。無可厚非,此時的前端工程師已然不可或缺。

任何事物都具備兩面性,前端開發日趨重要的同時也伴隨著諸多負面問題。大量的前端業務邏輯大大增加了前端JS程式碼量,前端程式碼的模組化、按需載入、依賴管理勢在必行。大量的業務邏輯也意味著大量前端bug的降臨,新舊版本程式碼的獨立性、版本升級與程式碼回滾問題必須重視。一時間sea.js、require.js等模組管理庫風生水起,前端架構概念逐漸成型,svn、git等版本控制工具也漸漸進入前端領域,前端已不再是單純的頁面仔,不再是單純的html、css和js。

前端程式碼量的劇增,一方面單個js檔案程式碼量過多,導致程式碼維護成本增加,問題定位難度增大,給開發除錯造成了一定困難。另一方面同樣伴隨著網路傳輸時間長的問題,使頁面載入效能受損。因此,開發者們不得不將檔案拆分成多個檔案,充分利用瀏覽器的併發能力以節省這一成本,也讓那些可複用的公共資源得以獨立管理和維護。但是,檔案越拆越多終究讓頁面的HTTP請求數量給頁面效能帶來了壓力。靜態資源的壓縮、請求的合併被推上了前端舞臺。從早期的YUI Compressor,到如今基於Node.js的grunt、gulp等,不斷推陳出新,靜態資源壓縮也已經歷了幾世變化。而在請求合併方面,恐怕由阿里系推出的nginx-concat模組當仁不讓成為了最優選擇。而這一切也要求我們前端開發工程師來完成。

正當開發者們忙於處理如何減少HTTP請求數,如何提升使用者體驗的時候, Web前端開發工程師又迎來了新的挑戰。在移動網際網路行業如日中天的今天,如何實現離線儲存,理想狀態是在沒有網路的環境中也能讓我們的WebApp能夠正常的運作,當然至少要能保證部分內容能夠正常訪問。這興許是在傳統網際網路中無法想象的事情,但是隨著HTML5標準的一步步確定,現代網際網路前端擁有了localStorage、sessionStorage等本地儲存技術,甚至擁有了建立本地資料庫,通過JS呼叫API完成CURD操作的能力,這一切讓離線儲存成為了可能,但這也意味著我們的前端工程師需要掌握更多更復雜的技能。

行文至此,我們看到了JS在前端開發中由最初的跑龍套,到現在大放異彩的主角光環。當然這遠遠不夠,新近推出的ES2015標準(包括Promise+、Generator、Set、Map等等)為JS的未來發展開拓了廣闊的空間。不僅如此,在表現(css)方面,前端的變化同樣是一日千里。從最初的固定佈局,到後來的柵格系統,再到自適應、響應式佈局,一步一步見證著css設計的日漸強大。為了更加靈活簡便的進行css設計,各種css預處理技術(LESS、SASS、Stylus)日漸流行,從此前端開發工程師也可以像寫程式一樣編寫css樣式了。

此外,css3的出現,讓網頁更小更美。圓角、陰影、背景漸變,以及font-face配合網頁圖示字型,讓網頁中圖示資源的使用得到了有效控制。過渡、動畫,帶給網頁飛一般的流暢體驗,將介面層面的動畫交給css實現,讓JS可以更專注的完成業務邏輯處理。其良好使用者體驗卻不相容陳舊瀏覽器(例如:IE6等)的特性,也間接成為了陳舊瀏覽器淡出舞臺的催化劑。

最近剛瞭解到一個“合久必分,分久必合”的前端問題。記得以前為了高效利用瀏覽器併發,許多大公司選擇提供多個圖片資源域名(諸如:img1.alicdn.com、img2.alicdn.com等),但是,如今移動Web肆虐,無線效能優化又提出了“域名收斂”的概念,現在淘寶的圖片似乎只剩下了gw.alicdn.com一個圖片域名,這也許歸功於HTTPDNS。誰知道多年以後又會是什麼樣。

何止這些,當今的前端開發工程師們可謂無所不能。雖然Node.js尚不算前端必備技能,但卻也成為每場前端面試必問的話題。雖然PHP/JAVA等屬於後端程式語言,但卻在每一份前端招聘資訊中總會加上一條“至少熟悉一門後端語言(Node.js/PHP/JAVA等)”。此外,還有諸如Angular、React等新興新型前端框架各領風騷。所以,越來越多的高階前端開發工程師在逐漸演變成全棧工程師,然而我們也不能忽視一些後端開發人員轉做前端從而踏上全棧之路的事實。

最後,我還想說說時下熱門話題:Google高階測試工程師——李世乭與谷歌智慧機器人AlphaGo的圍棋人機大戰正在如火如荼的進行。然而,李世乭的落後也證明人工智慧必將在未來掀起波濤。那麼未來的前端如何與人工智慧結合,這值得我們思考。

相關文章