聚合物和網頁元件在後來非常熱門,由於這個生態系統正快速演進,因此開發人員通常很難掌握所有最新的異動。
在 Chrome 開發人員高峰會中,Polymer 團隊工程經理 Matt McNulty 在他說明 Polymer 時,也說明瞭 Polymer 1.0 的藍圖。
什麼是 Polymer?
首先,Polymer 究竟是什麼?
Polymer 是一種程式庫,可協助你在網頁元件外建構元素和應用程式。網頁元件是一組先進的新標準,可讓開發人員使用自己的自訂元素擴充 HTML 詞彙。
由於網頁元件的設計,是瀏覽器的基本功能,因此功能非常強大,但等級也非常低,需要使用一些程式碼。
Polymer 會將語法「中斷」的語法變得更加簡單,以利執行網頁元件。這個 API 可減少需要編寫的樣板程式碼數量,並新增宣告式樣式,因此建立網頁元件就像編寫 HTML 一樣簡單。
Polymer 實驗
Polymer 最初是進行實驗,看看我們是否能對 Web Component 標準進行多項式處理,並在所有瀏覽器推出這些技術前,就先取得開發人員的意見回饋。隨著越來越多的開發人員開始使用 Polymer,它從 polyfill 變為具有效率提升功能的實際程式庫 (資料繫結、屬性變更監看程式、自動節點尋找等)。不過所有實驗都有結果,這是怎麼做到的?
雖然許多開發人員表示,在 Polymer 中運用網頁元件的表達方式和生產力獲得好處和工作效率,但他們也對效能和整體複雜度有疑慮。
其中突顯了 Polymer 所秉持的一貫原則,包括推動網路平台未來發展的實驗,同時也要創造開發人員能依賴實際工作環境的工具。
近期異動
Polymer 團隊仔細檢視了程式庫的每個功能,目標是設計更精簡且能投入實際工作環境的版本,讓開發人員安心使用。
圖層
Polymer 已重構為一系列圖層。核心功能不但速度飛快,而且可自由選用。以大部分用途來說,核心功能應該符合開發人員的需求。
簡化資料繫結
Polymer 的資料繫結系統也大幅提升了效能。根據分層做法,雙向繫結現已選擇啟用,預設為單向繫結。此外,已經明確表示已發布的屬性類型,且屬性變更現在會觸發事件,協助您更輕鬆地通訊來自不同程式庫的元素。
Leaner Shadow DOM
陰影 DOM polyfill 是工程領域的精彩工程。該設計旨在全面且符合規格需求,這對於全面測試平台原始功能相當重要,但在不幸地造成 Polymer 未使用功能的許多效能瓶頸造成的困擾。
新一代的 Polymer 會採用不同的方式,採用的填充樣式層只會填入 Polyfill 所需的項目。
系統將為一般、非 Polymer 網路元件啟用現有的 polyfill。
移至 webcomponents.org
說不定的是,Polyfill 的用戶也有新的家了。目前許多開發人員不清楚 Polymer 和 Web 元件之間的關係。有些認為您必須使用所有 Polymer 才能使用網頁元件,事實上,您只需要使用 polyfill。
為明確區分,polyfill 已移至 webcomponents.org,且現已重新命名為 webcomponents.js
。
這項變動旨在協助其他程式庫作者使用 polyfill 而不會造成任何混淆。Polymer 團隊將繼續對 polyfill 做出貢獻,但希望這項改變有助於社群更廣泛的共享資源。
成果
這些改變帶來哪些成果?
速度
Chrome 的 Polymer 速度快了 5 倍,使用 Safari 時則速度提升為 8 倍。
檔案大小
檔案大小也減少了 87%,從 123 KB 縮小到 15 KB (經過 6 KB 的 gzip 壓縮)。
發展藍圖
下一版將有一些 API 破壞性變更,以新的版本號碼 (0.8) 表示,但團隊要明確說明這不是重寫程序。將目前的專案從 Polymer 0.5 移至 0.8 應相當簡單。
Polymer 團隊也擬定了一份藍圖,協助開發人員進一步瞭解即將推出的版本。
0.8 預先發布版目前以 GitHub 上的分支版本的形式提供,但這項服務仍在開發中,而且沒有在說明文件中。0.9 官方 Beta 版預計於 2015 年第 1 季推出,第 1 季將於第 2 季推出。
實驗已結束
隨著 Polymer 的最新變更,其背後的團隊正為網頁元件奠定基礎,成為每個開發人員堆疊的重要一環。如果您是網頁元件的新手,現在正是時候來一探並熟悉這些革命性技術吧。如果您已經使用元件 (和 Polymer),未來的確看起來亮眼。敬請留意 Polymer 網誌,以掌握所有最新消息。另外,你也可以訂閱 Polymer 郵寄清單,以提出問題或意見。快樂入侵!