Polymer框架——大大降低開發(fā)人員代碼編寫成本
譯文Polymer能夠為大家提供各類必要工具,從而將Material設計元素添加到Web應用程序當中;此外,它同時也是一款相當不錯的開發(fā)框架。
得益于智能手機、大尺寸手機以及平板設備逐步接近PC的強大性能,如今移動端與桌面端的用戶體驗開始變得愈發(fā)一致。而這種一致性的核心概念之一就是利用一種通用型設計語言,并同時在移動應用程序以及Web應用程序當中加以使用。有鑒于此,微軟公司開發(fā)出了用于構建WinJS庫基礎的現(xiàn)代設計語言,而黑莓也同樣利用自家Cascade在bbUI.js當中進行功能構建。
去年谷歌公司推出其Material Design語言及其Plymer框架。Material Design作為基礎性機制,能夠幫助開發(fā)人員在最近Android系統(tǒng)當中設計出與谷歌外觀與使用體驗思路相符的成果。其同時為我們的代碼提供原生UI組件以及一整套用于實現(xiàn)效果匹配的Web組件。
立足于***Web技術,Polymer是一套負責為應用程序構建可重復利用UI組件的框架。與React非常相似,其能夠以自己的方式對頁面元素進行提取,并利用其作為設計基礎。元素目錄的存在簡化了使用流程,幫助用戶更為輕松地查看并選取自己需要的元素,同時將其作為標準HTML元素應用在頁面當中。需要添加地圖?大家只需要找到合適的Polymer地圖元素,將其導入而后作為標簽進行調(diào)用即可。
雖然Polymer主要使用現(xiàn)代Web標準,特別是Web組件,但其在相對陳舊的瀏覽器上同樣能夠順暢運行。大家可以利用polyfill中間層通過一條JavaScript代碼在陳舊瀏覽器上加載必要的庫,從而為其賦予對特定Web組件子集的支持能力。
在初始階段,我們首先需要利用Bower這類工具來確保自己在安裝某種組件的同時,也將其全部依賴元素進行了安裝。這意味為我們的應用程序設置一個合適的配置文件,不過一旦通過Bower命令行安裝了Polymer,其就會始終保持更新。大家也可以選擇為整套Polymer版本下載一個Zip文件,不過如此一來就沒法享受自動更新帶來的便利了(而且如果大家使用GitHub,那么需要自行管理運行依賴關系)。
一旦安裝完畢,大家接下來要做的就是將自己的頁面導入進去,以保證在定義元素之前首先為其添加核心Polymer功能。大家可以從零開始創(chuàng)建新元素,構建出一套模板并添加內(nèi)容。在創(chuàng)建出一個元素之后,我們則能夠著手將其與其它元素相結合,同時利用Polymer的AJAX支持能力添加數(shù)據(jù)綁定以及通過JSON實現(xiàn)的外部API鏈接。
Polymer還允許大家將自有元素與公共API相結合,這樣它們就能對特定事件做出反應并進行數(shù)據(jù)處理。由此衍生出的功能可謂不計其數(shù),而這也正是Polymer實現(xiàn)動態(tài)內(nèi)容交付的核心機制所在。我們可以將事件引入到元素整個生命周期之內(nèi)的各個方面,從其創(chuàng)建完成后就始終與之結合。這樣一來,大家將可以讓元素具備諸多新特性,例如在其準備好接受調(diào)用時給出相應信號。大家還能夠向元素中添加聲明數(shù)據(jù)綁定,從而更為便捷地將來自外部數(shù)據(jù)源的內(nèi)容填充進去。
在為某個元素指定了API之后,我們可以發(fā)布其屬性,使其擁有與HTML屬性類似的運行方式。接下來的任務就很簡單了,我們將某個元素的數(shù)據(jù)綁定鏈接至一項屬性,從而幫助設計人員快速進行屬性設定——正如其面對任何傳統(tǒng)HTML元素一樣。
使用Polymer的核心優(yōu)勢在于針對特定應用程序構建設計元素:一旦構建完成,其從本質(zhì)上等同于HTML標簽。開發(fā)人員可以構建并記錄一種元素,而設計人員則將其運用在頁面布局當中。通過這種方式,我們既不需要學習新的開發(fā)機制,又能保證開發(fā)者與設計師充分利用Polymer的靈活性優(yōu)勢來構建出易于理解的Web應用程序。
谷歌公司的Polymer組件庫為大家提供了在向Web應用程序當中添加Material Design元素時所必需的多種工具選項,不過其同時也作為一套開發(fā)框架存在,幫助我們根據(jù)需要構建自有組件或者對現(xiàn)有元素進行自定義。大家還可以利用附帶數(shù)據(jù)綁定的Polymer模板交付動態(tài)內(nèi)容,即為組件提供需要處理的數(shù)據(jù)。
一旦大家構建或者導入了一個Polymer元素,其將以等同于任意HTML元素的形式運作,這意味著我們能夠利用這些基礎元素快速構建起更為復雜的UI功能。大家還可以直接使用一整套主題元素集合(谷歌將其稱為‘紙上元素集合’),或者直接使用那些適用于現(xiàn)有設計工作的非主題組件。
Material Design以及Polymer的一大核心特性在于,其能夠利用圖標來顯著簡化頁面布局。在構建我們所熟悉的Android UI的過程中,Polymer會利用一套圖標組件集將SVG圖像添加到頁面當中,而庫中直接提供的超過150種圖標能夠根據(jù)名稱進行調(diào)用并被添加到應用內(nèi)。同樣的,其還提供一套規(guī)模龐大的控件庫,允許我們直接在頁面中加以使用。在傳統(tǒng)UI框架及HTML當中,大家可能需要編寫大量代碼來實現(xiàn)某些設計目標,例如在應用程序當中添加進度條——不過有了Polymer,我們可以直接將其作為一個能夠賦值的簡單元素,而后供Angular等其它框架加以使用。如此一來,在單頁面Web應用當中構建動態(tài)元素就變得非常輕松了。
雖然Polymer確實是一款有趣且非常靈活的UI框架,但其真正價值在于證明了Web組件確實能夠為我們的應用程序所運用。隨著對Chrome、Opera、火狐、Safari以及最近的微軟Edge瀏覽器的全面支持,這些組件很可能會迅速成為UI元素交付工作中的核心,特別是考慮到其承諾帶來的小型高速度Web應用在市場上的顯著吸引力。利用這些只在需要時載入的元素取代原本體積龐大的JavaScript UI顯然***現(xiàn)實意義,而小型頁面也將使得移動Web變得更加友善,同時大大降低開發(fā)人員的代碼編寫成本。