凹凸实验室：支撑数千万消费者的小程序开发实践

做为第一批发布的小程序、同时也是你们最熟悉的微信小程序之一，京东购物小程序天天须要支持数千万的消费者。掘金特地邀请到京东购物小程序背后的一支开发团队 —— 凹凸实验室进行专访，与你们聊聊京东购物小程序的开发实践，以及对小程序将来发展的见解。

团队介绍

掘金：先简单介绍一下凹凸实验室的团队状况？

凹凸实验室： 咱们于 2014 年年中成立，如今的名称是「JDC-多终端研发部」，于 15 年 10 月份推出「凹凸实验室」品牌，旨在对外输出京东的前端能力及技术理念。如今团队 60 人左右，主要负责京东商城主站、微信 / 手 Q 购物两大业务，提供 Web 前端开发、动画开发、小程序开发、小游戏开发等前端开发能力，同时具备 app 开发、后端服务开发等全栈开发能力。

掘金：微信小程序开发在团队内是如何分工的？

凹凸实验室： 团队在设置分工的时候，考虑到微信小程序是一个较新的开发平台，因此小程序开发附属于前端业务团队之下。长期来看，是否须要独立的小程序团队，基于小程序自己的业务复杂度来判断相关团队的独立性。

其实，在小程序出现以前，京东微信入口已有一个独立的团队来负责这个购物平台的运营工做。后来有了小程序，业务团队但愿基于小程序提供更好的体验，于是相关团队就进行了一次「小程序化」。在小程序发布之初，团队及时捕获到小程序的体验价值，并进行一系列技术预研。同时，咱们也迅速汇集 10 人的项目小组，经过一个多月的封闭开发，京东购物小程序赶在第一批小程序发布。

开发实践与挑战

掘金：京东商城业务的技术架构是怎样的？

凹凸实验室： 京东商城的总体业务十分复杂，为了代码解耦、提升系统鲁棒性和开发效率，咱们分别开发了一个页面基类和一个组件基类。在组件化开发方面，早期基于 template 的组件化方案开发体验较差，组件的引用略显啰嗦，组件间嵌套还可能引发问题。而在微信团队提供了新的组件化规范后，各类痛点都获得改善。

架构图

另外在工程化方面，咱们配置了一套 Gulp 流程，为开发时的各个阶段提供快速有效的自动化服务。

Gulp 流程图

掘金：开发小程序时遇到过哪些挑战？

凹凸实验室： 商城的业务逻辑在移动 Web 端已经十分完善，所以业务层面的开发难度不大，更多的问题在于平滑迁移到小程序的平台上，绕开小程序的限制和问题。其中比较大的几个挑战包括：包大小的限制、跳转层级限制以及请求并发数不可超过 10 个请求的限制。

为了突破请求限制，团队专门开发了一套网关，使用一套经过 websocket 标准的数据流来支持数据传输。网关主要的功能是对请求进行转发，使用与原 web 端共用的后台接口来提供数据服务。

此外，在测试这一环节，目前微信小程序还没有给出完善的测试工具，没法编写 UI 层面的测试用例。因此每次版本迭代，都须要人工介入测试：

• 自动化测试：每一次代码的 commit ，都会运行为小程序定制的 lint 来检测代码是否符合规范
• 人工测试：具体到业务逻辑则须要测试同窗逐步进行验证

但愿微信小程序能够继续优化测试部分的开发体验，早日能有一套完整的自动化测试工具。

微信小程序开发生态

掘金：微信小程序是否会在微信生态里取代 Web 端呢？

凹凸实验室： 目前来看还很差说，主要看企业对于微信内应用的定位。首先，从体验上来看，微信小程序的体验明显优于网页。其次，小程序具有完整的开放能力，加上微信社交关系链和生态的巨大优点，必然会成为市场追捧的方向。随着更多框架性能层面和开发效率、体验的优化，开放能力不断完善，业务迭代成本不断下降，使得企业及开发者对此平台愈来愈有信心。

