Vue高效UI組件庫—iView開發實踐

前段時間在微軟參加活動，分享了 TalkingData 開源的基於 Vue.js 的高效 UI 組件庫 iView 的一些開發經驗，現整理成文，和你們探討。
本文首發於掘金，轉載請註明出處和做者。

GitHub：https://github.com/iview/iview

關於 iView

開發歷程和命名

TalkingData 可視化團隊使用 Vue 有半年多時間，經歷了從開始簡單的使用雙向綁定，到後來徹底依賴 Vue 全家桶和 Webpack 的演變過程。這套開發模式驗證了多個大中型項目，開發效率有了顯著了提高，工做流也從半自動進化到了開發、灰度、生成環境的全自動，能夠說 Vue 仍是給咱們帶來了很愉快的開發體驗。
隨着組件化的不斷深刻，對組件的複用和維護成了一個問題，因而開始調研市面上的 UI 組件庫，發現基於 Vue 的大可能是移動端的，而針對 PC 中後臺的，能像阿里 Ant.Design(基於React.js) 那樣功能豐富並且高質量的，沒有看中一款，要麼就是不維護了，要麼就是功能太簡單，質量不夠高。因此咱們決定本身開發維護一套高質量的 UI 組件庫。肯定好這個目標，規劃好1.x版本後，就開始這條不歸路，最近三個多月一直投身於 iView 的開發。
至於起 iView 這個名字，其實也沒多想，以 Apple 的產品命名加上 Vue 的發音，簡單好記好讀，同時 GitHub 尚未註冊這個組織名（就爲了這些，也得把它作成一個精品😂）。

使用場景

iView 主要適合大中型中後臺產品，好比某產品的運營平臺、數據監控平臺、管理平臺等，從工程配置、到樣式佈局，甚至後面規劃的業務套件，是一整套的解決方案，因此它可能不太適合一些 to C 的產品，好比 QQ空間 這類的。

面向的開發者

iView 固然主要的面向對象是有過 Vue 組件化開發經驗的前端工程師了，但同時對偏後端的工程師也很友好，由於咱們提供好了環境配置和豐富的文檔教程，即便對於像寫 Java 從未接觸過 Vue 開發的同窗，在一週內也能很快上手，並且基於這套解決方案開發的產品是很是高效的SPA。

版本及兼容

目前 iView 能夠直接經過 npm 安裝，很快將發佈一個重要版本 0.9.7，在這個版本中，咱們對大部分組件的 UI 進行了調整和優化，也豐富了不少組件的功能。
因爲 Vue 自己緣由(這裏不展開)，iView 只能兼容到 IE 9+，表現最好的是 Chrome、Safari、Firefox，有些功能和動畫不能在 IE 下獲得兼容。這也和使用場景有關，通常 to B 的產品，咱們能夠要求客戶去使用高級瀏覽器。

iView 特色

• 基於 npm + webpack + babel + ES2015
• 友好的 API
• 事無鉅細的文檔
• 高質量、功能豐富

由於 iView 目前是在 webpack 下使用的，因此你可使用 webpack 豐富的插件和個性化配置。iView 也是使用了 ES2015 開發。
iView 一個最大的特色，就是咱們從使用者和場景出發來設計 API，這點後面會重點講到。它的文檔也是至關詳細，每一個功能都配有詳細說明和實例代碼，直接複製就可使用，咱們也計劃在明年啓動英文文檔翻譯計劃。
在開發組件時，咱們閱讀了不少已有組件庫的代碼，取長補短，實現代碼的高質量。

目前進度

iView 計劃在2017年初可以發佈1.0版本，1.0將覆蓋40+經常使用 UI 組件，包含 Form表單類，View視圖類，Navigation導航類，Base基礎佈局類，Chart圖表類等。圖中打勾的是已經完成並上線的組件。

24柵格系統

iView 借鑑了 Bootstrap 和 Ant.Design 的柵格系統，支持每行最多容納 24 列的佈局，柵格系統對高級瀏覽器支持 Flex佈局，包括 Flex對齊、Flex排列、Flex順序，也支持柵格的排序、偏移、間隔。友好柵格系統對頁面的拆分佈局起到了關鍵做用，你可能不用再寫任何佈局代碼就能夠輕鬆使用柵格完成你的需求，並且它很精準。

精心設計的 API

