对无线电商动态化方案的思考(一)

如题,接下里的一段时间里,我会从无线电商动态化的角度谈一谈自己的理解和思考

无线电商动态化

无线

首先要谈的是无线,或者说移动。手机和传统桌面端计算机有着非常大的不同,首先是随时随地,这样它就需要同时也可以拥有更多的传感器,比如镜头、体感、定位、蓝牙、NFC 等等,当然也包括多点触摸屏,人们的操作和交互方式也发生了很大的变化;其次它的屏幕尺寸和电脑完全不同,也由此产生了完全不同的阅读体验和阅读方式;再有就是能耗和稳定性变得非常非常关键,如何流畅的展示复杂界面和大数据,如何有效控制由于资源问题而导致的 crash,如何帮用户省电,如何长时间使用还不会发烫,都变成了很重要的课题。总而言之,一个输入,一个输出,一个性能。

还有一个潜在的问题,就是无线端很多形态大家都还在一起摸索之中,这其中有很高的“试错”成本,我们的产品经理甚至会在项目初期就主动坦承我们需要很多试错,需要快速迭代。所以在无线端探索性质的东西非常多,远远多过桌面端。

电商

电商这个话题其实挺大的,我只说一些从个人技术角度看到的电商:就是 1 什么地方都得能随时改,2 随时改

从电商平台的角度,我们无时无刻需要为用户挑选和推荐更好更适合的选购信息,比如有新品上架了,有商品降价了,有促销活动了……它作为平台一定是自由的,信息是充分流通的,所以也必须是非常灵活实时的。

再有就是电商是和真金白银打交道的,这要求我们对技术方案的稳定性和准确性做非常严格的把控,对项目工程化有极高的要求,项目过程中的半点松懈都有可能对用户产生极大的影响。

动态化

今天的移动端,大家基本都是通过各式各样的 app 来完成自己的事情,而这些 app 都是 native 的,有必要的版本控制和发布节奏。浏览器的位置相对没有那么明显,更多的充当了一个“快速降级”的角色,即如果我们没有安装 X (类) 应用,那么当我需要使用 X 的时候,就用浏览器打开一个 X 的网站。

既然大家的主战场都是 native app 了,那基于上面我们对于无线和电商这两个关键词的分析和理解,如何在充分合理运用设备的输入输出、并且能够快速迭代、实时调整、还能把控性能和各方面风险,就变成了重中之重。

比如每年双十一当天,整个天猫和淘宝的各条产品线都处在高度“敏感”的状态,活动当天出现的任何一个状况都可能产生非常重大的影响,需要我们可以灵活调整;在平时卖家和买家产生的任何信息和数据,都希望可以最通畅的发布出来。尤其是卖家,如何“装修”好自己的店铺,“打扮”好自己的宝贝信息,“张罗”好自家的活动,都需要非常强的动态性做支撑。

移动端的 HTML5

先反观今天的桌面端,浏览器已经是绝对的主角了,我个人身为一个前端工程师算是亲身经历了浏览器从默默无闻到变成桌面端第一使用时长的全过程。而今天的手机则是 native app 的天下。我觉得原因有很多,比如体验、能耗、生态、入口等等,同时也是因为手机上的浏览器需要顺应很多颠覆式的变化并且在多个厂商之间寻求统一。

HTML5 其实在移动端一如既往的保有着它的跨平台和快速实现的优良特点,随着手机操作系统的不断升级,越来越多的 HTML5 新特性有机会在实际产品中运用起来。但也一直有很多局限性。

比如提供的功能有限——这个问题目前很多地方都在通过 Hybrid 方案来解决,把底层的能力或业务上的特殊需求封装成 JavaScript API 暴露给 webview,从而让 Web 页面可以通过 JavaScript 调到这些特性。相信任何团队在这条路上经过一段时间,都已经把问题解决得差不多了。

第二个问题是性能问题,今天在移动端,设备的性能,不论是从 CPU 还是内存还是电池都不能和桌面端同日而语,简单的界面用起来是没感觉的,一旦交互复杂或数据量达到一定程度,webview 的弊端还是比较明显的。而且上述两点都是比较绝对的,而由于性能和能力缺失而引发的上层技术方案的倾斜则会产生更多深远的影响。比如二维码扫描与识别、省市区地理位置选择、包括一些复杂的动画设计,这些问题都不是“前端能不能做”的问题,而是做出来效果好不好的问题,或“卡不卡”的问题。

