写点什么

专访微信 WeUI 主程江剑锋:对微信 Web App 开发的建议

  • 2016-02-29
  • 本文字数:2352 字

    阅读完需:约 8 分钟

2016 年 3 月 19 日,第二届 FEDay 前端开发者大会将在广州举行,来自 Facebook、腾讯、阿里巴巴等公司的一线工程师将向参会者分享 React、Redux、微信 Web App、HTTP/2 等话题。

最近微信低调的发布了WeUI ,这是一套UI 组件库,可以帮助网页开发者实现与微信客户端一致的视觉体验,据悉,这套UI 组件库也在微信内部得到使用。

微信团队UI 工程师,WeUI 主程江剑锋也将参加FEDay 大会,分享《微信Web APP 开发最佳实践》。InfoQ 记者对他进行了采访,了解WeUI 的情况,以及微信内部是如何进行Web APP 开发的。

InfoQ:前段时间微信发布了 WeUI,请介绍一下这个组件库,以及它的开发历史?

江剑锋:WeUI 前身是我们在日常开发过程中,沉淀下来的基础组件库,在内部已经有广泛使用,例如微信安全中心、微信意见反馈、举报与投诉等微信内的 Web 应用。2015 年初,我们重新梳理这套基础组件库,包括设计、重构代码、测试、编写示例和文档,形成现在的 WeUI 。

InfoQ:微信为何要向外界发布 WeUI?

江剑锋:在 2015 年初,微信开放了 JS-SDK,开发者借助微信的帐号体系(网页授权)、JS-SDK 功能以及公众号提供的接口,就可以开发 出功能强大的 Web 应用。然而,不少微信第三方 Web 应用,功能齐全,但是界面体验却不佳,缺乏专业的交互 / 视觉设计。于是我们重新梳理之前沉淀的组件库,整理出一套与微信原生界面风格一致的基础组件,取名 WeUI ,于 2015 年 10 月在 github 正式开源。开发者可以使用这套 UI 库,快速构建出美观、易用的 Web 界面。

InfoQ:微信 Web App 和一般 Web App 有哪些不同?是否存在兼容性问题?

江剑锋:JS-SDK 是微信 Web APP 区别于一般 Web App 的重要特点,除此之外,微信 Web App ,可以通过网页授权,调用微信的用户体系。Web App 通常都需要对用户进行标识,记录用户的一些数据,普通的 Web App,需要开发者开发用户注册流程,用户得填写用户名、密码等信息才能完成注册。对于开发者而言,增加了开发量;对于用户而言,需要走注册流程,记忆多 一个用户名和密码。而在微信内,只需要调用网页授权,用户无需输入用户名密码,就可以获取到用户的 openid 、昵称、头像,对用户进行标识了,对开发者和用户来说都很方便。因为微信网页授权必须在微信内完成,其他 App 或普通浏览器内就无法使用,开发者可能需要做兼容性判断。

一般的 Web App,需要兼容不同的浏览器,而微信 Android 客户端嵌入了 QQ 浏览器团队开发的 X5 内核,消除了各个 Android 版本内置 webview 之间兼容性的差异,开发者在 Android 下只需要考虑 X5 即可。

InfoQ:微信内部有哪些应用是使用 Web APP 形式开发的?

江剑锋:目前微信里面典型的 Web App 有“微信网络搜索”、“表情搜索”、“微粒贷”、“理财通”、“微信意见反馈”等。

以微粒贷为例,该应用功能比较多,每个功能有多个步骤,程序需要记录这些步骤的状态,如果采用 Web Page 的形态,每个步骤都要重新加载页面,除了用户体验差,还给记录步骤的状态增加了开发难度。由于这个功能没有 SEO 的需求,不需要搜索引擎索引,所以采用 Web App 的形式进行开发。

InfoQ:能否介绍一下你们开发微信 Web App 使用的工具以及工作流?

江剑锋:主要使用 webpack 来做依赖管理和代码打包,用 gulp 来做模拟数据注入和本地 demo 服务启动相关的东西。目前的工作流程是使用模拟数据和模拟微信 JSAPI 在本地开发,然后再更新到测试环境的。这样的工作流程使前端开发可以脱离实际的环境限制来完成大部分工作。

InfoQ:能否介绍一下你们对于微信 Web App 有哪些质量标准?

江剑锋:质量一般可以从几个方面来衡量,功能完整性、兼容性、安全性、用户友好。

功能完整性,这个是最基础的,方案中设计到的功能,需要实现。这个开发自测、测试人员都可以测出来。

兼容性,指的是不同平台 / 系统版本 / 微信客户端版本 / 设备屏幕尺寸的适配能力,保证兼容到主流设备。平台、系统版本、设配屏幕尺寸都比较好理 解,就是要保证这些条件表现良好,或者平滑退化。而不同的微信客户端版本是指,如果 Web App 调用的 JSAPI,只在较新的微信版本才支持,那么当用户使用较低版本微信时,需要给出友好的提示。

