阅读 2452

和小程序斗智斗勇那些事

JTalk 第三期 前端场 《2018 · 前端展望》活动在1月21日成功举办,掘金线下活动 JTalk 由掘金主办,每期 JTalk 会邀请垂直行业的优秀工程师来分享优秀的实践经验,技巧方法。旨在为开发者提供线下技术交流互动机会,帮助开发者成长。

小程序由于封闭加上生态不够成熟,让很多开发者踩了不少坑。那么,来看滴滴前端工程师王道含和小程序斗智斗勇的那些事,他将和大家聊聊小程序开发的一些感受和实践经验,帮助大家更好的爬坑、填坑。

演讲文

大家好,作为今天的开场,阿不,暖场嘉宾,我来给大家讲一下关于小程序的这个主题。

其实在之前掘金膜法小编来找我的时候,是问过我要讲什么话题的,没太想好,你有什么建议呢?

  • 膜法小编:我觉得2018年前端有三个热门方向:工程化,PWA,小程序。我说好,工程化这个话题我还是略有研究。

  • 膜法小编:但是我们请了掘金小册《用 npm script 打造超溜的前端工作流》的作者王仕军老师。
  • 我:那我就聊聊 PWA!
  • 膜法小编:我们这次还请了百度外卖前端负责的林溪老师,讲他们前端的方案。
  • 我:所以到我这就剩小程序了么。
  • 膜法小编:这样吧,你可以当做命题作文,题目就叫“如何____开发小程序”。
  • 我:好的,我打算讲的题目是,如何不要去开发小程序之小程序劝退指南。最近刚刚写了几个月的小程序,感觉非常的难受。
  • 膜法小编:正好讲讲怎么斗智斗勇的嘛,也是很宝贵的经验对不对。 于是我被他说服了,今天来跟大家聊聊我开发小程序的一些经历和对小程序的想法。


怎么看待小程序

微信小程序是2017年1月9日上线的,到现在正好一年多一点的时间,前不久一周年的时候,张小龙的微信公开课应该刷爆了大家的朋友圈,关于这个内容我们后面再聊。

在我看来小程序能够出现的契机还是现在的网络环境更好了,好到什么程度?前一阵西二旗地铁站就在推广地铁乘车的 APP,用 APP 买地铁票,首张免费。我听了就很心动,掏出手机,打开商店,搜索 APP 的名字,下载,等它安装好,再注册一个账号,然后开始买票。

你会发现,打开应用市场,搜索应用,点击下载,以及下载后安装的时间加起来,比你下载的时间还要长。当我们习惯了快节奏之后,就很难再慢下来了,我们现在能够等待可能只有二维码的扫描识别以及接收验证码。想一下,如果一个验证码倒数到30秒还没返回,你是不是很焦虑。

所以这个东西不是因为它特别创新或者特别先进,因为发展到这个阶段,市场就告诉你,我们需要这个东西了。

关于小程序几件有趣的事情

关于小程序你会发现几件很有趣的事情,问一下有多少人开发过小程序,好的你们不要把手放下,用微信自带的开发工具写代码的可以自豪的继续保持举手。

我猜是没有的,如果真的有这样的同学,你们每天上班是不是有一种被绑架的感觉。我们开发都是用 vscode 或者 atom,然后经过一次编译输出到微信的文件夹里,就可以直接在模拟器里面运行了。

说到模拟器,其实是一个阉割版的 devtools,前一段时间我就想看一下内存,不好意思,没有这个功能。不过基本的功能倒是有的,也基本够用。

真机调试的槽点

比起模拟器,真机调试的槽点就要更多一点。比如地图组件的层级非常高,所以调试地图就成了一件,不可能的事。

不过我这么机智,肯定能找到办法对吧,我把调试信息输出到了 title 里面。你可能要问,为什么不在模拟器里看,因为模拟器的行为和真机不一致啊。

总结出来的经验是,基本模拟器跑的出来的,iphone 都跑的出来,两千块以上的安卓也可以,到了千元机就开始出各种问题了。而且因为小程序毕竟不是原生开发,你不能用原生开发的方式去调试它。

我曾经去问 Android 开发的同事,如果我想监控内存怎么办,同事说,你可以装一个360手机助手。

我们评价一个技术或者一个框架的时候,会从什么维度去看待?背景,性能,前景,还是商业价值?掘金的 CEO 阴明曾经说过,排在第一位的应该是社区

掘金技术社区的微信小程序标签页

这里就又有一件很有趣的事情,大家可能参加过很多的线下沙龙,可能也有小程序主题的,但是你会发现,大多数的都是搞营销的人。某某小程序平台创始人,某某小程序数据分析公司,很少有程序员出来讲,如果你们碰巧听过,可能是在 GITC, 也是我们滴滴的同事。

