兩年前，我開始接觸 Vue.js 框架，當(dāng)時(shí)就被它的輕量、組件化和友好的 API 所吸引。之后我將 Vue.js 和 Webpack 技術(shù)棧引入我的公司（TalkingData）可視化團(tuán)隊(duì)，并經(jīng)過(guò)一年多的實(shí)踐，現(xiàn)已成為整個(gè)公司的前端開發(fā)規(guī)范。
與此同時(shí)，我開源了 iView 項(xiàng)目，它是基于 Vue.js 的一套高質(zhì)量 UI 組件庫(kù)，從設(shè)計(jì)規(guī)范、工程構(gòu)建到國(guó)際化都提供了完整的解決方案，并支持 SSR。在許多志愿者的幫助下，將文檔全部翻譯為英文，在 Vue 開發(fā)者社區(qū)頗受歡迎。

去年的 7 月 28 日，一個(gè)名叫 iView(github.com/iview/iview) 的工程立項(xiàng)了，今天正好是它一周歲生日。回想當(dāng)初只是作為一個(gè)團(tuán)隊(duì)組件庫(kù)來(lái)開發(fā)，風(fēng)風(fēng)雨雨經(jīng)歷了一年，已經(jīng)成為 Vue 社區(qū)最受歡迎的組件庫(kù)之一了，在 GitHub 也收獲了近 8000 Star，npm 每月有 10k 多安裝。當(dāng)然，這一切的成果，都離不開公司給予我的支持和 Vue 社區(qū)的活躍。

彩蛋

既然是紀(jì)念日，就來(lái)點(diǎn)好玩的吧。我們重新裝飾了 iView 官網(wǎng)，今天開始的一周里，可以在首頁(yè)發(fā)彈幕，來(lái)和世界各地的朋友們一起暢（chě）聊（dàn）吧。

2.0

iView 一周年，對(duì)于開發(fā)者來(lái)說(shuō)最好的消息，就是我們終于發(fā)布 2.0 的第一個(gè)正式版。在過(guò)去的 4 個(gè)多月里，我們連續(xù)發(fā)布了 19 個(gè) rc 版，其實(shí)早可以發(fā)布 2.0 正式版的，并在此基礎(chǔ)上迭代。遲遲不發(fā)，就是想把最好的一個(gè)版本帶給大家。當(dāng)然，即使今天發(fā)布了正式版，依然還有不少問(wèn)題等待解決，一個(gè)好的組件庫(kù)是需要經(jīng)歷不斷磨練。

來(lái)回顧一下，從 1.0 到 2.0，iView 有哪些重要改變：

最重要的當(dāng)然是支持 Vue 2 了，其次支持了 SSR 和 Nuxt.js，對(duì)常用組件進(jìn)行了擴(kuò)展：Table 單元格的渲染基于 Vue 的 Render 函數(shù)，并支持展開；Select 支持遠(yuǎn)程搜索；Cascader 支持異步和搜索。還有 100 多項(xiàng)細(xì)節(jié)優(yōu)化。2.0 正式版，更是加強(qiáng)了 Table組件，優(yōu)化了其 8 個(gè)問(wèn)題，所有的浮層類組件都增加了 transfer 屬性，可以選擇是否將其插入到 body 內(nèi)，使用更靈活。具體的更新內(nèi)容可以查看更新日志。

聊聊英文版

上個(gè)月，我們已將 iView 文檔全部翻譯為英文，前前后后進(jìn)行了 3 個(gè)多月才算完成。有了英文版后，更多的國(guó)外開發(fā)者也參與到 GitHub 討論之中，相信接下來(lái)會(huì)有更多來(lái)自國(guó)外的 contributors。

上圖是來(lái)自 Vue 社區(qū)一位國(guó)外開發(fā)者的評(píng)價(jià)。

英文版的翻譯離不開社區(qū)的貢獻(xiàn)，在此特別感謝 lcx960324、rijn 和 BigChief45 三位熱心志愿者。

版本號(hào)的故事

iView 從 2.0 版本開始，版本代號(hào)將以獲得過(guò) Apple Design Awards 的游戲或優(yōu)秀的獨(dú)立游戲來(lái)命名。

每個(gè)開源項(xiàng)目的版本代號(hào)都有它的故事。作為一枚熱愛(ài) iOS 獨(dú)立游戲的玩家，每每看到畫風(fēng)精致、劇情動(dòng)人的好游戲都會(huì)流連忘返，推薦給身邊的同事，所以用它來(lái)命名，也算是對(duì)獨(dú)立游戲的一種支持。

2.x 的第一個(gè)版本（2.0）代號(hào)是 Leo's Fortune（里奧的財(cái)富）。

這只是開始

iView 已經(jīng)很好地幫助前端開發(fā)工程師們加速完成中后臺(tái)業(yè)務(wù)開發(fā)，但作為一個(gè)有追求的大數(shù)據(jù)可視化團(tuán)隊(duì)，這僅僅只是一個(gè)開始。下半年，TalkingData 可視化團(tuán)隊(duì)將繼續(xù)開源兩個(gè)重磅級(jí)項(xiàng)目：