安全性,除了开发自测外,需要经过测试人员、安全人员的检测。检测范围通常包括,方案本身是否存在逻辑漏洞、常见的 Web 漏洞如 XSS 等、压力测试、接口调用频率限制等。

至于用户友好,我们会从产品、交互、视觉、技术多方面来衡量。用户打开页面是否够快,看到的界面是否美观、大方得体,操作起来是否简单、流畅等,都是衡量的因素。

InfoQ:从您的经验出发,目前移动 Web 主要的坑有哪些?

江剑锋:从开发者的角度来看,移动端 Web 开发抱怨比较多的是来自 Android 平台不同版本差异。有些功能 / 样式,在 iOS 或者新版本的 Android 手机表现正常,但是到了某些 Android 手机,就出现奇怪的 bug ,这些很难提前应对,得靠经验总结。

此外,Android 流畅程度普遍比 iOS 的低,在 iOS 下表现良好的动画效果,在 Android 下可能就会出现卡顿的情况,这种情况下除了对代码进行优化之外,可能需要做些妥协,减少动画效果。

InfoQ:您对微信 Web App 开发者有什么建议?

江剑锋:我的建议是,Web App 开发需要注重用户体验,开发者可以从下面几个方面来提升。

首先是传输性能。因为是移动端的缘故,网速是一个不可忽视的问题,页面加载时间过长,用户体验就显著下降。在弱网络环境下,页面加载时间不宜超过 3 秒。可以通过对静态文件进行压缩(尤其是图片)、合并、设置缓存、使用流行的 CDN 服务等,来加快页面加载速度。

另外,美观的界面、流畅的操作,能够有效地提升用户体验。可以使用流行的开源 UI 库或者框架,这些库或者框架通常有专业的设计。对于开发者来说,可以快速构建出应用的界面,提升效率;对于用户而言,用起来也更加舒心。

2016-02-29 02:496060
用户头像

发布了 164 篇内容, 共 106.9 次阅读, 收获喜欢 392 次。

关注

评论

发布
暂无评论
发现更多内容

思想与落地

型火🔥

架构 分布式 微服务 哲学

第五课作业

杰语

Serverless Devs 的官网是如何通过 Serverless Devs 部署的

阿里巴巴云原生

Serverless 开发者 运维 云原生 存储

暑期 2021 | Serverless Devs 最全项目申请攻略来啦!

阿里巴巴云原生

开源 Serverless 开发者 云原生 活动

文本分析基本流程

Qien Z.

文本分析 5月日更

One-on-One Meeting

escray

学习 5月日更 朱赟的技术管理课

促成“零碳”社会的全面实现,华为云让技术更有温度

xiaotan

华为云

人生算法:愿景,设计人生导航系统

石云升

读书笔记 愿景 5月日更

唵嘛呢叭咪吽|靠谱点评

无量靠谱

简单又灵活的权限设计?

蛋先生DX

数据库设计 权限系统 权限 权限架构 rbac

刚刚接触视频剪辑,怎么快速剪视频?

奈奈的杂社

持续测试 | DevOps 时代的高效测试之钥

CODING DevOps

DevOps 持续测试 迭代式测试

公安重点人员情报研判分析系统,可视化大屏系统

5分钟速读之Rust权威指南(十三)

wzx

rust

Logstash-数据流引擎

进击的梦清

大数据 Linux 运维 后端 Logstash

量化马丁策略系统搭建,网格策略交易系统

不愧是Alibaba技术官,Kafka的精髓全写这本“限量笔记”里,服了

Java 大数据 架构 面试

iOS基础原理题目汇总

程序员 面试 iOS 知识体系

「信创」风口,国产数据库的新机遇

BinTools图尔兹

数据库 数据安全 dba 数据库管理 tdsql

从外包到拿下阿里offer,这2年5个月13天到底发生了什么?

Java 程序员 架构 面试

99% 的同学写不出好代码,都是因为这个问题!

程序员鱼皮

Java c++ Python 自学编程 经验分享

通证经济— 激励机制、社会生产、后资本主义

CECBC

腾讯云大神亲码“redis深度笔记”,字字珠玑,全是精华

Java 程序员 架构 面试

大数据采集和常见问题

数据社

大数据 数据采集 5月日更

不含敌意的坚决|靠谱点评

无量靠谱

网络攻防学习笔记 Day31

穿过生命散发芬芳

5月日更 网络攻防

dubbo-go v3 版本 go module 踩坑记

阿里巴巴云原生

容器 开发者 云原生 中间件 dubbogo

阿里云携手 VMware 共建云原生 IoT 生态,聚开源社区合力打造领域标准

阿里巴巴云原生

阿里云 容器 开发者 云原生 k8s

“四大模型”革新NLP技术应用,揭秘百度文心ERNIE最新开源预训练模型

百度大脑

开源 nlp

深入剖析 MySQL 自增锁

leonsh

MySQL 数据库

IoT系列,树莓派监控开关状态

IT蜗壳-Tango

IT蜗壳 IT蜗壳教学 5月日更

专访微信WeUI主程江剑锋:对微信Web App开发的建议_移动_徐川_InfoQ精选文章