苗典 - 小程序框架-teddy 滴滴出行.pdf

技术角度看小程序的社区生态

这说明从技术角度来看,这个东西的社区是不成熟的。毕竟这东西才出来一年时间,好像不成熟也情有可原是么?不是的,如果它真的对于程序员来说有足够的吸引力,一定有很多人会投入到社区中。为什么没有这样,我们猜测一下原因。

去年小程序发布时,张小龙对小程序能不能做游戏给出了一个暂时否定的答案,他称,“现在并不能做。”这与小程序在微信没有入口、不会积累粉丝、不能推送消息、不能分享到朋友圈一起,成为小程序遭质疑其存在的商业价值的关键点。

时至今日,我们再来看,加速抢票的小程序刷屏了朋友圈,去年年底小程序开始支持 webview,而今年年初更是高调推出了小游戏。对于营销人来说,每一次的开放都是一场想象力的狂欢,但对于程序员来说,这种毫无预兆的更新更像是一场午夜噩梦。

小程序适合技术投机,不适合技术投资。

当11月3号看到微信支持 webview 的时候,我打开了网易云音乐,单曲循环了一天的凉凉。 前端习惯的节奏是什么?就是 ECMA 标准这种,来给大家科普一下:

原图看这里:链接

也就是说从创意的提出,这个功能就是透明的,如果要尝鲜的话,在 draft 之前就可以使用。这就是开放系统的意义,他给了技术,社区和生态成长的空间,而且重要的是,它告诉你了对未来的期待。

比如刚刚提出要做promise 的时候,社区就有很多方案,大家也乐于去完善,尽管我们知道有一天,所有浏览器包括 node 都原生支持 promise 的时候,这些方案就会死去,但这就像我们不会因为会出 IPnone 11 就不去买iPhone X,我们乐于去追,甚至跑得比标准更超前。

而小程序作为一个封闭系统,我们不会知道未来会支持什么特性,他是一个体验的解决方案,是一个商业的解决方案,但并不是一个技术的解决方案。

因为我对于他的未来是不可预期的,他的发展可能只被一个团队,甚至被一个人来决定。比如你觉得 go 是个好语言,你可以投入精力去学go。或者你觉得 nodejs 大有可为,我立志五年内成为一流的 js 工程师。

但是你不可能立一个志向说,我要做一个优秀的小程序工程师,你连明年这个时候要做什么都不知道。当然,从商业角度来说,你一直紧跟小程序的新版,其实可以吃到市场的福利。现在同样功能的端内程序,做小程序版就要比所谓的 H5版要贵的,这是可以吃到的福利。

总而言之,从程序员的角度来看,小程序适合技术投机,不适合技术投资


怎么开发小程序

出于一些原因,我们不得不去开发小程序,那就要以积极的心态去面对它。 首先,小程序提供了很多原生能力,在之前我们想要这些能力的时候,需要和端上的同学约定 jsbridge,也要占用端上的开发时间。小程序统一了这个接口,使得跨平台并且应用原生能力的成本大大降低了。

如果能够再走一步,让我们以传统前端开发的技术栈和开发环境进行小程序开发,就能让开发体验再往前迈进一大步。

比如小程序不支持 npm 包,只能在 page 粒度开发,也没有好用的状态数据管理,包括代码规范检查,各种预处理器也都不支持。

小程序开发框架 - teddy

我们不能接受这种史前的开发体验,所以滴滴平台部的同事们做了一个小程序开发框架,叫做 teddy。我有想过为什么这个框架要起名叫 teddy,可能是为了表示这个框架很厉害,什么都能干吧。

teddy包含两个部分,cli 和 runtime。

cli 提供了脚手架,编译的功能。通过预编译,可以支持 预编译,npm,es6、css 预处理器,代码合并压缩以及livereload。 而runtime 则提供了组件的加强,比如列表,条件,watch,computed,mixin 一类的指令。

小程序中本身自带了 bindXX 来绑定事件,但是传参数是个大问题,在官方文档中标配的想要传入参数的话,只能通过获取事件对象上的 dataset 来获得模板上数据:e.currentTarget.dataset.xx;Teddy 则增强了这部分事件处理,使得传参更便捷直观。

teddy-request

默认小程序会有5条请求并发限制,而在应用层通常我们并不能保证一定不会超限,所以需要一种机制来处理,这种机制就是利用队列来处理请求,然后保证最大限制数不会超出;而且还有一种场景,例如埋点,我们希望的是埋点请求尽量不和我们普通请求竞争,所以需要有一个低优先级的队列来发埋点请求。基于这些需求,我们封装了 teddy-request。

