由Google發起的Polymer,它會成為新世代網頁標準嗎?

By | 2017-07-16

一向能用簡單的話解釋一些繁雜的觀念的Hank老師聊到Polymer:

「之前用Javascript或其他framework,按下按鈕後想改變一個文字內容得要getElementById,請瀏覽器去找到那個文字方塊後,再去更動它的內容。瀏覽器算是可憐了,為了要滿足我們的需求,它在讀取了html後,還得為每份文件都建立DOM文件模型,當有人要它幫忙時,再從DOM中搜尋到元件,如果,你們幾個元件想溝通、控制,能夠自己互相來往? 不用透過DOM,那不就無敵了?」

Polymer,從去年(2016)開始展露頭角,現在已進入Polymer 2.0,Polymer進入2.0後,許多國際企業紛紛以它來設計網頁應用,如可口可樂首頁、ING、YouTube等,Polymer是什麼呢? 為什麼它會為網頁開發帶來重大改變? Google準備翻轉下一代網頁標準了嗎?

在開始之前,我們先來看看幾個網站,體驗一下顯示的感覺和速度,Google I/OYouTube GamingGoogle EarthGoogle SiteLifewireSHOPNews

什麼是Polymer?

『有機聚合物Polymer)是指具有非常大的分子量的化合物,分子間由結構單位(structural unit)、或單體由共價鍵連接在一起 。 這個聚合物(polymer)是出自於希臘字:polys代表的是,而meros 代表的是小單位(part),所以很多小單位連結在一起的這種特別的分子,我們稱之為聚合物。』— 維基百科

Polymer是由Google 內 Chrome組織的前端開發人員所主導的一個開放原始碼專案。看了上述聚合物的解釋不難理解為何以此為名,Polymer正是由許多小組件(elements)組合而成,就像組積木般,由各自獨立的組件組合,而組件可大可小可客製化,自由、彈性、擴充性強。是目前少數基於Web Components開發的Library。

Polymer積木

Polymer積木

Polymer首次發表於2013年Google I/O,初發行未受到太多矚目,在當時各家瀏覽器對 Web Components 的支援並不完善,於是出現了像是Polyfills這樣的library來彌補browser的支援度。截至目前各家瀏覽器已經針對Web Components做出修正。

什麼是Web Components

Web Components是由W3C制定的標準,可添加到HTML和DOM裡可重用的組件。一般開發web網頁,無論使用何種語言(asp/jsp/php),不外乎就是把HTML、CSS、JavaScript寫在html檔(.jsp/.asp/.php)裡,一個顯示頁面不管link、include多少檔案(code/css),瀏覽器解析最終結果就是一個內含html、css、javascript、的html檔,即DOM樹狀結構。這樣一來很容易因其他外掛套件或include的內容因命名衝突,導致顯示異常,這類單元測試皆正常,整合後卻出錯的bug,除錯極其困難。

而 Web Components 組件之間的JavaScript、css、html各自獨立,互不干擾又可無縫串接,且同一組件可重用、引用等特性,可以解決長期以來網頁開發者的困擾。

為什麼需要Polymer?

Polymer並非一般MVC Framework,Google開發了大量各式現成組件供Polymer開發者使用,除了Google提供的外,還有大量第三方組件可使用,若要開發自定義組件也非常容易,且各組件間樣式(style)不受其他組件影響(光這點即完勝其他框架),其他優點尚有使用原生JavaScript API,更好的離線支援等等,目的在減輕前端開發人員的負擔、降低前端開發門壏。如前所言,使用Polymer開發網頁就像組樂高般,組合各式現有/自定義組件。

Polymer積木

Polymer積木

Polymer如何顯示動態資料?

Polymer 下載資料時採用非同步作業,在資料下載同時不影響主線程作業,等資料下載完畢顯示資料(庫)內容時,亦不透過瀏覽器解析為DOM樹狀結構(更改HTML內容)來展示內容,而是直接呼叫瀏覽器底層API更新,所以在顯示速度有極大優勢。

Polymer能否離線作業?

採用Progressive Web Apps技術,RWD(響應式)使用者介面,當使用者拜訪網站時並不需要安裝任何程式,使用者愈常拜訪該網站,日後的加載愈快速,甚至可離線作業、在極差的網路環境下收到訊息推撥,也可添加到手機桌面、全螢幕顯示,就好像一支原生的APP般作業。

「企業開發網頁元件或功能時,好不容易用Javascript或jQuery開發一堆元件了,等到五年後,昨是今非,要換成AngularJS或VUE.js了,那才是悲劇呀!如果,有個標準、規範,能以物件導向為基礎,設計出可以很獨立,也能元件間互相配合、溝通,那它很有可能成為明日之星」

polymer是不是很迷人呢?

最後,再欣賞一下使用polymer開發的網頁(本文上方),別忘了放大/縮小(或者用手機觀看)瀏覽器視窗並滑動頁面,看看它的效果呦~

版權聲明

本文章版權為郭香宜所有,授權範圍僅限綠豆湯網站使用,除Facebook之類社群等未更改本文章出處之分享行為不在此限,其他個人或公司未經作者同意,不得任意將本文章內容轉載至其他網站,或以任何形式重製,為以免觸犯著作權法,請尊重作者之智慧財產權。

相關文章:

    None Found

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *