说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

专访阿里前端工程师:淘宝移动Web开发那些事儿

HTML文档下载 WORD文档下载 PDF文档下载
近日,淘宝移动前端开发工程师寒泉@寒冬winter 接受了CSDN的采访。从技术选型、Web信息处理、浏览器适配、安全支付以及业务支撑多个角度,全方位解析电商巨头阿里的前端开发理念。

寒泉,阿里无线事业部前端工程师,从事淘宝移动Web前端开发工作。曾就职于微软和盛大,去年12月,加入了淘宝移动前端这支年轻的团队。近日,CSDN记者采访了寒泉,他为我们讲述了淘宝移动Web前端开发的故事。


寒泉 @寒冬winter

CSDN:请做一个自我介绍并谈谈您的个人从业经历。

寒泉:我是寒泉,网名是winter,微博上叫做@寒冬winter。我08年加入微软做Windows CE上的IE浏览器开发,2010年开始在盛大做电子书和基于Web的操作系统,2012年12月加入阿里,现在在阿里巴巴无线事业部前端团队。

CSDN:请介绍一下淘宝移动前端团队及成员。

寒泉:我们是一支相当年轻的团队 ,主要成员大多在2012年加入淘宝,成员也以85后为主——几乎与移动前端技术一样年轻。作为技术职能团队,我们和同样有激情的产品和运营团队配合,开发淘宝客户端的内嵌网页和移动端的淘宝网站。


CSDN:有人说手游是最适合使用HTML5技术进行开发的,其次是新闻和地图类App——WebGL能够很好地渲染3D动画,SVG以及Canvas能够帮助图形进行各种动态变幻,而淘宝这样的电商类型产品为何要使用HTML5技术呢?HTML5能够帮助淘宝移动Web应用实现哪些功能?

寒泉:毫无疑问HTML5在图形方面的增强让大家一下子想到了游戏,事实上HTML5也的确带给了网页游戏全新的机会,然而决定一项技术适合产品的,不是"增强"的部分,"增强"加上原来的强度才是我们最终考量的指标。相比于其它图形平台,即使HTML5提供了如此多的新特性,它仍显太过薄弱,所以我想HTML5手游的出路并非与其它平台竞争炫丽的效果,而是更充分地利用Web的链接和开放特性去增强社交化。

对于我们来说,选择HTML5与否是个伪命题,我们应该回答的是"为什么不使用HTML?"——请注意到我没有加"5"。从淘宝过去的十年来看,几乎所有的产品都是使用HTML构建的,那么在移动端继续使用这项技术是非常自然和理所当然的了。至于版本是4或者5,实际上完全取决于大多数淘宝用户浏览器的支持情况—— 我们从未指望过W3C的标准能够被完全地实现,即使是更早版本的HTML规范中的功能,我们在使用前也会小心翼翼地调研它的实现情况。


实际上HTML5的功能总是客户端功能的真子集,但是这不意味着它更弱,通过Hybrid技术,基于Web实现的功能可以快速地发布给用户,不需要经过苹果和其它软件市场冗长的审核周期,同时,完全开放的Web版内容,也让一些第三方厂商可以方便地引用我们的功能到他们的客户端。

CSDN:前端内容展示方面,淘宝移动Web应用在宝贝介绍、图片信息方面的处理,与移动客户端有哪些不同?

寒泉:大部分情况是相同的,不同之处主要有四点:

  1. Web上对缓存的使用更多,我们会通过manifest来把功能型图片长期保存在本地。
  2. WebP、SVG等新格式使用较多,当然,也要进行适配。
  3. 响应式布局中我们需要弹性图片,这一点我们还在探索中。
  4. 用户对流量更敏感,所以要使用懒加载策略。

CSDN:在移动后端开发方面,淘宝运用了哪些技术和策略?

寒泉:Node.JS我们主要用在一些内部工具中,服务端严格来说我们算是Java。展现逻辑基本在前端,后端还是集群技术比较重要。

CSDN:在购买和支付环节,淘宝移动Web应用如何针对这部分内容进行技术方面的处理,保证用户的财产安全?

寒泉:事实上,移动设备比起桌面,是个更安全的环境,尤其iOS是半封闭的平台。所以我们几乎沿用桌面淘宝的安全策略。对于支付宝,我们采用的仍然是严格的域隔离策略。

CSDN:移动Web前端技术对用户购买行为有哪些影响?

寒泉:移动终端往往输入更困难,屏幕也更小,网络环境更复杂,用户在这方面遇到困难时就更容易放弃。我们在移动平台上努力缩短交易流程和减少页面跳转。同时,因为用户层次比PC用户略微偏高,受到苹果的用户体验教育也比较多,所以对体验也更加敏感,所以前端需要配合设计师为用户提供更流畅的体验。我们花费了相当长的时间来找到苹果风格回弹、摩擦力等等。


