如何評價 Google 發布的前端框架 Material Design Lite？

01-05

感覺和bootstrap很像，能取而代之嗎，特別是在輕量級的項目中

雖然沒有用過，但是我覺得我可以回答這個問題。因為我用過angular material,就是谷歌基於angular之上對material design的一套實現，算是同類產品吧。

首先，谷歌自家對material design的落實肯定是非常到位的，這毋庸置疑。

但是，學庫和框架一味追新潮是有代價的。

幾個月前我用angular寫東西，選擇樣式框架的時候，被angular material的強大驚艷到了，於是決定入坑。

入坑之後發現還是有些比較硬傷的bug,比如滾動頁在滾動之後ripple的定位問題，並且發現github上面挺多issue的。畢竟這個項目太年輕，遠未成熟。不過當時仍覺得，有些bug大不了避開它就是了，不影響整體使用。於是用它同angular組合使用來實現一個material design的網頁應用。說實話，一開始在自己作品上看到實現效果的時候還是蠻激動的。

很酷，真滴很酷。尤其是看過material design設計規範之後，會不由自主喜歡上這種約束。

當然，在此期間我也在手機上看過網頁（chrome和Firefox的移動版），基本沒有問題的，大多數時候只是抱怨ripple效果沒電腦上的好而已。

後來，在微信上打開了一次半成品，布局成了垃圾堆，讓我意識到我這個單頁應用可能是白做了。然後立即下載國內移動端瀏覽器大哥UC瀏覽器，打開，不忍直視。再用這倆瀏覽器打開angular material的官網，好么，連官網也無法正常顯示和使用。於是徹底打消了繼續使用angular material的念頭。

畢竟如果受眾在國內，移動端還是國產瀏覽器為準，況且微信QQ的受眾又那麼大。

好，回到問題，對於問題中提到的這個新的玩意兒，我現在第一反應就是用國產手機瀏覽器打開Material Design Lite官網看看。

這是微信上的樣子：

整個都橫排了，而且文字重疊在一起，不可用。

這是UC上的樣子：

UC上乍一看，不錯，還行的樣子。但是發現右側內容顯示不全，於是按住頁面往坐滑動，發現橫向沒有滾動，缺失的內容並沒有出現，莫非是被overflow:hidden了？

所以，儘管谷歌最近出的這些前端工具比較酷，但是中國的國情並沒有在他們的考慮範圍內啊，如果你寫的是網頁，並且受眾在國內，請三思。

當然，也不一定完全沒有價值，比如我發現國內就有人在拿angular material寫webapp打包成app用。但是這個受眾面就沒那麼廣了，呵呵。

本人沒有專業系統的學習bootstrap和material design，也就是業餘。不過也想結合一下目前的實際應用來說說。目前能看到的大部分國內網站主要還是用bootstrap+jquery，material design肯定要結合angular來用，google的polymer我也用過開發過很簡單的程序，作為一個之前一直用b+j的人來說感覺angular有很多很炫的功能，比如數據綁定這種，還有在polymer這種一切皆組件的設計模式也很不錯。不過這些資料在國內來說還是很少，層主在搞polymer就發現了這個問題。而bootstrap+jquery的資料和插件在國內來說目前資源是比較豐富（只是基本把。。每次還得搜外面），可能難度較低。記得之前看過競鹿開發人員的一個博客，他們一開始就有一個版本是angular的，不過在後來因為部分原因放棄了，這其中有功能實現和兼容性的問題。不過我不是一個專業前端也就不多說，層主認為短時間內是取代不了的。

這裡放個themeforest的一個模板的bootstrap版本和angular的鏈接（可能需要翻牆）

bootstrap： http://pages.revox.io/dashboard/latest/html/#usa

angular： http://pages.revox.io/dashboard/latest/angular/#/app/tables/dataTables

後端的福音。

MDL已死，來自MDL的github：

Limited support

Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository.

No further development is taking place in MDL by the core team, but we are happy to review PRs, fix critical bugs and push out new releases. No breaking changes will be accepted.

開發的第一個web app就用的angular material。當初技術選型的時候一看，這個設計理念很規範，很先進，抱著玩一玩的心態做的。

感覺這個東西還比較年輕，很多功能沒有現成的，比如placeholder,比如下拉刷新(github 上有個下拉刷新的插件，跟現在知乎用的這個下拉刷新樣式是一模一樣。)，所以有些需要自己花費大量時間來寫。

在我開發的那兩個月就更新過一次，更新後有些東西會變化，不影響功能。

只兼容原生瀏覽器，不支持uc一類的，所以只能打包成app。

它的按鈕和列表的點擊做的比較炫，不過後來測試，在性能一般的機子上跑起來會明顯卡頓，所以列表的點擊特效就給去了。

總結一下，可以嘗試著玩玩，正式的大型項目要三思。

最近在玩sematic,中文官網還沒翻譯完，不過可以看英文官網，從個人角度看，比起bootstrap，semantic要好一些，語意化嘛，用起來好利索。

最後，寡廉鮮恥的po一張angular material的web app首頁:

好多是框架基於bootstrap實現了material design,那這方面兼容性或許會好點