2016 我的心路历程:从 Vue 到 Webpack 到 iView

2016年工作中做过最自豪的两件事情:

把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范;

开源iView项目。

初识 Vue

第一次接触

使用 Vue.js 已经有一年半时间了,在接触 Vue 之前,有写过半年多的 Angular,所以刚了解 Vue 时,与很多开发者一样,认为 Vue 是一个轻量级的或是移动端的 ng,就好比 zepto 之于 jQuery。直到 15 年 10 月,打算用 Vue 开发一个个人项目时,才开始认真地学习它,发现 Vue 的使用方法和 API 设计如此优美简洁,而且中文文档甚是详细,我觉得这也是 Vue 受很多中国开发者喜爱的原因,许多初中级开发者、英文不好的、jQ导向的,在刚接触 MVVM 时,这点很有价值,再者 Vue 的使用和学习门槛相比 ng 和 React 的要求都要低,概念理解起来也容易。

比起 Angular,Vue 最大的特点就是对数据双向绑定这件事处理的很优雅。ng 中你需要注入依赖服务,比如 $scope 和 $rootScope,变量写起来也散落在各处,而且有时候还得用 $apply 来告知,这对于很多初学者来说是很麻烦的事情。我以前是写 jQuery 的,所以还是喜欢用 jQ 的很多东西,比如 ajax,而 Vue 在数据使用上很灵活,可以引用外部变量,可以在各种情况下直接修改,不需要额外的工作,所以当看到 Vue 双向绑定这一特性时,就决定尝试用它了。

一个人搞了一个产品

从 14 年毕业到 15 年底,就一直在两个规模不大的创业团队工作,先后做了 5 款产品,都是 App,涉及的面也很广,比如 Canvas、Hybrid 什么的。在初创团队工作就像打了鸡血一样,每天早上起床都迫不及待地开始写代码,对工作的热爱绝对不是只把它当做一件赚钱的事情,所有人都是有理想和技术追求的,所以那段时间我做的东西都很用心、精致。

两年的创业经历也把我锻炼成了一个对产品有理解、追求细节、美观的一个人。

从 15 年中旬开始,由于项目需要,我开始接触 Python,这也是我第一次接触后端语言,以前对服务端的开发是一点不懂的。不知道是 Python 本身的原因,还是我理解的快,上手其实并不难,而且没多久就已经可以熟练的写起来了(现在接触的东西多了,觉得那时学习的快,是有一套很好的架构和有人带,先能写,然后慢慢了解其中奥妙,这种办法对于程序员掌握一门新技术还是很有效的)。

我相信但凡写过 Python 的人,都会用优雅来形容它,比如一行代码带有循环的赋值:

user_hash = dict((str(user.id), user.to_base_dict())foruserinusers)

其实写后端和写前端,很多地方是想通的,只是概念上有区别。只不过后端专注在数据的获取、缓存和整理上,加以各种服务,前端则在获取数据、整理数据、可视化数据。

学会了 Python,发现这个时候可以自己独立做一点东西了,于是就有了一个人搞了一个产品。不卖关子了,这个产品就是TalkingCoder,从产品、设计、前端、后端、运维、iOS & Android 客户端,几乎都是我一人撸的了,只不过在写移动 App 时,有两位兄弟帮忙写了个壳。

从产品和技术复杂度上,TalkingCoder 很接近 知乎 和 Segmentfault,基于关注内容推荐的 Feed 流、文章、提问(最佳实践)。看一下用到的技术栈:


后端当然是基于 Python 了,主要用Tornado框架提供 Framework 和 WebService 及 APIService(也巧,貌似 知乎 和 Segmentfault 也用的Tornado)。Tornado 是一个单线程、单进程、非阻塞式的 Web框架,性能很不错。Sqlalchemy提供 ORM(Model层),这东西很好,尤其是对于我这样不太擅长写 sql 的人。Celery提供了 worker ,完成一些不影响用户使用的定时任务(统计)、耗时任务(发邮件)等,通过异步,不阻塞主线程。Redis主要用于存储用户的 token,数据库用的是 MySQL(阿里云RDS),同时还用了下阿里云的 SLB 负载均衡(其实没有什么好均衡的,量又到不了知乎那级别,主要还是做https的支持和域名绑定,对Nginx不是很熟,17年要学一下了,毕竟 SLB 的费用一年也好几百呢😝)。