在桌面端,浏览器之所以能一统江湖,其实不只要归功于 W3C 和 HTML5,我们的浏览器还有一位好朋友:那就是 Adobe Flash Player Plugin,它虽然不是标准的开放的,但是在后期有着惊人的用户,对浏览器的能力做了大范围的扩展,而性能也是 native 级别的,这恰恰解决了我们上面提到的几个问题——后期 Adobe 还提供过 AIR 平台,可以完全甩开 Web 开发桌面应用。而现在的移动端就没有这么好的“福利”了,迟迟没有人站出来充当“移动端的 flash”的角色。

看上去还不错的解决方案

我所在的团队一直在不断思考和探索无线电商动态化这个问题。在这个过程中,我们看到了很多不错的方案,也做了很多自己的尝试

  • 传统 Hybrid:基于嵌入 native app 的 webview,通过对 API 的扩展达到解决问题的目的,这个已经流行好一阵子了,无需多提
  • 为 Hybrid 引入 native 界面:我个人最早是在去年 QCon 北京听 @王集鹄 大叔的分享,当时只有安卓版本,大概做法是以类似 plugin 的方式把一块 native 界面引入到 webview 当中,这样在整体还是 webview 的情况下,可以局部达到特殊的 native 效果。随后在今年的 Velocity 北京,也看到了一个类似的方案,这次 native 界面是“盖在 webview 上”的,并随着 webview 滚动条做相应滚动,以保持界面的一致效果。
  • WeApp:这是我们无线事业部2年前开启的一个项目,设计一套 JSON 格式,可以描述界面的结构和样式,然后各端实现对这套 JSON 格式的解析和渲染。这样我们只要每次请求不一样的 JSON 数据,就可以展示出不一样的界面效果,和之前的 Hybrid 方案不同的是,在 native app 里我们的展示效果是 100% native 的,并且我们还做了 HTML5 版本的“降级”渲染方案,用户在浏览器里同样有机会借助我们的渲染方案把整个界面展示出来。
  • React Native:这位老兄毫无疑问是今年全球最火热的移动技术方案之一,界面是 100% 的 native,彻底颠覆了移动应用的技术栈和开发体验。但最重要的是,它在运行时是用 JavaScript 进行控制的。这件事为我们打开了一个巨大的脑洞:一旦我可以在线发布和加载 JavaScript 文件,那也就意味着我具备了动态性的能力!于是乎出现了通过动态发布 React Native 代码达到动态性目的的技术方案。

最终

我们经过一系列的调研、思考和讨论之后,提出了一套完全针对无线电商动态化的技术方案。它同样:

  • 致力于移动端
  • 能够充分调度 native 的能力
  • 能够充分解决和回避性能瓶颈
  • 能够灵活扩展
  • 能够多端统一
  • 能够优雅“降级”到 HTML5
  • 能够保持较低的开发成本
  • 能够快速迭代
  • 能够轻量实时发布
  • 能够融入现有的 native 技术体系
  • 能够工程化管理和监控

我们觉得它并不是那种第一眼看上去很伟大的东西,但是它能够帮我们解决几乎所有实际业务中遇到的问题,是个非常务实的家伙。

我们甚至觉得这个方案里面没有什么高深的东西,没有颠覆式的新科技,但我们非常针对性的关注细节,并且在实际业务当中产生的效果却是颠覆式的。

更令人振奋的是,这套技术方案在今年的双十一全球狂欢盛典中经受住了考验,我们成功的支持了主会场的前期研发和当天的发布即实时调整。这也让我们更有勇气和信心面对接下来的更多挑战!

我给它起了一个酷酷的新名字:Weex

关于 Weex 我们有太多收获想分享,今天先开个头,谈一谈自己对无线电商动态化的浅见。

下一篇:对无线电商动态化方案的思考(二)

时间: 2024-09-17 02:47:11

对无线电商动态化方案的思考(一)的相关文章

对无线电商动态化方案的思考(三)

之前两篇我们分别谈到了对无线电商动态化的理解,以及我们自己的技术方案:Weex,都比较宏观和抽象,今天我们分享一些其中的技术细节 data-binding 首先要介绍一下我们是怎么做到数据绑定的,首先,我们对上层撰写的代码遵循了传统的 mustache 书写习惯.即: <template> <text style="color: {{mainColor}}">{{title}}</text> </template> <script&

对无线电商动态化方案的思考(二)

上一篇谈到了我对无线电商动态化的理解,并简单提到了我们自己提出的技术方案:Weex,今天就来详细介绍一下 Weex 一句话介绍 Weex 是一款轻量级的移动端跨平台动态性技术解决方案! 几个特点 轻量 体积小巧,语法简单,方便上手 可扩展 业务方可自行横向定制 native 组件和 API 高性能 快速加载,快速渲染,体验流畅 其它 拥抱标准:基于 Web 标准设计语法 响应式界面: 通过简单的**模板**和**数据绑定**轻松解决数据和视图的同步关联问题 多端统一:iOS.Android.HT

