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

团队介绍

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

凹凸实验室: 我们于 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

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

  1. 新闻资讯小程序开发实践

    新闻资讯小程序开发实践 在腾讯小程序上线一周年之际,公司又决定把App产品部分内容在小程序上实现.就在小程序刚上线的时候,公司也有一款产品进行了小程序的研发,但后续没有持续的维护.这过了一年的时间,微 ...

  2. 腾讯在线教育小程序开发实践之路

    前言: 小程序是一种新的开放能力, 开发者可以快速地开发一个小程序,便可以在微信内被便捷得获取和传播,同时具有出色的使用体验.随着近两年来小程序风口的爆发,越来越多的开发者.企业开始接入小程序,那么在 ...

  3. python开发微信小程序-Python 开发者的微信小程序开发实践

    导读 在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...

  4. DingTalk「开发者说」|钉钉小程序开发实践

    移动Web的特点   钉钉小程序开发的应用分布很广泛,下面列举了四个常用的钉钉小程序:钉钉投票.传图识字,以及集成在钉钉客户端中的自定义平台和考勤打卡. 通过对比桌面设备,移动Web的特点体现在以下三 ...

  5. 摩拜单车小程序开发实践与框架分析

    以打造内容全.技术新.可实操的小程序小册为目标,整本小册共包含 21 节,不仅讲述了小程序开发的一些基础知识,也通过摩拜单车业务案例深入小程序开发,此外,还加入了主流框架的使用对比和深入的技术细节分析 ...

  6. 「开发者说」自动化设备管理上钉钉,“源创食堂“小程序开发实践

    本篇文章的供稿人为柳州源创电喷技术有限公司装备开发部部长蒙东辉,概览本文大概需要3分钟,精读本文需要10分钟. "钉钉应用开发让公司食堂都实现了数字化转型,食堂备餐浪费与不足的现象得到了有效 ...

  7. Python 开发者的微信小程序开发实践

    2017年微信小程序横空出世,惊诧了中国移动互联网.看重者言其将革了 IOS 和 Android 的命,看轻者斥其必将无所作为. 无论重视或是轻视,微信小程序都越来越多地出现在了我们的生活.工作和学习 ...

  8. 【小程序】微信小程序开发实践

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/diandianxiyu/article/details/53068012 </div>& ...

  9. 小程序开发实践总结 - WEB前端

    从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹.我司也不例外,我们整个前端团队这半年来基本上都是在开发小程序.前前后后也开发了四五个小程序了.总觉得要留下点什么,既是记录那些年我 ...

  10. 中电金信源启小程序开发平台 赋能金融+业务生态共享共建

    导语:源启小程序开发平台立足于"为金融业定制",从小程序全生命周期的角度出发,助力银行.互联网金融.保险.证券客户实现一站式小程序开发.发布.运营与营销.企业可以通过源启小程序开发 ...

最新文章

  1. 全球只有4个人通关的游戏!不过如此
  2. 关于数据库优化1——关于count(1),count(*),和count(列名)的区别,和关于表中字段顺序的问题...
  3. 在SQL Server中将行有效地转换为列
  4. c语言加密算法头文件下载(base64、md5、sha1)
  5. 根据鼠标点击位置获取DataGridView的选择行号。
  6. cad vba 打开文件对话框_CAD文件损坏?无法打开?别急,这八种方法或许能帮到你...
  7. HttpWebRequest post提交XMl参数请求,
  8. android 解决getNetworkInfo过时
  9. 修正IE6中FIXED不能用的办法,转载
  10. C语言实现排名算法和排位算法
  11. 【转】Web Reference和Service Reference的区别
  12. LeetCode 436. 寻找右区间(二分查找)
  13. 静态网页托管_视频教程:如何在IPFS上托管网站!
  14. docker 镜像 增删改查
  15. Unity3D基础12:碰撞体
  16. 用户收货地址h5页面_如何实现H5可视化编辑器的实时预览和真机扫码预览功能?...
  17. LeetCode OJ - Construct Binary Tree from Preorder and Inorder Traversal
  18. java B2B2C Springboot仿淘宝电子商城系统-spring cloud 跨域访问
  19. python学习视频
  20. python输入一个三位数、输出它的逆序数_从键盘任意输入一个3位整数

热门文章

  1. 《Java从入门到放弃》JavaSE入门篇:JDBC(入门版)
  2. 微信商户平台的“企业付款到用户” 产品功能被隐藏起来了。。
  3. 【面试题7】用两个栈实现队列
  4. loadrunner中文件的操作
  5. Ford-Fulkerson Edmonds-Karp算法
  6. 「搬文工」Mac Finder 右键快速新建、复制、移动文件工具
  7. Missive for Mac(邮件处理客户端)最新版
  8. [Swift][leetcode] 433. 最小基因变化
  9. 【数据科学系统学习】机器学习算法 # 西瓜书学习记录 [9] 决策树
  10. 【BZOJ】1270 [BeijingWc2008]雷涛的小猫