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