Weex详解:灵活的移动端高性能动态化方案

在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责人庄卓然(花名南天)宣布阿里移动端跨平台开发框架Weex开始内测,并将于6月份开源.在QCon的第二天,阿里技术专家徐凯(花名鬼道)和阿里前端开发专家赵锦江(花名勾股)向参会者做了<Weex--灵活的移动端高性能动态化方案>的演讲,对这一技术方案进行了详细的剖析. 以下为演讲内容的整理: 昨天南天宣布Weex启动开源内测,截至到今天中午,我们统计申请内测用户突破1400人,大家的热烈程度远远超过我们的设想

Weex动态化方案与双十一实践

在2017年1月12日 Weex Conf 2017上,来自手机淘宝移动平台Weex团队的凝砺结合淘宝实际业务分享了Weex动态化方案和双十一实践,本文先介绍了Weex的整体架构,接着重点分享了Weex在双十一会场上的实践,最后谈及了Weex的业务支撑,包括AliWeex等. 以下为精彩内容整理:   初始Weex Weex是一套高性能跨平台移动开发框架,最大的优势是解决了频繁发版和和多端研发两大移动开发痛点.一套代码完美适配IOS.Android.HTML5和Web等多端,极大的提升开发效率同

深度揭秘阿里移动端高性能动态化方案Weex

2016年Qcon大会首日,阿里巴巴资深总监.淘宝移动平台.阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源.此消息一出,群情汹涌,在座的程序猿.攻城狮们纷纷拿起手机扫码,以期第一时间感受Weex的神奇之力. 在第二天的主题分享会上,阿里巴巴前端开发专家赵锦江和技术专家徐凯对Weex进行了深入的解析.以下为演讲速记整理后的成文. 阿里怎么看待移动开发? 目前的移动开发者面临的最大痛点就是面对极其复杂的环境,对此,庄卓然给出一个公式,移动开发的复杂度=应用数量×平台数

电商研发方案——产品模型业务分析和设计

一.方案概述 <Craft6.cn 电子商务研发方案http://www.aliyun.com/zixun/aggregation/9636.html">产品模型业务分析和设计>是颜超敏就电子商务系统研发编写的其中一份方案,分为共享版和企业版. 本文的针对产品模型中产品基本信息.产品分类.产品规格.产品属性.产品销售类型.产品定价.产品归属和产品包等业务进行 业务分析和设计,并给出ER图的设计. 对于企业版,还给出本模块详细的数据库设计和开发上的关键业务说明.另外还附带数据库设

无线电商移淘商城开店细则曝光:门槛低 首批入驻卖家高优惠

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 1月8日消息,记者日前获得一份关于无线电商移淘商城的店铺系统的招商文件,该文件不仅明确开始招募商户(包括综合B2C商城.C2C商城和品牌商)开通无线店铺,而且接入了淘宝支付以及财付通在线支付.有消息指出,目前商户接入无线店铺的门槛并不高.不少商家都表示,对于无线电商抱有很大的期望,由于入驻门槛不高以及许多行业内人对移动互联网未来趋势的预测,许

传:无线电商“移淘商城”闭门造船,将开放商家入驻平台

中介交易 SEO诊断 淘宝客 云主机 技术大厅 根据艾瑞网民行为监测产品iUserTracker和mUserTracker数据显示,2013年1-9月,国内PC端网站的日均覆盖人数基本保持在2.3亿人次上下,已趋于停滞.而移动端App的日均覆盖人数则呈现持续上涨,已接近2亿.CNNIC统计数据,2013年6月底中国手机上网用户达4.64亿,环比增速10.4%. 移动购物在整个互联网消费占比持续稳定增长.2013年接近尾声,移动互联网行业仍处在较为初级的发展阶段,但市场的商业环境正在经历着"重塑.

缓存技术方案改造思考

这是我对一个正在进行的重构项目,缓存技术方案改造点之一的一个想法: rc现有的实时缓存(其实也是准实时,失效时间的存在)设计: 存在的问题:现有的实时缓存方案(也并非真正意义上的实时,缓存失效时间的存在),与上游核心系统耦合度较高,核心系统强依赖下游欠核心系统,而且目前的查询服务性能也存在问题,比如区域销售豆腐块接口返回的数据量大,并且从tair->rc,rc->delivery需要经过两次网络传输,这之间网络传输及序列化.反序列化消耗大,而且出现问题时,由于排查链路和时间周期都长: 升级方案