阅读 5909

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

作为第一批发布的小程序、同时也是大家最熟悉的微信小程序之一,京东购物小程序每天需要支持数千万的消费者。掘金特意邀请到京东购物小程序背后的一支开发团队 —— 凹凸实验室进行专访,与大家聊聊京东购物小程序的开发实践,以及对小程序未来发展的看法。

团队介绍

掘金:先简单介绍一下凹凸实验室的团队情况?

凹凸实验室: 我们于 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
关注下面的标签,发现更多相似文章
评论