前端相对还是比较传统,没有完全使用 前后端分离 ,Vue 也没有用到组件和组件化,主要原因还是刚学 Vue,没有深入到组件,所以路由和页面渲染,甚至html模块都是 Tornado 完成的。任何技术都需要循序渐进,如果现在再写一遍,肯定不是这套架构,但在当时,这的确是最好的技术方案。但是服务端渲染也是有好处的,比如 SEO、页面打开速度,前端再怎么优化,也没有直接服务端渲染好 HTML 来得快。

iOS 和 Android App 是在 web 版全部完成后开发的,当时找了两个对技术有追求的 iOS 和 Android 的小伙伴帮忙搭了壳,定制了一些 UI 和 Bridge 接口,iOS 用的 UIwebview,本打算用 WKwebview,但测试下来很多地方效果不是很理想,最终还是选择了较为成熟的 UIwebview。整个移动端开发过程大概2个多月吧,也是基于 Vue + Gulp + Swiper 的,体验还算不错,尤其在 iOS 上。

运维是我的短板,Linux 不怎么熟,所以很尴尬的就是一开始只能在自己电脑上玩,到了 ECS 上就蒙了。好在 TalkingData 大牛有的是,折腾了一周,所有的环境和库都装好了,找人帮忙写了个 shell,就这样上线了,上线后,就再没断过。

前前后后开发了有近半年,服务上线也快一年了,这套架构从没出现过故障和报警,唯独一次重启机器把 Redis 数据丢失了。这个项目让我对 全栈 有了更深的理解,但凡是后端的会点 Angular,前端的会写写 Node.js ,都不完全是全栈,全栈应该是能理解整个产品的命脉,并把它最终实现出来,安全运行。

推广 Vue

我是 15 年双十一那天加入TalkingData的。TalkingData 仍然还是创业公司,但规模和影响力要比我之前的两家大很多,在大数据领域,更是领先者。

在这里,前端团队都统称为可视化,因为我们是跟数据打交道。其实 TD 几年前是没有专门的前端团队的,由于历史问题,很多产品线都还是较老的技术,公司的核心技术在大数据处理能力上,前端页面很多都是写 Java 的同事做的,用的最多的自然是 Angular(知道 ng 背景的肯定了解其中的原因😝)。

我刚来时,做的是一个基于百度地图 overlay 的大数据地理可视化框架 TDMap(各种原因尚未开源),贴几张图感受下吧:


之后就是我的第一个业务类项目了,也是全面运用 TDMap。当时用的是 TD 自研的一套组件引擎和 jQuery。这个项目到最后做权限系统时,才开始接入 Vue.js ,这应该是 TD 首次使用 Vue,不过当时也有限制,只用它做简单的双向绑定,但仅此一点,开发效率已经提高很多了。

在一个公司推广一项技术栈也是有难度和技巧的,因为不同的人思考问题的角度可能会不同。新的东西一方面会增加学习成本,一方面对它潜在的问题是未知的,如果暴露出了问题或性能瓶颈,是否能够处理或应急方案,尤其是选择开源框架时,社区影响力、维护和持续开发都是考虑的因素。好在 Vue.js 给我们带来了很多惊喜,社区反响也不错,一句话就是用着放心。

既然尝到了 Vue.js 带来的甜头,就要把它推广起来,提高整个前端团队的开发效率。

Webpack,又一前端神器

如果只是用 Vue.js 的基本功能,那其实只利用了20%的特性。

推广 webpack 这一过程是缓慢的,因为开始和很多人一样,以为又是个和 Gulp 类似的工具,所以有段时间仍然是使用 Vue + Gulp + jQuery 的技术栈,已经开始使用 Vue 的组件,但还没有组件化。这样写的多了,问题就暴露了:

每个组件需要手动拆分html 、 js、 css 部分,维护成本高;

html 需预先加载,所以会看到一个页面有一大坨的html

业务第一,一开始也就没有在意工作流,虽然麻烦,但也撑了几个小项目。直到一个机会开始做MarketingCloud营销云,才开始彻底学习 webpack,好在项目初期不太紧张,有了一周多过渡时间来搭建。

我觉得 webpack 的难点在于概念,因为你在开发时写的代码,并不是最终呈现的代码。这对于传统技术栈来说思维切换还是需要成本的,因此有了一个概念:编译。

