和小程序斗智斗勇那些事

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，es六、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