Ng-Matero V9 正式發佈！

距離 Ng-Matero 初版發佈已通過去了半年多，該項目得到了愈來愈多的關注及喜好，甚至獲得了外國友人的贊助。藉此項目也認識了不少對 Angular 和 Material 感興趣的朋友，現在對項目的維護已經不僅僅是興趣，更多的是一種責任。

Angular V9 已經在二月份重磅發佈，拖沓了一個月，Ng-Matero V9 也終於發佈！其中大部分時間耗在了 Material Extensions 的組件開發上。按照計劃，Ng-Matero 直接從 0.x 過渡到到了 V9。雖然這是早已計劃以內的事情，可是由於不少功能的欠缺，一直猶豫要不要直接發佈 V9。最終仍是激進了一把，先將版本號對齊，以後再慢慢迭代，畢竟 V9 對於 NG 來講也是一個關鍵的里程碑。

Ng-Matero: https://github.com/ng-matero/...
Material Extensions: https://github.com/ng-matero/...

再談 Angular Material

我在以前的文章中狠狠的吹了一波 Angular Material 的設計之美，然而事實是 Angular Material 在設計及實現方面確實很是優秀，從可訪問性、焦點管理、鍵盤交互、CDK 這些方面來看能夠說一騎絕塵。

首先感嘆一下，Bootstrap 的影響力實在在太大了，目前市面上 90% 的組件庫都是以 Bootstrap 爲藍本，我也是 Bootstrap 的忠實粉絲。國內對 Bootstrap 的接受度明顯高於 Material Design。其實 Material 和 Bootstrap 同樣均可以做爲基礎庫使用，經過修改樣式進行風格定製。

惟一須要注意的是，Material Design 與 Bootstrap 最大的不一樣在於表單交互。Bootstrap 的表單元素相對比較獨立，任何第三方表單類組件均可以直接使用。可是在 Angular Material 中就不能如此自由隨意，好比在 Angular Material 的表單中使用 ng-select。雖然 ng-select 有 Material 的主題，可是直接使用的話，你會發現沒辦法展現錯誤信息。全部第三方表單組件都必須繼承 form-field 類才能得到最佳交互體驗。

我我的強烈建議將 Angular Material 做爲基礎庫使用，樣式方面能夠根據喜愛定製，實在沒法接受 Material 的表單交互的話，也能夠搭配 Bootstrap 親自實現一個表單組件，或者直接引用其它組件庫。

擴展組件庫

實話說 Angular Material 確實缺乏一些比較經常使用的交互組件，在開發 Ng-Matero 的過程當中，順便開發了一套 Material Extensions 的組件庫。這套組件庫的組件大體有如下三類：

• 徹底獨立開發的組件（e.g. alert）
• Angular Material 組件的二次封裝（e.g. data-grid）
• 第三方組件的優化及包裝（e.g. color-picker）

在開發擴展組件的時候，遇到了不少問題，簡單說一下 color-picker 的設計。Material 官網並無關於 color-picker 的介紹，因此具體用什麼形式的交互實現徹底由本身探索，最終設計成如今的樣子。其中還有不少的技術細節，好比焦點事件處理、判斷是否在 ShadowRoot 組件內、瀏覽器窗口的 blur 交互等。目前 color-picker 在使用方式上設計的並很差，後期將會重構。

關於擴展組件庫的詳細內容會寫一篇專門的文章介紹。若是你們以爲 Material 還有欠缺的組件或者使用不習慣的地方，能夠在 GitHub 提 issue。

最後，仍是慶祝一下 Ng-Matero V9 的發佈吧，若是你喜歡 Angular Material 或者對 Ng-Matero 感興趣，歡迎與我交流！