说到底,webpack 就是一个 .js 配置文件,你的架构或好或差,都体现在这一个配置里,随着需求的不断出现,工程也是逐渐完善的,一口吃不成胖子。这里也分享一下 TalkingData 用到的工程配置:

https://github.com/icarusion/vue-vueRouter-webpack

关于 webpack 的技术介绍就不多扯了,掘金上有很多不错的文章,不过也推荐我之前写的几篇:

Vue+Webpack开发可复用的单页面富应用教程(配置篇)

Vue+Webpack开发可复用的单页面富应用教程(组件篇)

Vue+Webpack开发可复用的单页面富应用教程(技巧篇)

这一年下来,这套架构在多个项目中得到了验证,工作效率自然是提升了不少,也奠定了我们前端团队的开发规范,Vue 的推广,至此算是非常成功了。

iView,把开发效率再提高50%

经常混掘金的小伙伴,应该对 iView 不陌生吧!再贴一下地址:

https://github.com/iview/iview

也感谢大家的关注与支持,iView 的 1.0 工作马上就结束了,计划的 43 个组件,现在已经完成 41 个了,我们也承诺过,在 1.0 发布后,会在 17 年初支持到 Vue2.x。

关于 iView 的介绍和使用,这里就不多说了,可以看看下面三篇文章,这里主要还是想说说关于它的一些故事和开源的经历。

Vue高效UI组件库—iView开发实践

Vue中你不知道但却很实用的黑科技

项目进展快,全靠 iView 带 | 掘金技术征文

发起这个项目的初衷,是公司举办的一次创新项目活动,当时团队正好也需要一套自己的 UI 组件库,于是就申请了,从此就信心满满地开始了来源之旅,那时是 16 年 7月。

时间过得真是快,都开发 半年 了,也收获了近 3000 ★。因为是第一次做开源项目,对 Github、npm 的很多东西还不了解,虽然平时都在用,但却没发布过。慢慢地知道了什么是.gitattributes、.npmignore、.travis.yml、.eslintrc.json,也了解了 MIT、Apache Licence 2.0 开源协议,涨了不少姿势。

iView 在一开始时,还是暴露了很多问题,比如必须通过 webpack 才可以使用,而且还得配置 babel,否则无法编译node_modules/iview下的文件,就这一个简单的配置,折腾了很久,因为不同平台不同版本,写法不一样。后来在@jingsam的 contribution 下,优化了 iView 编译过程,最终不再依赖 webpack,也不需要配置 babel,在此特别感谢下 jingsam,虽从未见面,却对技术有着同样的追求。

iView 基本是我一个人在开发和维护,不过有一位在美国上大学的同学也多次贡献代码,我们的沟通似乎并没有时差的概念,因为他基本很晚才睡,夜猫子类型的@rijn,在此也特别感谢。

iView 的 contributors 并不多,也借此机会,希望更多对技术有追求的朋友能参与到 iView 2.0 的开发中,把它一起做好。

因为太想把 iView 做好,所以在写每个组件前,都看了很多别人的实现,比如 Element UI、vue-antd、AntDesign、vue-beauty 等,这个过程学到了很多东西,看别人代码的确是最快最有效的学习方法,因为有时候思路会被限制,看看别人的实现,才能打开思路,多加对比,也能知道几者之间的差距。

现在公司最核心的服务 — 应用统计分析已经开始用 iView 重构了,相信在 2017 年,iView 也会像 Vue 和 Webpack 一样,被很多项目验证。

后记

16 年可以说是工作以来进步最大的一年了,学习了很多前沿的技术,也做了不少东西,但做技术的就是这样,接触的越多,越能感到自己的渺小,17 年继续加油吧!

作者:梁灏

文章首发于掘金,未经许可,禁止转载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • 1,阎罗殿 李莫愁觉得身体轻飘飘的,似乎一阵风就可以把自己吹出十万八千里。她不知道她要去哪里,前面一黑一白的两个人...
    揽衣阅读 473评论 2 3
  • 保持好习惯究竟有多重要? 人的行为,只有百分之五是由思考脑(人类独有的大脑结构)中的逻辑驱动的。还有百分之九十五,...
    牛爸爱学习阅读 408评论 11 13
  • 作为一个时差党,平时基本上都是用油管(YouTube)看视频。很多国内的电视台和视频网站都在油管上入驻,什么芒果台...
    肖雨酱阅读 145评论 0 2