近幾年來(lái)，前端地位發(fā)生翻天覆地的變化，這得益于互聯(lián)網(wǎng)產(chǎn)品的廣泛的應用，以及用戶(hù)對于用戶(hù)體驗提出更加人性化的要求。
同樣，在云計算領(lǐng)域，要想我們的產(chǎn)品脫穎而出，在滿(mǎn)足用戶(hù)基本功能的前提下，也要確保產(chǎn)品的高可用性與強易用性。
本文立足于時(shí)下最火熱的前端開(kāi)發(fā)框架，結合云計算技術(shù)，深入介紹實(shí)際項目遇到的開(kāi)發(fā)瓶頸，并預測未來(lái)產(chǎn)品的發(fā)展趨勢。
二、前端發(fā)展趨勢
一）主流前端框架設計思想
現如今，前端領(lǐng)域一直在叫響一個(gè)聲音，“No jQuery”。如果你是剛剛接觸前端的開(kāi)發(fā)人員，可能會(huì )對這一點(diǎn)產(chǎn)生疑惑。確實(shí)，早期前端的世界，jQuery的地位就如同Java在后端的地位。沒(méi)有幾個(gè)做前端開(kāi)發(fā)的沒(méi)有聽(tīng)過(guò)jQuery。但如今為啥我們要摒棄jQuery呢？這還得從互聯(lián)網(wǎng)這幾年的發(fā)展趨勢看這個(gè)問(wèn)題。
的確，單從代碼實(shí)現的角度看，只要你的團隊精通這項技術(shù)，并且能夠儲備足夠的后備開(kāi)發(fā)人員，任何技術(shù)、任何框架都是不存在問(wèn)題的。所以，摒棄jQuery的原因就不是技術(shù)問(wèn)題了，而是市場(chǎng)需求的變更。
如今的互聯(lián)網(wǎng)開(kāi)發(fā)模式也跟早期開(kāi)發(fā)模式不同，尤其是移動(dòng)互聯(lián)網(wǎng)興起的這幾年。傳統互聯(lián)網(wǎng)開(kāi)發(fā)通常只有兩種：Web開(kāi)發(fā)和桌面開(kāi)發(fā)。當時(shí)應用的復雜性與多樣性也不能跟現在應用相比。所以往往都是一個(gè)程序員包攬整個(gè)項目的研發(fā)。而現在的應用，沒(méi)有一個(gè)“漂亮的臉蛋”和“友好的交互”，根本不會(huì )引起用戶(hù)的問(wèn)津。所以開(kāi)發(fā)人員由此細分成前端開(kāi)發(fā)和后端開(kāi)發(fā)。前端主要負責頁(yè)面跳轉、交互、數據的展示等，而后端負責提供微服務(wù)、數據庫讀寫(xiě)等。
再往后，各類(lèi)框架的蓬勃發(fā)展，各種編程思想的不斷提出。前端框架也吸取其思想精華，結合Web的具體環(huán)境，逐漸產(chǎn)生出Angular、React、Vue等等這些優(yōu)秀的前端開(kāi)發(fā)框架。
無(wú)論哪種前端開(kāi)發(fā)框架，一般都擁有類(lèi)似的幾個(gè)共同點(diǎn)：
- 單頁(yè)面應用
- DOM雙向綁定
- 支持組件化，并能實(shí)現組建件通信
- 支持數據流
- 支持RESTful
通過(guò)這些共同點(diǎn)，我們也不難發(fā)現試下流行前端開(kāi)發(fā)框架的設計思路。那就是把每個(gè)前端應用看成是一個(gè)個(gè)分布式結點(diǎn)，既能維護自身邏輯，有能提供借口供其它應用調用，等應用形成一定規模，就想天上的星星，不僅相對獨立，又彼此密不可分。如此，恰恰符合云計算應用的各種特性。
二）Flux/Redux思想介紹
前端的特性有很多，其中跟云計算結合最為緊密的，要數Flux/Redux了。
Flux/Redux最開(kāi)始是由React提出的，為滿(mǎn)足頁(yè)面結構復雜的大型應用程序所設計的。Redux設計思想很簡(jiǎn)單：
- Web應用是一個(gè)狀態(tài)機，視圖與狀態(tài)是一一對應的。
- 所有的狀態(tài)都保存到一個(gè)對象里。
圖 1 Redux模型
這種狀態(tài)機的思想與云計算的思想不謀而和。當云計算規模龐大時(shí)，也同樣需要監控數字指標進(jìn)行狀態(tài)管理，而前端應用程序其實(shí)就可以看成一個(gè)簡(jiǎn)單的云計算應用子集，如此，眾多的應用相互聯(lián)系，就能形成龐大的云計算前端體系。
三、Web設計原則
一）設計師的職責
隨著(zhù)前端的發(fā)展，設計師的工作也悄然發(fā)生變化。從前一個(gè)美工就能勝任的工作，如今被劃分成更細致的崗位：UI設計師、交互設計師和用戶(hù)體驗設計師。這里不詳細展開(kāi)介紹設計師的具體工作，僅僅立足于前端開(kāi)發(fā)的視角，談?wù)勗O計師的工作重心。
前面介紹了主流前端框架的設計思想，設計師不僅要能設計出漂亮的界面，也得酌情考慮編碼的支持。尤其是工作經(jīng)驗豐富的設計師，其交付給前端開(kāi)發(fā)人員的設計界面，不再是簡(jiǎn)簡(jiǎn)單單的一張圖片，而應該是結構劃分清晰，需求描述準確的多尺寸設計圖。前端開(kāi)發(fā)工程師再根據其設計好的圖片，精準還原需求設計。
二）如何做好符合云計算應用的前端設計
前面簡(jiǎn)單介紹了前端發(fā)展背景下的設計師職責，那么云計算領(lǐng)域的設計師又該做何種技能選擇呢？
首要的一點(diǎn)是，設計師得根據實(shí)際項目的風(fēng)格確定產(chǎn)品的設計基調。是走擬物風(fēng)格，還是走扁平風(fēng)？是暖色調為主，還是冷色居多？這是設計師首要考慮的問(wèn)題。因為這個(gè)基調先定好，后面的設計工作才能有序展開(kāi)。
其次，是要以組件化的思維去設計頁(yè)面，這點(diǎn)跟前端組建化開(kāi)發(fā)思路保持一致。何為“組件化設計思維”？就是把一個(gè)個(gè)頁(yè)面元素看成是一個(gè)個(gè)單獨的組件，設計時(shí)，不僅僅要追求單個(gè)組件的細致，更重要的是要追求組件放入頁(yè)面之后整個(gè)頁(yè)面的實(shí)際效果。
由此，設計師最終產(chǎn)出的成果，不僅僅是一張張漂亮的圖片，還得是一整套風(fēng)格統一的組件設計元素。往后的設計工作，就由重新設計一張張圖，變成一個(gè)個(gè)元素的搭配，由此工作效率和可行性將得到大大提高。
四、前后端分離思想
一）前后端分離原理
前面提到主流前端框架的公共特性，不僅僅是為了滿(mǎn)足我們實(shí)際的業(yè)務(wù)需求，還有一個(gè)重要原因就是為了做前后端分離。
前后端分離這個(gè)概念也不是什么新東西了，主要就是為了解耦開(kāi)發(fā)團隊的工作。
前端開(kāi)發(fā)工程師在NodeJS技術(shù)之下可以不用完全依賴(lài)后端的服務(wù)，而可以自己寫(xiě)數據服務(wù)。不用再等待后端接口編寫(xiě)好后才開(kāi)始自己的開(kāi)發(fā)，完全可以模擬自己的數據請求來(lái)實(shí)現完整的業(yè)務(wù)流程。由此進(jìn)行開(kāi)發(fā)，不僅能減少前后端聯(lián)調所需的時(shí)間，更能保證彼此的開(kāi)發(fā)速度不受太大的干擾，保證項目的開(kāi)發(fā)速度。
二）前后端分離實(shí)踐
國內外互聯(lián)網(wǎng)巨頭早就已經(jīng)開(kāi)始進(jìn)行前后端分離的實(shí)踐了，比較典型的就是阿里的基于NodeJS的全棧式開(kāi)發(fā)。簡(jiǎn)單的說(shuō)，就是在傳統Java層與Browser層中間加一層NodeJS層。
那么加了這一層效果怎樣呢。淘寶雙十一千萬(wàn)級并發(fā)訪(fǎng)問(wèn)量告訴我們，這樣的解決方案是可行并且是有效的。
圖 2淘寶基于NodeJS的前后端分離分層
五、數據可視化
數據可視化并不是簡(jiǎn)單的把數據變成圖表。而是以數據為視角，看待世界。換句話(huà)說(shuō)，數據可視化的客體是數據，但我們想要的其實(shí)是——數據視覺(jué)，以數據為工具，以可視化為手段，目的是描述真實(shí)，探索世界。
當下數據可視化工具不少，百度的eCharts，一直都很火的D3.js，開(kāi)源地圖Leaflet等等。運用這些控件，能讓?xiě)贸绦蛑庇^(guān)地向用戶(hù)展示數據之間的聯(lián)系和變化情況，讓產(chǎn)品在同類(lèi)產(chǎn)品中脫穎而出。
作者簡(jiǎn)介
董覓，烽火集成軟件工程師，從事軟件前端相關(guān)開(kāi)發(fā)工作。擅長(cháng)html5、css3、canvas等前端技術(shù)，尤其在數據可視化領(lǐng)域的前端技術(shù)實(shí)現有深入研究，了解市場(chǎng)主流數據可視化相關(guān)技術(shù)實(shí)現方案。