另外就是引入了 redux,封装了 teddy-redux。redux 不像 vuex 和 vue 耦合的那么紧密,是一个比较方便独立作为数据管理的框架,我们的小程序都是用 redux 来做状态管理的。


今天来其实不是做广告的,毕竟我也不是 teddy 的开发者,想要分享的其实是工程师在面对问题和解决问题的思路。 我们对技术价值的判断,就是体验和效率。

体验价值比如css3就是能够增强体验的,同样,小程序可以更快打开,可以使用原生的功能,可以拿到群信息这都是体验侧的价值。效率则是在已经能够实现功能以后,把开发的效率提升上来,比如promise到async。

前面我们也说过,商业投资和技术投资是不同的,技术投资难以是短期的。比如你今天觉得人工智能很厉害,有前景,那第一件事可能是先把高数课本找出来。技术不会是单点存在,他们是关联和递进的。所以我们看到,当面对小程序体验升级的时候,技术侧可以大量采用已经成熟的框架和数据管理理念,甚至是成熟的组件。

我看好微信群养青蛙

小程序能够提升体验,也能够在需要原生功能支持的时候提高效率,那我们就把熟悉的开发模式对接过来,把先进的开发模式应用过来。

最近和端上的同学聊天,端上的同学就说,觉得现在前端在很多地方做的比端要好,尤其是组件化和状态数据管理方面,他们也在从前端借鉴经验。

所以你看,缺失的开发体验,程序员会自行去填平,在这个时代,一个封闭标准是很难禁锢住技术栈的选择,因为无论你选择使用什么语言,什么语法,都会有人做出一个方案,用他们熟悉的方式开发,再编译成目标语言。

关于标准

关于阿里云的大轮子 dawn

另外一个蛮想分享的观点,是前一段时间阿里云的同学过来技术交流,他们安利了一个自己开发的前端构建和工程化工具。

基本上把你知道的构建工具和工程化工具做了一个大礼包,从模板到打包,到代码规范检查,我印象最深的是有一个功能,可以远程配置 eslint规则,强行执行线上的规则检测,就是说哪怕你本地没有加规则,或者改掉,依然不能跳过线上的配置。

分享结束后就有人提问说:

  • 第一,这里每个工具我们都会用,你们造这个轮子有什么意义。
  • 第二,如果一个新人来到你们团队,是不是还要学习这个新东西,而如果他离开了团队,是不是又意味着要重新学习全套的大礼包。

分享的同学回答说:

  • 确实可能对于在座的各位来说,手写一个 webpack 配置是最基本的技能,或者随手写的代码就是能够通过 eslint 检测的。因为阿里云也有很多私有云部署业务,所以见了很多的技术团队,现状是,有非常多的团队仍然用着原始的,混乱的方式进行着开发。

造个好轮子,帮同事续一秒

对于大厂的高级程序员来说,已经处在了马斯洛金字塔上精神层面的位置,而对于更多的人来说,技术首先是实现工程的手段。能够帮助这些人提高效率,就是很有价值的。 虽然我不是平台技术部的,但是我们也在为业务线开发一些框架级的工具,这些工具对我们自己以及同事提高效率都有很大帮助。所以每天上班的时候,我都很自豪的跟自己说,你不是去工作,你是去帮同事续命。

欢迎一起来写小程序

很惭愧没有讲太多代码上的内容,因为关于小程序的文档其实已经写得很好了,vue 也是大家都很熟悉的东西,至于 teddy,现在还没有开源出来,如果想要体验 用 teddy来开发小程序,有一个简单的办法,就是把你的简历发给我,来滴滴上班,就可以自由的使用了。

如果想要参与开发,我也可以帮忙把简历内推到平台技术部。我是在业务部门的,也有很多有趣的事情可以做,也非常欢迎来投简历。

结语

在这个信息过剩的时代,我们获得信息太过容易,难的是获得我们需要的信息。所以我一直觉得,线下沙龙的意义不在于这几十分钟的时间能够解决问题,而是能够找到能和你讨论问题的人,这个人可能是讲师,也可能是其他提问的观众,这是我几年来做开发者社区,也参与很多沙龙和大会做讲师和志愿者的体会。

所以也欢迎大家关注我的知乎:王德福,或者在群里加微信,有空一起聊技术。

PPT 下载

和小程序斗智斗勇那些事

掘金群:

群已经满了100人,添加机器人入群。

了解 JTalk

掘金线下活动 JTalk

关注下面的标签,发现更多相似文章
评论