• InMap：基于 Canvas 和 WebGL 的地理信息可視化框架
• InChart：基于 Vue.js 和 eCharts 的圖表標(biāo)準(zhǔn)庫(kù)

這兩個(gè)項(xiàng)目都會(huì)給數(shù)據(jù)可視化帶來(lái)福音，其中值得詳細(xì)介紹的是 InMap，事實(shí)上它的歷史要早于 iView，只是一直屬于閉源狀態(tài)，在 TalkingData 內(nèi)部使用。這次也是鼓足了勁，在 API 和易用性上進(jìn)行重構(gòu)后開源。

在地理可視化的過(guò)程中，因?yàn)榈貓D的矢量數(shù)據(jù)不是一次性加載的，矢量數(shù)據(jù)是隨著用戶的請(qǐng)求，隨著瓦片一起加載到本地的。在這個(gè)過(guò)程當(dāng)中存在兩部分的計(jì)算比較多，限制了可視化繪制的速度，一個(gè)就是各種數(shù)據(jù)的坐標(biāo)轉(zhuǎn)換，另一個(gè)就是各種數(shù)據(jù)的可視化。目前 InMap 中使用了 web worker 在后臺(tái)對(duì)矢量數(shù)據(jù)使用多線程計(jì)算，保證頁(yè)面對(duì)用戶響應(yīng)的同時(shí)對(duì)各種數(shù)據(jù)進(jìn)行計(jì)算，對(duì)于其他適合并行計(jì)算的坐標(biāo)數(shù)據(jù)采用 GPU 進(jìn)行轉(zhuǎn)換。繪制可視化層使用了 WebGL。

下圖是基于 InMap 實(shí)現(xiàn)的一個(gè)全 3D 地球，可以實(shí)現(xiàn)自傳、公轉(zhuǎn)、隨意拖拽旋轉(zhuǎn)、放大縮小等立體效果。

InMap 和 InChart 預(yù)計(jì)會(huì)在數(shù)月后和大家見面，敬請(qǐng)期待！

對(duì)開源現(xiàn)狀的一些思考

能夠完整參與一個(gè)開源項(xiàng)目，見證它從 0 到 1 的改變，對(duì)我來(lái)說(shuō)確實(shí)是一件幸運(yùn)的事，因?yàn)閺倪@段開源經(jīng)歷里，學(xué)到了太多的知識(shí)，也結(jié)實(shí)了很多開發(fā)者。開源是一件很有意義的事情，然而很多國(guó)內(nèi)開發(fā)者卻有一個(gè)不好的習(xí)慣，他們被統(tǒng)稱為“伸手黨”。相比很多國(guó)內(nèi)開發(fā)者提出的 issues，我更喜歡去解答國(guó)外友人的英文 issues，這不是因?yàn)橛⑽目雌饋?lái)有多高大上，而是國(guó)外朋友的提問(wèn)都很友善，而且是經(jīng)過(guò)深思熟慮的。在求知的態(tài)度禮帽上，這點(diǎn)國(guó)人做的確實(shí)不好，如果你 watch 了 iView 的項(xiàng)目，每天會(huì)收到幾十封郵件，其中大多沒(méi)有按照 issue guide 的要求來(lái)問(wèn)，close 掉，還經(jīng)常被罵，一陣負(fù)能量。試問(wèn)，這些不按要求問(wèn)題，還態(tài)度惡劣的人，你們?yōu)殚_源做過(guò)什么貢獻(xiàn)呢？開源是免費(fèi)，但不是說(shuō)用了開源產(chǎn)品就是大爺，那么牛逼，干嘛不自己造輪子呢。

這樣的問(wèn)題不僅僅發(fā)生在 iView 上，我同 VUX（知名移動(dòng)端 Vue 組件庫(kù)） 的作者也深刻探討過(guò)，在 VUX 的社區(qū)也會(huì)帶有不少類似的負(fù)能量。這種不良現(xiàn)象在國(guó)內(nèi)應(yīng)該還有很多，VUX 的 readme 曾今寫的這段僅有的中文，正是寫給這部分人看的：

我相信提 issue 的朋友初衷都是好的，都是來(lái)解決問(wèn)題的，只是聰明的、真正想解決問(wèn)題的人，都會(huì)花費(fèi)一些時(shí)間來(lái)認(rèn)真填寫 issue 內(nèi)容。付出就有回報(bào)，任何一個(gè)認(rèn)真的提問(wèn)，我也會(huì)認(rèn)真的回答，而那些隨隨便便提的問(wèn)題，連代碼格式化也不會(huì)的也會(huì)被隨隨便便關(guān)掉。

開源是世界的，所以請(qǐng)善待 GitHub 社區(qū)。

最佳實(shí)踐

