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