掘金：如何比较微信小程序与 App、Web、PWA、快应用的优劣？

凹凸实验室：

App vs. 小程序： App有多端平台的适配问题，而小程序只须要开发一套便可天然跨平台，并且只有一个应用发布平台，发版效率也快于 App。

Web vs. 小程序： 小程序从功能、体验上皆优于 Web 体验。

PWA vs. 小程序： PWA 须要对基础业务作比较大的调整，并且中国的移动生态以 App 为主，而国外的生态还以网页信息为基础，这使得 PWA 更适用于国外市场。

快应用 vs. 小程序： 目前快应用的开发门槛较高，发布流程繁琐，且没法实现跨系统。而小程序的持续更新，让开发者更加信任这个开发平台的后续发展。

掘金：如何看待微信小程序的将来？

凹凸实验室： 目前百度、阿里都在推出相似的小程序解决方案，整个业界都在重视各个细分场景的产品体验。但小程序仍然没法替代 app，小程序有更好的开发体验和使用体验，而 app 则是支持比较复杂的业务功能的载体。

期待微信小程序整个平台更加开放，融入社区更多已有的能力，让开发者能作的更多。

Taro 的故事

「Taro - 为提高多端开发效率而生」

掘金：最初为何要开发 Taro？

凹凸实验室： 一开始的目标是解决小程序开发中的一些痛点，后来在业务开发中，发现会同时开发 React Native、网站、微信小程序多个终端的切实需求。为了提高多端开发效率，Taro 遵循了 React 的语法规范，已经完整支持了小程序和 Web 端体验，即将发布对 React Native 的支持，快应用的支持正在开发中，而其余小程序，诸如百度智能小程序、支付宝小程序等也都在计划之中。

掘金：开发 Taro 中有什么有趣的故事？

凹凸实验室： 近期，Taro 进行了一次比较大的重构，一开始的 Taro 组件化是使用 Template 来实现的，有不少坑和问题。现在，从新基于小程序原生方案来实现组件化功能，得力于新的组件化方案，目前 Taro 的问题已经大幅减小，Taro 在小程序开发上也更加稳定了。而在此次大型的重构同时，咱们还须要不断解决社区里提出的问题和反馈，于是就要不断加班加点地去完成。如今 Taro 的核心有 8 名开发者在维护，还有一些同事会帮忙完善功能。

掘金：Taro 下一步的规划是怎样的？

凹凸实验室： 团队会继续以 Taro 为中心完善整个 Taro 生态的建设，例如兼容小程序第三方组件库，支持整个小程序生态、完善 Taro 多端 UI 库，输出业务组件库及电商黄金流程，并不断支持更多的终端。

Taro 的核心开发者李伟涛会在掘金开发者大会 · 微信小程序专场，分享「用 React 开发小程序的探索之路」。

「我会在本次大会上围绕小程序原生开发中的问题和痛点，与你分享 Taro 是如何基于 React 思想、编译原理、社区既存方案去解决这些问题和通点。 Taro 又是如何从社区中汲取意见和反馈，不断迭代、从头重构以适应更多、更复杂的特性需求和业务需求的。听完本次分享，你会从设计者的角度，更深刻的理解 Taro 的设计理念与实现方式。」

专属福利

掘金开发者大会 ∙ 微信小程序专场现已开始正式报名，如今正在 8 折优惠中。凹凸实验室联合掘金为读者带来了参与活动的专属福利：扫码进入小程序，输入专属优惠码：「auto」，立减 99 元（限量 10 名）！活动中，不只有干货满满的技术盛宴，还包众多福利奖品和价值 299 元的自助午饭哦！

活动信息：

• 官网：conf.juejin.im
• 时间：2018年9月16日（周日）
• 地点：北京富力万丽酒店
• 人数：600 名开发者

购票连接

票务咨询

• 联系人：王先生
• 电子邮箱：ticket@xitu.io
• 电话 / 微信：18561606818