CSDN:在浏览器适配方面,如何保证在不同的手机浏览器上保证良好的用户体验?

寒泉:在移动前端开发中,尽管可以告别IE6,但是我们要面对更多的机型、更多屏幕尺寸、以及更多浏览器种类。比如Android,看上去都差不多,但是一些无良二线厂商经常会自以为是地搞些"深度定制",说白了就是乱改Webkit内核,他们的这些patch基本没有逆向集成回Android Webkit的打算,于是这些代码没有经过内核维护者的review,也没经过严谨的测试,质量可想而知。遇到这样的bug,我们基本只有绕开,技术绕不开的,业务和体验就要妥协。 

CSDN:请谈谈淘宝移动端业务未来几年的规划。

寒泉:不久前,我们刚刚上线了微淘,这会是全新的尝试,将来我们的服务会更加定制化,我们会帮助用户找到更适合自己的内容,而不是所有人都看到一模一样的首页和运营信息。同时卖家也会更容易做更加精准的营销和积累自己的用户群体——我们也在努力去通过技术降低卖家营销的技术成本。

我们也会更充分地利用移动设备的新特性:地理位置、摄像头、传感器。对于这些特性的利用,现在业内还是非常浅层次的,我们也在积极地探索,其中一些可以引入全新的产品形态,另一些可以让产品变得更有趣或者更方便。前期尝试可能会在时效性较强的运营活动中,逐渐它们会在产品中被深度使用。

关于产品方面的规划,大家可以关注下我们的产品和运营总监的新浪微博 @尚文 。

(文/杨依帆 责编/张宁)