從 2016 年下旬開始，TalkingData 的眾多新項(xiàng)目開始使用 iView，部分核心項(xiàng)目已逐步開始使用 iView 重構(gòu)。以下是部分項(xiàng)目的截圖：

使用者的心聲

TalkingData 數(shù)據(jù)工程師 王祥：
上半年，部門的兩條重要產(chǎn)品線 App Analytics 和智能數(shù)據(jù)市場(chǎng) (SDMK)，用 Vue iView 完成了產(chǎn)品重構(gòu)，效果顯著。下半年，其它幾個(gè)重要產(chǎn)品，也計(jì)劃引入 Vue iView 技術(shù)棧。iView 的引入，保證了各產(chǎn)品線的視覺(jué)統(tǒng)一，設(shè)計(jì)師幾乎不需要參與到產(chǎn)品研發(fā)過(guò)程，降低了人力成本；工程師們可以更專注在業(yè)務(wù)上，避免了除了業(yè)務(wù)代碼還要維護(hù)基礎(chǔ)的組件，極大的縮短了產(chǎn)品研發(fā)周期。強(qiáng)烈建議采用 Vue 技術(shù)棧的團(tuán)隊(duì)，也嘗試下 iView。感謝 iView！

TalkingData 數(shù)據(jù)工程師 楊濤：
從使用 iView 0.9.x 版本到目前的 2.x 版本,見證了 iView 從實(shí)現(xiàn)各類組件到豐富組件功能的每一步，使得我們?cè)趫F(tuán)隊(duì)作戰(zhàn)中大大提高了項(xiàng)目開發(fā)效率。在我們的多個(gè)項(xiàng)目中使用了 iView 的各類組件，它完善的文檔和示例代碼降低了學(xué)習(xí)成本，同時(shí) iView 也在高頻率的更新完善，選擇 iView 作為前端 UI 組件簡(jiǎn)單易用大大加快了項(xiàng)目進(jìn)度的同時(shí)更多的是感受到 iView 的工匠精神。

漢云優(yōu)品 產(chǎn)品經(jīng)理 關(guān)靜凱：
我是一個(gè)愛(ài)搞技術(shù)的產(chǎn)品經(jīng)理，在看到 iView 之后，被 iView 整體的 API 和 UX 設(shè)計(jì)所折服，非常容易上手，起初只是在產(chǎn)品設(shè)計(jì)上使用 iView 快速實(shí)現(xiàn)中后臺(tái) Demo，iView 使產(chǎn)品的交互和 UI 保持了高度一致性，在對(duì)公司前端團(tuán)隊(duì)培訓(xùn)后，逐漸完成了前端工程化，現(xiàn)在公司的產(chǎn)品已經(jīng)使用了 Vue.js 和 iView 進(jìn)行了重構(gòu)。iView 的源代碼非常規(guī)范，二次開發(fā)及其友好，目前正結(jié)合公司現(xiàn)有業(yè)務(wù)，進(jìn)行了一些組件的添加，主要集中在數(shù)據(jù)可視化和一些業(yè)務(wù)組件的封裝，iView 給公司帶來(lái)的不僅僅是前端技術(shù)的革新，更重要的是推動(dòng)了產(chǎn)品迭代的速度，因?yàn)槌晒σ?iView，我也獲得了公司層面的支持整合設(shè)計(jì)和前端組建了 UED 部門。再次感謝iView 框架帶來(lái)的便利。

總結(jié)

接下來(lái)要做的事情還有很多，我們會(huì)通過(guò) iView 在大量實(shí)戰(zhàn)項(xiàng)目中的使用，在組件的易用性、穩(wěn)定性上不斷提升和改良，也會(huì)在 UI 細(xì)節(jié)上更加規(guī)范、漂亮。

這里也要特別感謝所有為 iView 項(xiàng)目付出努力的貢獻(xiàn)者們，一個(gè)好的項(xiàng)目，是需要大家共同創(chuàng)造和維護(hù)的。也借此文，呼吁有工匠精神，熱愛(ài)開源的開發(fā)者們能夠加入到 iView 項(xiàng)目里來(lái)，一起把它打造成世界級(jí)優(yōu)秀組件庫(kù)。

福利

為慶祝 iView 一周年暨 2.0 版發(fā)布，Vue.js 系列課程一律 6.6 元，持續(xù)一周。

特別感謝

最后特別感謝以下技術(shù)社區(qū)長(zhǎng)期以來(lái)對(duì) iView 開源項(xiàng)目的推廣與支持（排名不分先后）：

• 掘金 - 一個(gè)幫助開發(fā)者成長(zhǎng)的社區(qū)
• 碼云 - 專業(yè)、高效的代碼托管 · 協(xié)作開發(fā)平臺(tái)
• Laravel China - 高品質(zhì)的 Laravel 和 PHP 開發(fā)者社區(qū)
• SegmentFault - 中國(guó)領(lǐng)先的開發(fā)者技術(shù)社區(qū)
• 前端早讀課

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的iView 一周年了，同时发布了 2.0 正式版，但这只是开始...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。