咱們在組件 API 的設計上下了不少功夫。不少開發者在實現一個組件時，可能從編程的難易出發思考問題，而忽略了這種設計是否對使用者友好，iView 則一切以使用者爲核心，咱們會思考這樣設計是否對使用者便利，或者若是是我用這個組件，我但願怎樣來用。舉個栗子，常見的頁面信息提示，JavaScript 原生是window.alert('something')，可是用 Vue 來模擬出這樣一個組件，那使用方法就像是 something 。對的，這就是 Vue 組件的實現方法，可是，咱們真的指望這樣使用嗎，固然不是，咱們也想像原生同樣，在某個時刻，一句話就能彈出來，而不用事先埋在 HTML 裏，用一個 if 條件判斷是否顯示這個組件。
爲了更形象的介紹 iView 的 API 設計，咱們拿出了一個經常使用的組件 Modal 模態對話框，和餓了麼的 Element 及 Radon UI 這兩個組件庫進行對比。通常的 Modal 長這樣：

有標題欄(header)、關閉按鈕、正文(body)、底部(footer)操做按鈕，點擊灰色遮罩層或鍵盤 Esc 鍵能夠關閉對話框。

從組件的調用方式上，Element 用的是傳統組件的使用方法，也就是經過一個自定義 HTML 標籤，Radon UI 是實例的方法，iView 同時支持組件和實例兩種方法（這裏解釋一下，Element 也有支持實例調用對話框的組件，是另外一個 Dialog，不過目前是分紅兩個組件使用的）。
自定義 slot 讓組件複用性成爲了可能。Element 支持body、footer的 slot，Radon UI 只支持body，iView 是支持 header、footer、body（其實還有關閉按鈕也支持）的slot，幾乎知足了全部 Modal 自定義需求。
有時候咱們點擊肯定按鈕，不同要當即關閉對話框，而是異步的獲取數據，在某個時刻關閉。Element 須要本身實現這個功能，Radon UI 則不支持，iView 是原生支持，只須要一個屬性配置便可。
在更多的自定義配置上，iView 也是最大化的進行支持（詳細API可查閱文檔）。

事無鉅細的文檔

iView 在文檔編寫上也是作到了事無鉅細（因爲文檔用了一套相對重的方案來實現實例和代碼的友好分離，故目前沒有將文檔開源，咱們會在明年實現一個更好地提交文檔bug及翻譯的方案），每一個組件的每一個功能都有很是詳細的說明，包括像哪些參數須要.sync使用，一些隱藏的功能、可能遇到的坑等等，同時每一個 demo 都有完整的代碼示例，一鍵複製，粘貼後就能夠直接看到效果。
API 也按照 props、events、slot 三部分拆分，避免混合說明遺漏和閱讀不便利。
iView 的文檔是目前全部同類文檔裏最爲詳細的，也受到了不少開發者的好評，因此咱們仍會在文檔開發的工做上保持高產出。

高質量，功能豐富

其實前文已經從各方面介紹了 iView 的高質量和豐富的功能，因此就舉兩個例子吧。

分頁組件 Page：

分頁組件從功能上借鑑了 Ant.Design，支持智能摺疊頁碼（頁碼過多時，會左右摺疊）、頁碼快進（點擊···會快進或快退5頁）、切換每頁顯示條數、電梯，同時還有迷你模式（支持因此普通模式的功能）和簡介模式。

選擇器組件 Select

與瀏覽器原生不一樣的是，首先 UI 統一併且很好看，這是大部分模擬 select 的主要緣由，其次功能更增強大，支持單選、多選，鍵盤的快捷操做，還支持搜索、自定義模板、分組，以及大中小三種尺寸（iView 不少表單類組件都提供了不一樣的尺寸），在單選時還能夠清空選項。

配套工程

最後要說的是與 iView 配套的工做流（github.com/icarusion/v…），好馬配好鞍，這套工做流支撐了 TalkingData 不少大型產品，從開發、灰度到上線均可以一鍵式完成，包括資源的 CDN 配置等等，無論你是新手仍是老司機，均可以從它開始開發。固然 iView 也是支持 vue-cli 的。

Todo

• iView 目前是基於 Vue.js 1.0的，咱們會在未來新開一個分支來支持 Vue 2.0，咱們也認爲 2.0 是將來的趨勢。
• iView 很快會支持不依賴 webpack 的 umd 使用方法。
• 目前的 UI 是以 Ant.Design 爲雛形，咱們在 0.9.7 版本開始逐步優化和替代，使 iView 不只好用，還很好看。
• iView 明年會啓動英文文檔翻譯計劃，也但願喜歡和支持 iView ，同時英語不錯的同窗能夠加入咱們，一塊兒參與翻譯。

後記

iView 從正式發佈1個月內，得到了不少好評，連續5天進入 GitHub Trending（固然，這離不開掘金強大的運營能力😝），在不少社區反響不錯，咱們也會繼續努力，把最好的 iView 組件庫呈現給你們。咱們也很是指望喜歡 iView 的開發者可以加入咱們，一塊兒貢獻代碼或是翻譯文檔，咱們歡迎各類形式的代碼貢獻。若是您有想法加入翻譯計劃，能夠郵件聯繫我：admin@aresn.com