一周消息树:我们从WWDC 2014收获了什么? 精益设计:“纸上谈兵”的说服力 指尖上的艺术——如何运用代码发挥无限创意 周末巨献:100+诡异的数据集,20万Eclipse Bug、死囚遗言等 TIOBE 2014年6月编程语言排行榜:Swift能否取代Objective-C? 移动游戏后端:开发还是购买?你必须知道的6件事 Vuforia SDK 3.0发布在即 全球注册开发者已逾10万 最受职场青睐的十大热门云计算技能盘点 Android Bootstrap:开发也能用模板,省时又省力! Facebook开源又一力作,欲借Broadcom开放交换机 华为敏捷网络:坚持被集成,引领ICT融合 专访赵桂华:.Net也有春天及高性能网站架构实践 《近匠》Testin:云测试除了APP和真机 还有可穿戴和汽车 应用开发利器FXForms:iOS上实现各种Form View Firefox 30正式版:支持GStreamer 1.0技术、内置全新Gecko 30内核 从阿里、UC联姻 看移动互联网“入口”之争 AppCode发布3.0.1更新,支持Xcode 6和Swift 智能家居持续升温:苹果HomeKit合作伙伴Honeywell发布恒温器 欲与谷歌、亚马逊抗衡,苹果推CloudKit拥抱云服务 针对新一代物联网应用 Atmel推全新32位微控制器 实时计算,流数据处理系统简介与简单分析 Cue:秒杀HealthKit,打造自己的家庭医生 新iPhone要来:4.7就够了么?我们还有更大的 Docker迈入云(DockerHub)+端(Docker引擎)时代 《近匠》壹枱智能钢琴:改造音乐行业的新“玩”家 圣何塞Hadoop Summit 2014看点 唯快不破!90后大学生9天完成近670页的Swift语言文档翻译 一周消息树:Java、.NET、Web技术应用特点 苹果生态格局:软硬件之后,iLifestyle才是王道 小米互娱总经理尚进:独立游戏当为发烧而生 哪些编程语言、框架/平台最受企业青睐? 大家帮我看看这是用哪个做的? 关于打印... 两路由器的使用方法比较,哪个好些? 在线求助:有没有改变电脑所连的打印机打印属性方向的API函数?多谢 我要送分 设置ejb的几个接口时,我有点弄不明白 有没有什么办法把ACCESS的表打印出来?格式改变一下? 烦啊~~~~ 谢谢!如何让对话框的大小不受屏幕分辩率的影响??? 请问怎样避免多用户同时访问数据库中的表? 简单问题:怎样用url打开一个文档?多谢 怎么控制小数的位数? 这个QQ炸弹好厉害,是什么原理呢? 我的问题怎么老是出现在这个地方。。。。 一个对话框程序调用dll中函数的问题! 请教有关类的扩展 请问WIN2000专业版IIS为什么连接限制是10 急,为什么我的数据库会出现这样的错误? 寻求一个好的全屏翻译软件(在线等候,在线给分) 寻找《编译原理与时间》电子文档下载url 升级了,散分小庆.认识的朋友进来捧个场,不认识的也进来热闹热闹!忠心感谢:-) 奇怪的问题 如何解决在一个表单中多个提交按钮的问题? 请问怎样关闭135端口 Photoshop7.0的一个简单问题,大师们帮帮忙! 关于动态查询的问题? 请问如何验证代理服务器? 超过半个小时不作任何操作就把这个连接KILL掉,改如何做呢? 如何才能做出只存在于托盘栏的程序! 搜集VB绘图源代码,多多益善 北京市里有没有支持asp.net的服务器空间提供吗? GGJJDDMM 帮帮我啊~~~~ 新手的问题--如何作到点击页面中的提交按钮,只刷该页面的DataGrid部分,而其它部分控件值不变?(在线给分) 大家帮忙,要取得客户端的信任,用服务器控件对客户端进行读写文件的资料? 谁说我们要和兄弟会和解了? 一直都是你们在攻击我们,靠还和解?道歉差不多。 版本的差异造成的问题,ADO连接SQL Server。求教!!! 海宜派(NSU Pie) 为什么insert into语句不能完成添加? 在线等一个简单的问题! 能用DOS盘启动然后用GHOST 备分LINUX分区吗?我想备份我的LINUX系统。 SQL中能否用CopyMemory这样的函数??? 我的猫竟拨不上号 一个菜问题 type和typedef有什么区别? 100分问题,在线等,本地XSL,XML,使用VB脚本,使用MSChart生成图形,刷新几次后IE崩溃,高分求解 socket.setSoTimeout() BCB使用ClientDataSet调用Sybase存储过程的问题 趟过“地雷阵”的铁面总理 (转载) 我的电脑为何会自动开机? emf是什么打印格式? 小偷 银河是有多少颗恒星组成?我以为百度知道是万能的,没想到,你们竟然也不知道.... 为什么动物的耳朵长在头上,而人的耳朵长在头的两边上?这是我五岁儿子问的问题,把我难住了, 食品包装袋上写的能量值可信吗? 求大神帮我做一个弹弓架CAD图纸 只要上面的这个支架,但是不用像这个打眼这么麻烦,简单的能穿皮筋的孔就可以,要能打3到4个孔.弓门宽度和普通的弹弓差不多久可以,大概内侧6CM,外侧8.5CM,高 是不是反应物中有固体反应产物中就不用写沉淀符号?氢氧化亚铁在空气中生成氢氧化铁为什么不用沉淀符号? 营养素参考值能按食品中某营养素的含量10g来计算吗?如某一品牌蛋白质粉产品的营养成分表中以每10g为单位,如蛋白质一项标示为:每10g(约一勺)的蛋白质含量为7g,营养素参考值为12%.请问 弹弓图纸长度单位是什么只标了数字,单位没有 书本上产生的氢氧化铁为什么不用打沉淀符号? 人体内的肠子有多长呢? 在封建社会中,影响中国小农经济稳定发展的因素有哪些 营养素参考值为什么经常看到有超过100%的?如题,这个现象经常在食品包装上看到,这是为什么呢? 人体内的物质代谢和能量代谢主要发生在(消化道内,细胞内,血管内,内环境) 用奇特造句(写出奇特在哪里) 火炕烧柴火好烧 烧煤就不爱着是怎么回事?和炉必子低有关系吗、. 一千元的红木柴火一位专做老红木家具生意的古董商,无意中在僻静的穷山村里,发现了一个非常珍贵的老式红木旧柜子,惊喜过后,古董商开始动了心思.他先是与柜子的主人闲扯聊天,好不容易 历史上亚洲的许多国家都是小农经济,为什么唯独中国的封建社会持续的这么长? 煤可以制造成( )、( )、( )、(煤可以制造成( )、( )、( )、( ) 公路飞机跑道是什么?谁能给个较权威的定义? “你认为小农经济为何在封建社会末期会阻碍资本主义生产关系的发展”还有小农经济的特点 蛋白质灼烧会产生什么现象 飞机场跑道和航道有什么区别? 葡萄糖经过肾小球时,是一部分被过滤还是所有被过滤? 酒精喷灯长时间灼烧可以使玻璃软化到什么程度? 为什么肾会出现痛疼呢? 肾小球的滤过作用会拦截住大分子葡萄糖么?RT 肾小球的滤过作用会拦截住大分子葡萄糖么? 透过钴玻璃片 高温灼烧的加成什么颜色是“钾” 比较硬的树并且能用来做柴火的 做建筑玻璃贴膜前景如何?小弟关注玻璃贴膜很久了,一直想去从事,不知前景如何,请各位前辈赐教! 孤独造句 父母家里不烧煤,烧柴火和木头,想知道烧这些会产生一氧化碳吗?会也像烧煤一样煤烟中毒吗? 森林里开动物大会,哪一只动物没有来? 寂寞怎么造句? 1.呼出气与肺泡气的不同说明了什么?呼出气 肺泡气 氧气 16% 14.2% 二氧化碳 4% 5.3% 氮气 74% 74.5% 水蒸气 6% 6% 2.得了急性支气管炎的患者若不及时治疗,为什么容易引发肺炎? 为什么动物会有尾巴 谁能用寂寞造句 问的不是问问,是寂寞 . 在生火时,小明用木棍小心将柴火架空.这样做的目的是什么 某用电器功率过大导致断电是否会损害其他连接在相同插线板上的用电器?今天我把一个功率很大的烧水锅插在了插销板上,结果因为功率过大导致断电.事后突然想到那个插线板上还连着许多 寂寞造句寂寞造句寂寞造句寂寞造句 为什么“CO2分压由高到低的顺序通常是组织细胞.静脉血,肺泡气,呼出气” 希望能解释的清楚一些……谢谢 男人什么环境下肾上腺素会升高 连接在插线板上用电器总功率不能超过插线板最大负荷对么? 飞机在起飞前飞行员都带什么东西?可以带什么东西?最好汉语和英语都有, 怎么会肾上腺素飙升 在多个插线板顺线后导致用电器不能稳定工作 事关生命...内详本人住校学生 人在湖南 养了两只乌龟 因宿舍晚上熄灯 为了保证小幼龟正常过冬 便私自将走廊上夜晚长明灯的电 接到了宿舍里 寂寥造句 肾上腺素过多会产生什么现象? 因为人死了而写的悲伤句子 浪漫庄园柴火有什么用柴火有什么用啊?有什么任务需要他吗? 用非常造句 对死的看法和悲伤原因的诗句我有急用 浪漫庄园哪里有煤矿(不是煤也不是煤屑,请注意),要什么工具我不是练挖矿的,顶多加1点 如果我实在挖不到,介绍一下哪里有卖 谁知道恒星的构造和位置? 生物习题. 帮帮我带有做比较 举例子 打比方 假设 下定义 分类别的句子各2个谢谢 恒星结构是怎样的啊? 每日一题(495):血液透析用水与饮用水有什么区别? 跑400米在300米跑道和400米跑道有区别? 有关天文恒星组成结构我最近看了星际传奇,对电影里的三个太阳组成的结构很好奇,可是不知道它是怎么构成的,还能日食,我想了很久都想不出个所以然,求大家帮我分析分析, 什么动物耳朵长在脑背后 求证∠BPC=1/2∠A+90° 温州办公用房改革搁浅 官方表示执行起2013全球EMBA百强排行榜 清华两大报业集团合并 上海报业集团今天挂官员谈上海自贸区制度创新 政府职能转江苏省长李学勇:划定生态红线 建立补开封官方回应批准庄园打深水井事件称:江苏通报今秋秸秆焚烧“第一把火”处理公园免费后质量下降 南京市民质问财政南京出现“烂尾工程”现象 财政部门称南京财政局谈政府采购“挑贵的买”:综南京中小河治理工程将收官:14条河流苏州小朋友上演变装T台秀迎接万圣节马来西亚副首相为选举造势 出席者可获日本内阁官房副长官力挺《特定秘密保护数据显示中国赴美名校留学生每4人就有韩称中韩2014年起联手管制黄海非法法国数百活动人员斗牛场前集结 抗议斗韩国“科学技术卫星3”号抵达俄罗斯 500万叙利亚人在国内成难民 冲突严新警方樟宜机场缴7.1公斤冰毒 一外阿富汗总统选举唯一女候选人被取消竞选甜瓜失绝杀尼克斯负国王 巴尼亚尼救主守护动植物王国 检验检疫打造“云岭空新华宜居调查之亦庄:区域价值被充分挖《诗歌之王》周六开播 周晓鸥唱新版《黄晓明杜淳领衔红蓝对抗 \"全员\"Senado de México e浙江温州发送“跑官”短信官员被免职并中国退休准备报告发布 三分之二以上居苏宁双12爆款清单泄露 一款电视竟比中美文保合作结硕果 美移交23件中国重庆公布24则违法食药医械广告牡绥铁路爱河至穆棱站率先通车 时间由湖南小伙跳楼逃出传销窝 手挥菜刀自残湖北荆门:偷衣贼被指认时正在偷车被抓郑州销售购买“低慢小”飞行器将一律实新华宜居调查之亦庄:区域价值被充分挖云南鲁甸地震灾区:搬进新家温暖过冬全城反扒总动员 荆门巡警在行动200斤胖妹妹超美写真《芈月传》不得不看的细节,看芈月如何電眼女神,意外成為淚溝的俘虜!
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