2016年工作中做過(guò)最自豪的兩件事情：
把 Vue.js 和 Webpack 技術(shù)棧引進(jìn)公司并逐步成為前端規(guī)范；
開(kāi)源iView項(xiàng)目。
初識(shí) Vue
第一次接觸
使用 Vue.js 已經(jīng)有一年半時(shí)間了，在接觸 Vue 之前，有寫(xiě)過(guò)半年多的 Angular，所以剛了解 Vue 時(shí)，與很多開(kāi)發(fā)者一樣，認(rèn)為 Vue 是一個(gè)輕量級(jí)的或是移動(dòng)端的 ng，就好比 zepto 之于 jQuery。直到 15 年 10 月，打算用 Vue 開(kāi)發(fā)一個(gè)個(gè)人項(xiàng)目時(shí)，才開(kāi)始認(rèn)真地學(xué)習(xí)它，發(fā)現(xiàn) Vue 的使用方法和 API 設(shè)計(jì)如此優(yōu)美簡(jiǎn)潔，而且中文文檔甚是詳細(xì)，我覺(jué)得這也是 Vue 受很多中國(guó)開(kāi)發(fā)者喜愛(ài)的原因，許多初中級(jí)開(kāi)發(fā)者、英文不好的、jQ導(dǎo)向的，在剛接觸 MVVM 時(shí)，這點(diǎn)很有價(jià)值，再者 Vue 的使用和學(xué)習(xí)門(mén)檻相比 ng 和 React 的要求都要低，概念理解起來(lái)也容易。
比起 Angular，Vue 最大的特點(diǎn)就是對(duì)數(shù)據(jù)雙向綁定這件事處理的很優(yōu)雅。ng 中你需要注入依賴(lài)服務(wù)，比如 $scope 和 $rootScope，變量寫(xiě)起來(lái)也散落在各處，而且有時(shí)候還得用 $apply 來(lái)告知，這對(duì)于很多初學(xué)者來(lái)說(shuō)是很麻煩的事情。我以前是寫(xiě) jQuery 的，所以還是喜歡用 jQ 的很多東西，比如 ajax，而 Vue 在數(shù)據(jù)使用上很靈活，可以引用外部變量，可以在各種情況下直接修改，不需要額外的工作，所以當(dāng)看到 Vue 雙向綁定這一特性時(shí)，就決定嘗試用它了。
一個(gè)人搞了一個(gè)產(chǎn)品
從 14 年畢業(yè)到 15 年底，就一直在兩個(gè)規(guī)模不大的創(chuàng)業(yè)團(tuán)隊(duì)工作，先后做了 5 款產(chǎn)品，都是 App，涉及的面也很廣，比如 Canvas、Hybrid 什么的。在初創(chuàng)團(tuán)隊(duì)工作就像打了雞血一樣，每天早上起床都迫不及待地開(kāi)始寫(xiě)代碼，對(duì)工作的熱愛(ài)絕對(duì)不是只把它當(dāng)做一件賺錢(qián)的事情，所有人都是有理想和技術(shù)追求的，所以那段時(shí)間我做的東西都很用心、精致。
兩年的創(chuàng)業(yè)經(jīng)歷也把我鍛煉成了一個(gè)對(duì)產(chǎn)品有理解、追求細(xì)節(jié)、美觀的一個(gè)人。
從 15 年中旬開(kāi)始，由于項(xiàng)目需要，我開(kāi)始接觸 Python，這也是我第一次接觸后端語(yǔ)言，以前對(duì)服務(wù)端的開(kāi)發(fā)是一點(diǎn)不懂的。不知道是 Python 本身的原因，還是我理解的快，上手其實(shí)并不難，而且沒(méi)多久就已經(jīng)可以熟練的寫(xiě)起來(lái)了（現(xiàn)在接觸的東西多了，覺(jué)得那時(shí)學(xué)習(xí)的快，是有一套很好的架構(gòu)和有人帶，先能寫(xiě)，然后慢慢了解其中奧妙，這種辦法對(duì)于程序員掌握一門(mén)新技術(shù)還是很有效的）。
我相信但凡寫(xiě)過(guò) Python 的人，都會(huì)用優(yōu)雅來(lái)形容它，比如一行代碼帶有循環(huán)的賦值：
user_hash = dict((str(user.id), user.to_base_dict())foruserinusers)
其實(shí)寫(xiě)后端和寫(xiě)前端，很多地方是想通的，只是概念上有區(qū)別。只不過(guò)后端專(zhuān)注在數(shù)據(jù)的獲取、緩存和整理上，加以各種服務(wù)，前端則在獲取數(shù)據(jù)、整理數(shù)據(jù)、可視化數(shù)據(jù)。
學(xué)會(huì)了 Python，發(fā)現(xiàn)這個(gè)時(shí)候可以自己獨(dú)立做一點(diǎn)東西了，于是就有了一個(gè)人搞了一個(gè)產(chǎn)品。不賣(mài)關(guān)子了，這個(gè)產(chǎn)品就是TalkingCoder，從產(chǎn)品、設(shè)計(jì)、前端、后端、運(yùn)維、iOS & Android 客戶端，幾乎都是我一人擼的了，只不過(guò)在寫(xiě)移動(dòng) App 時(shí)，有兩位兄弟幫忙寫(xiě)了個(gè)殼。
從產(chǎn)品和技術(shù)復(fù)雜度上，TalkingCoder 很接近 知乎 和 Segmentfault，基于關(guān)注內(nèi)容推薦的 Feed 流、文章、提問(wèn)（最佳實(shí)踐）。看一下用到的技術(shù)棧：
后端當(dāng)然是基于 Python 了，主要用Tornado框架提供 Framework 和 WebService 及 APIService（也巧，貌似 知乎 和 Segmentfault 也用的Tornado）。Tornado 是一個(gè)單線程、單進(jìn)程、非阻塞式的 Web框架，性能很不錯(cuò)。Sqlalchemy提供 ORM（Model層），這東西很好，尤其是對(duì)于我這樣不太擅長(zhǎng)寫(xiě) sql 的人。Celery提供了 worker ，完成一些不影響用戶使用的定時(shí)任務(wù)（統(tǒng)計(jì)）、耗時(shí)任務(wù)（發(fā)郵件）等，通過(guò)異步，不阻塞主線程。Redis主要用于存儲(chǔ)用戶的 token，數(shù)據(jù)庫(kù)用的是 MySQL（阿里云RDS），同時(shí)還用了下阿里云的 SLB 負(fù)載均衡（其實(shí)沒(méi)有什么好均衡的，量又到不了知乎那級(jí)別，主要還是做https的支持和域名綁定，對(duì)Nginx不是很熟，17年要學(xué)一下了，畢竟 SLB 的費(fèi)用一年也好幾百呢??）。
前端相對(duì)還是比較傳統(tǒng)，沒(méi)有完全使用 前后端分離 ，Vue 也沒(méi)有用到組件和組件化，主要原因還是剛學(xué) Vue，沒(méi)有深入到組件，所以路由和頁(yè)面渲染，甚至html模塊都是 Tornado 完成的。任何技術(shù)都需要循序漸進(jìn)，如果現(xiàn)在再寫(xiě)一遍，肯定不是這套架構(gòu)，但在當(dāng)時(shí)，這的確是最好的技術(shù)方案。但是服務(wù)端渲染也是有好處的，比如 SEO、頁(yè)面打開(kāi)速度，前端再怎么優(yōu)化，也沒(méi)有直接服務(wù)端渲染好 HTML 來(lái)得快。
iOS 和 Android App 是在 web 版全部完成后開(kāi)發(fā)的，當(dāng)時(shí)找了兩個(gè)對(duì)技術(shù)有追求的 iOS 和 Android 的小伙伴幫忙搭了殼，定制了一些 UI 和 Bridge 接口，iOS 用的 UIwebview，本打算用 WKwebview，但測(cè)試下來(lái)很多地方效果不是很理想，最終還是選擇了較為成熟的 UIwebview。整個(gè)移動(dòng)端開(kāi)發(fā)過(guò)程大概2個(gè)多月吧，也是基于 Vue + Gulp + Swiper 的，體驗(yàn)還算不錯(cuò)，尤其在 iOS 上。
運(yùn)維是我的短板，Linux 不怎么熟，所以很尷尬的就是一開(kāi)始只能在自己電腦上玩，到了 ECS 上就蒙了。好在 TalkingData 大牛有的是，折騰了一周，所有的環(huán)境和庫(kù)都裝好了，找人幫忙寫(xiě)了個(gè) shell，就這樣上線了，上線后，就再?zèng)]斷過(guò)。
前前后后開(kāi)發(fā)了有近半年，服務(wù)上線也快一年了，這套架構(gòu)從沒(méi)出現(xiàn)過(guò)故障和報(bào)警，唯獨(dú)一次重啟機(jī)器把 Redis 數(shù)據(jù)丟失了。這個(gè)項(xiàng)目讓我對(duì) 全棧 有了更深的理解，但凡是后端的會(huì)點(diǎn) Angular，前端的會(huì)寫(xiě)寫(xiě) Node.js ，都不完全是全棧，全棧應(yīng)該是能理解整個(gè)產(chǎn)品的命脈，并把它最終實(shí)現(xiàn)出來(lái)，安全運(yùn)行。
推廣 Vue
我是 15 年雙十一那天加入TalkingData的。TalkingData 仍然還是創(chuàng)業(yè)公司，但規(guī)模和影響力要比我之前的兩家大很多，在大數(shù)據(jù)領(lǐng)域，更是領(lǐng)先者。
在這里，前端團(tuán)隊(duì)都統(tǒng)稱(chēng)為可視化，因?yàn)槲覀兪歉鷶?shù)據(jù)打交道。其實(shí) TD 幾年前是沒(méi)有專(zhuān)門(mén)的前端團(tuán)隊(duì)的，由于歷史問(wèn)題，很多產(chǎn)品線都還是較老的技術(shù)，公司的核心技術(shù)在大數(shù)據(jù)處理能力上，前端頁(yè)面很多都是寫(xiě) Java 的同事做的，用的最多的自然是 Angular（知道 ng 背景的肯定了解其中的原因??）。
我剛來(lái)時(shí)，做的是一個(gè)基于百度地圖 overlay 的大數(shù)據(jù)地理可視化框架 TDMap（各種原因尚未開(kāi)源），貼幾張圖感受下吧：
之后就是我的第一個(gè)業(yè)務(wù)類(lèi)項(xiàng)目了，也是全面運(yùn)用 TDMap。當(dāng)時(shí)用的是 TD 自研的一套組件引擎和 jQuery。這個(gè)項(xiàng)目到最后做權(quán)限系統(tǒng)時(shí)，才開(kāi)始接入 Vue.js ，這應(yīng)該是 TD 首次使用 Vue，不過(guò)當(dāng)時(shí)也有限制，只用它做簡(jiǎn)單的雙向綁定，但僅此一點(diǎn)，開(kāi)發(fā)效率已經(jīng)提高很多了。
在一個(gè)公司推廣一項(xiàng)技術(shù)棧也是有難度和技巧的，因?yàn)椴煌娜怂伎紗?wèn)題的角度可能會(huì)不同。新的東西一方面會(huì)增加學(xué)習(xí)成本，一方面對(duì)它潛在的問(wèn)題是未知的，如果暴露出了問(wèn)題或性能瓶頸，是否能夠處理或應(yīng)急方案，尤其是選擇開(kāi)源框架時(shí)，社區(qū)影響力、維護(hù)和持續(xù)開(kāi)發(fā)都是考慮的因素。好在 Vue.js 給我們帶來(lái)了很多驚喜，社區(qū)反響也不錯(cuò)，一句話就是用著放心。
既然嘗到了 Vue.js 帶來(lái)的甜頭，就要把它推廣起來(lái)，提高整個(gè)前端團(tuán)隊(duì)的開(kāi)發(fā)效率。
Webpack，又一前端神器
如果只是用 Vue.js 的基本功能，那其實(shí)只利用了20%的特性。
推廣 webpack 這一過(guò)程是緩慢的，因?yàn)殚_(kāi)始和很多人一樣，以為又是個(gè)和 Gulp 類(lèi)似的工具，所以有段時(shí)間仍然是使用 Vue + Gulp + jQuery 的技術(shù)棧，已經(jīng)開(kāi)始使用 Vue 的組件，但還沒(méi)有組件化。這樣寫(xiě)的多了，問(wèn)題就暴露了：
每個(gè)組件需要手動(dòng)拆分html 、 js、 css 部分，維護(hù)成本高；
html 需預(yù)先加載，所以會(huì)看到一個(gè)頁(yè)面有一大坨的html
業(yè)務(wù)第一，一開(kāi)始也就沒(méi)有在意工作流，雖然麻煩，但也撐了幾個(gè)小項(xiàng)目。直到一個(gè)機(jī)會(huì)開(kāi)始做MarketingCloud營(yíng)銷(xiāo)云，才開(kāi)始徹底學(xué)習(xí) webpack，好在項(xiàng)目初期不太緊張，有了一周多過(guò)渡時(shí)間來(lái)搭建。
我覺(jué)得 webpack 的難點(diǎn)在于概念，因?yàn)槟阍陂_(kāi)發(fā)時(shí)寫(xiě)的代碼，并不是最終呈現(xiàn)的代碼。這對(duì)于傳統(tǒng)技術(shù)棧來(lái)說(shuō)思維切換還是需要成本的，因此有了一個(gè)概念：編譯。
說(shuō)到底，webpack 就是一個(gè) .js 配置文件，你的架構(gòu)或好或差，都體現(xiàn)在這一個(gè)配置里，隨著需求的不斷出現(xiàn)，工程也是逐漸完善的，一口吃不成胖子。這里也分享一下 TalkingData 用到的工程配置：
https://github.com/icarusion/vue-vueRouter-webpack
關(guān)于 webpack 的技術(shù)介紹就不多扯了，掘金上有很多不錯(cuò)的文章，不過(guò)也推薦我之前寫(xiě)的幾篇：
Vue+Webpack開(kāi)發(fā)可復(fù)用的單頁(yè)面富應(yīng)用教程（配置篇）
Vue+Webpack開(kāi)發(fā)可復(fù)用的單頁(yè)面富應(yīng)用教程（組件篇）
Vue+Webpack開(kāi)發(fā)可復(fù)用的單頁(yè)面富應(yīng)用教程（技巧篇）
這一年下來(lái)，這套架構(gòu)在多個(gè)項(xiàng)目中得到了驗(yàn)證，工作效率自然是提升了不少，也奠定了我們前端團(tuán)隊(duì)的開(kāi)發(fā)規(guī)范，Vue 的推廣，至此算是非常成功了。
iView，把開(kāi)發(fā)效率再提高50%
經(jīng)?；炀蚪鸬男』锇椋瑧?yīng)該對(duì) iView 不陌生吧！再貼一下地址：
https://github.com/iview/iview
也感謝大家的關(guān)注與支持，iView 的 1.0 工作馬上就結(jié)束了，計(jì)劃的 43 個(gè)組件，現(xiàn)在已經(jīng)完成 41 個(gè)了，我們也承諾過(guò)，在 1.0 發(fā)布后，會(huì)在 17 年初支持到 Vue2.x。
關(guān)于 iView 的介紹和使用，這里就不多說(shuō)了，可以看看下面三篇文章，這里主要還是想說(shuō)說(shuō)關(guān)于它的一些故事和開(kāi)源的經(jīng)歷。
Vue高效UI組件庫(kù)—iView開(kāi)發(fā)實(shí)踐
項(xiàng)目進(jìn)展快，全靠 iView 帶 | 掘金技術(shù)征文
發(fā)起這個(gè)項(xiàng)目的初衷，是公司舉辦的一次創(chuàng)新項(xiàng)目活動(dòng)，當(dāng)時(shí)團(tuán)隊(duì)正好也需要一套自己的 UI 組件庫(kù)，于是就申請(qǐng)了，從此就信心滿滿地開(kāi)始了來(lái)源之旅，那時(shí)是 16 年 7月。
時(shí)間過(guò)得真是快，都開(kāi)發(fā) 半年 了，也收獲了近 3000 ★。因?yàn)槭堑谝淮巫鲩_(kāi)源項(xiàng)目，對(duì) Github、npm 的很多東西還不了解，雖然平時(shí)都在用，但卻沒(méi)發(fā)布過(guò)。慢慢地知道了什么是.gitattributes、.npmignore、.travis.yml、.eslintrc.json，也了解了 MIT、Apache Licence 2.0 開(kāi)源協(xié)議，漲了不少姿勢(shì)。
iView 在一開(kāi)始時(shí)，還是暴露了很多問(wèn)題，比如必須通過(guò) webpack 才可以使用，而且還得配置 babel，否則無(wú)法編譯node_modules/iview下的文件，就這一個(gè)簡(jiǎn)單的配置，折騰了很久，因?yàn)椴煌脚_(tái)不同版本，寫(xiě)法不一樣。后來(lái)在@jingsam的 contribution 下，優(yōu)化了 iView 編譯過(guò)程，最終不再依賴(lài) webpack，也不需要配置 babel，在此特別感謝下 jingsam，雖從未見(jiàn)面，卻對(duì)技術(shù)有著同樣的追求。
iView 基本是我一個(gè)人在開(kāi)發(fā)和維護(hù)，不過(guò)有一位在美國(guó)上大學(xué)的同學(xué)也多次貢獻(xiàn)代碼，我們的溝通似乎并沒(méi)有時(shí)差的概念，因?yàn)樗竞芡聿潘?，夜貓子?lèi)型的@rijn，在此也特別感謝。
iView 的 contributors 并不多，也借此機(jī)會(huì)，希望更多對(duì)技術(shù)有追求的朋友能參與到 iView 2.0 的開(kāi)發(fā)中，把它一起做好。
因?yàn)樘氚?iView 做好，所以在寫(xiě)每個(gè)組件前，都看了很多別人的實(shí)現(xiàn)，比如 Element UI、vue-antd、AntDesign、vue-beauty 等，這個(gè)過(guò)程學(xué)到了很多東西，看別人代碼的確是最快最有效的學(xué)習(xí)方法，因?yàn)橛袝r(shí)候思路會(huì)被限制，看看別人的實(shí)現(xiàn)，才能打開(kāi)思路，多加對(duì)比，也能知道幾者之間的差距。
現(xiàn)在公司最核心的服務(wù) — 應(yīng)用統(tǒng)計(jì)分析已經(jīng)開(kāi)始用 iView 重構(gòu)了，相信在 2017 年，iView 也會(huì)像 Vue 和 Webpack 一樣，被很多項(xiàng)目驗(yàn)證。
后記
16 年可以說(shuō)是工作以來(lái)進(jìn)步最大的一年了，學(xué)習(xí)了很多前沿的技術(shù)，也做了不少東西，但做技術(shù)的就是這樣，接觸的越多，越能感到自己的渺小，17 年繼續(xù)加油吧！
作者：梁灝
文章首發(fā)于掘金，未經(jīng)許可，禁止轉(zhuǎn)載
