聚合物與 Web 元件在出現後會成為熱門議題,而且這個生態系統的發展迅速,因此開發人員往往難以掌握所有最新變化。
在 Chrome 開發人員高峰會中,Polymer 團隊的工程經理 Matt McNulty 說明 Polymer 是什麼,並列出 Polymer 1.0 的藍圖。
什麼是 Polymer?
首先,Polymer 究竟是什麼?
Polymer 是一種程式庫,可協助你運用網路元件建立元素和應用程式。網頁元件是一組先進新標準,可讓開發人員以本身的自訂元素來擴充 HTML 詞彙。
因為網頁元件是用來成為瀏覽器的新基本功能,這表示其功能強大,但也非常低廉,與其需要加上一些程式碼。
Polymer 允許「發光」語法,讓網頁元件更易於使用。這個程式庫可減少您需要編寫的樣板程式碼,並加入宣告式樣式,讓建立 Web 元件就像編寫 HTML 一樣簡單。
聚合物實驗
Polymer 開始進行實驗,試圖瞭解我們能否填補 Web Component 標準,並在這些技術將技術發布到所有瀏覽器之前,先獲得開發人員的意見回饋。隨著越來越多的開發人員開始使用 Polymer,Google Workspace 從 polyfill 變成真正的程式庫,包含資料繫結、屬性變更監看器、自動節點尋找功能等。不過所有實驗都有結果,是如何?
許多開發人員表示 Polymer 中對使用網頁元件的表徵性和工作效率有所提升,但他們也對效能和整體複雜度有所疑慮。
這突顯了 Polymer 在這方面經歷的自然張力:除了在推動網路平台向前推陳出新之外,同時也要創造出值得開發人員依賴的正式環境。
近期異動
Polymer 團隊仔細檢視了程式庫的每個功能,目標是淘汰可用於正式環境的先進版本,讓開發人員能夠放心使用。
圖層
聚合物已重構為一系列圖層。核心功能速度飛快且不會變動,其他進階功能則啟用。以大多數用途來說,核心功能應涵蓋開發人員的需求。
簡化資料繫結
Polymer 的資料繫結系統也已大幅提高效能。以分層方式執行後,雙向繫結現已選擇採用,且預設為單向繫結。此外,已發布的屬性類型已有明確規定,而屬性變更現在會觸發事件,協助不同程式庫的元素進行通訊。
Leaner Shadow DOM
Shadow DOM 聚合物是相當出色的工程技術。這款產品採用全方位且符合規格的設計,對於完整測試平台基本測試很重要,但很可惜,對於 Polymer 不使用的功能,存在一些效能瓶頸。
下一版的 Polymer 將採用不同的方法,採用僅填充 Polymer 需求的填充式圖層。
現有的 polyfill 可以留存在一般、非 Polymer 網路元件上。
移至 webcomponents.org
說到 Polyfill 的說法,他們也可以踏上新的家園。目前,許多開發人員不懂 Polymer 與 Web 元件之間的關係。有些人認為,您必須使用所有 Polymer 來使用網頁元件,但實際上,您只需要 polyfill。
為更清楚地區分, polyfill 正移至 webcomponents.org,並重新命名為 webcomponents.js
。
這項做法的設計目的,是協助其他程式庫作者使用 polyfill,且不會造成混淆。Polymer 團隊會持續為 polyfill 做出貢獻,但我們期望這項變更能成為社群中共享資源的最佳選擇。
結果
那麼這些變化的結果是什麼呢?
速度
Chrome 的 Polymer 現在速度更快 5 倍, Safari 的速度更是加快 8 倍。
檔案大小
此外,檔案大小也減少了 87%,從 123 KB 縮減為 15KB (6 KB gzip)。
發展藍圖
下一個版本將有一些 API 破壞性變更,會以新的版本編號 (0.8) 表示,但團隊想明確說明這並非重寫。將目前的專案從 Polymer 0.5 移至 0.8 應該很容易上手。
Polymer 團隊也擬定了藍圖,協助開發人員更清楚瞭解即將發布的版本。
0.8 預先發布版現在以 GitHub 的分支版本的形式提供 (但仍處於積極開發階段,說明文件也尚未充分提供)。官方 Beta 版 0.9 預計於 2015 年第 1 季推出,第 2 季有時也將提供 1.0 版本。
實驗已結束
繼 Polymer 近期的異動後,幕後的團隊將為網頁元件奠定良好基礎,成為每個開發人員堆疊中不可或缺的一環。您剛接觸過網頁元件嗎?現在就來瞭解一下並熟悉這些轉換技術。如果您已經使用元件 (和 Polymer),未來看起來很亮。敬請持續關注 Polymer 網誌,一手掌握所有最新消息,也別忘了註冊 Polymer 郵寄清單,以尋求問題或意見。祝您入侵愉快!