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

专访阿里前端工程师:淘宝移动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:请谈谈淘宝移动端业务未来几年的规划。

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

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

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

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

智能手机应用挑战Web平台,看W3C如何反击? 电信级数据流量与监控系统部署案例分享 TCL联手Mozilla,HTML5智能电视真的要来了! 先睹为快:Unity亚洲开发者大会虚拟游览展示 OSTC&#183;2014 演讲日程出炉,Perl创始人来了! Unity将收购Applifier,并引入Everyplay和GameAds两大平台 《近匠》从Cubieboard到radxa:汤亮的第二次硬件创业 九头蛇与大象之争,Hydra或将取代Hadoop 喜讯:中国安全团队Keen成功在Pwn2Own 2014黑客大赛上攻破64位Mac上的Safari OCP黑客马拉松冠军:24小时头脑风暴背后 新时代应用程序设计及MongoDB的十个深入理解 借助“开源”东风 英特尔打造卓越“软实力” 深圳综合交通设计研究院张鹍鹏:智能交通设备领域已成红海 信息化是发展趋势 25个可遇不可求的jQuery插件 Web设计中对视差设计的误区 直接拿来用,九个超实用的PHP代码片段(二) 一周消息树:小米染指平板电脑凶多吉少 移动周报:Xcode 5.1更新、CarPlay揭秘,Apple很忙 可穿戴领域,创业公司的掘金点?还是滑铁卢? 搜狐SendCloud2014运维技术沙龙拉开帷幕 一周热点:选择Go语言的12个理由,九头蛇与大象之争 中国云计算大会PPT集萃(二):十位技术大牛分享平台打造技术 延迟250毫秒损失数百万美元,Hadoop系统该如何应对实时任务 IBM成立展示中心扩展大型主机的Linux开放生态系统 SDN解决方案总结:OpenFlow、虚拟机、OpenStack和VXLAN/NVGRE 第六届中国云计算大会将于5月20-23日在京隆重召开 大数据实战:站在JMP分析平台上的FIT足迹识别技术 首届SAP d-code大会在上海举办 【OSTC讲师专访】ZoomQuiet:因商业化而开源是中国开源界最大的囧处 亿元资金扶持+联手100家VC,腾讯的雄心壮志 美国史上最大IPO 能给阿里巴巴带来什么? ActiveX问题,微软专家请进.<------------- 急 请问如何用VB在win2000下实现关机重启注销的操作 如何的XP下配置小网吧,请给出详细说明,,十分感谢!!! 关于malloc的问题!! 关于Sql Server的链接服务器功能(一定给分) 我想实现自动添加 抄送 和 主题 !!!!!!!! Applet指定codebase,怎样将其指定到classpath下?不用绝对路径! 在一个FORM中如何访问另一个FORM中的控件? sql2000+sql sp2的问题? tomcat问题 我想把两个很大的文件结合成一个文件,怎样做最快? 下载的问题??急~~ 在JSP中怎么实现折行?? 哪里可查到WINDOWS系统的全部消息和Delphi封装好的消息???当然要有解释 MDB最多能有多少条记录,文件最大能多大 “Rule for project "Project 1.exe" is not specified",是咋回事? 急问用table1.batchMove(Asource:TBDEDateSet;AMode:TBatchMode):longint移动数据时提示destination must be indexed.table.我建索引后还 VB 6.0 sp4出来了! 新增了许多有趣的控件,快去www.microsoft.com去看一直吧! 关于COM、MTS\COM+的客户端访问服务器端总是被拒绝的问题? 高手请进。。。。 求助各位高手,一个关于DLL的问题!(急!!!) java的多媒体问题! 请问哪里有crystal report 8.0下载 有几个使用VC++的问题请教 请教一两个问题: 关于虚父类、虚表的问题。 **RADIO BUTTON的问题** win2k下的oracle816的安装问题,紧急阿 如何通过INTERNET 远程联接ORACLE服务器,SERVER端IP地址是固定(ADSL),客户端是通过电话线上网的。 Delphi的编程环境 救命:如何读取像http://www.csdn.net/demo/demo.txt这样的文件存放到本地? vb调用vc编的activex 在DELPHI中怎样COPY一个文件夹? VB的界而的确容易制作,但似乎过于简单 如何在ATL环境下动态地开辟一个字符串型的缓存区 一句sql 关于中国软件业问题的一些看法 用xml做数据库是不是不安全 关于setwindowlong的问题!!! 关于WINSOCK 通信的问题 Query Analyzer怎么刪不了多筆記錄﹖ getchar ()的问题 ◆→访问csdn会让我“死机”! 纯技术咨询,请大家踊跃发言 一个串口通讯的问题。 一个庞大的计算计划,求解素数的间隔的 那句效率高点? 有没有sql server+asp开发的朋友,怎样把sql server数据库上传到服务器上,分绍有分! 如何注册使用控件,急!!! CView类中如何实现浮动的提示信息? 怎样给对话框创建一个视1? 作文开头和结尾,细节描写片段各20个.最好不要太长也不要太短。 论文提纲的格式怎么写 关于溺爱的漫画作文急.内容是四位家长扶着一小孩骑自行车,自己却满头大汗.故事略写,感叹,体会是重点,明天要交 楼梯是斜面吗?请帮忙 某学校有一块正方形草地,因实际需要,现对草地进行改造,改造后正方形草地的面积扩大为原来的9倍,若原来草地的边长为17m,则改造后草地的边长为多少? 作文关于溺爱 上海市第二十四届大同杯初中物理竞赛复赛名单快 优秀作文和赏析作文不要太长,1000左右,赏析600~800要高品质,哥哥姐姐弟弟妹妹叔叔阿姨奶奶爷爷们一共凑出至少8篇优秀作文及赏析.不是作文也行,反正就是文章,优秀文章,最好是记叙文, 阁楼楼梯正冲大门我家的进户大门正对着上阁楼的楼梯,上网查了一下说楼梯冲大门不好.不知道指的是不是阁楼的楼梯.本来买了一面八卦凸镜想挂在屋里的门框上,正冲楼梯来化解一下,结果 作文:成长的滋味.记叙文.(提纲就行了,大概)要有“甜”和“苦”这两种事,先苦后甜.要有“甜”和“苦”这两种事,先苦后甜,不要酸辣这两种! 题目是《春天,门前的那棵树》我要题材……到底要写什么啊 进户大门正对着上阁楼的楼梯,如何破解楼梯冲大门的风水问题一楼户型图 ___________________________________ | | | |_______ | 主卧 成长的滋味 作文 要带提纲,急.提纲 提纲 提纲 提纲 作文加提纲 某楼梯斜边AB的长为10m高bc为6m若在台阶上铺地毯则地毯总长为?为什么要AC+BC? 阁楼的楼梯与入户门在一个方向及镜子问题我家的房子是带阁楼的,阁楼的楼梯与入户门在一个方向,但是不是正对着,楼梯口与入户门是错开的.还有,我想在门口主一个穿衣镜,放在哪好一些. 关于楼梯斜面的论文我们班要写楼梯斜面的论文,600字以上就行了,急! 作文提纲格式结构清楚一点 同学们正在热火朝天的打扫教室怎样修改病句 以《别了,校园的小树》为题写一篇作文 求作文提纲的格式,可以帮我套进去一篇作文吗?最好是叙事的,叙议结合的. 装修阁楼旋转楼梯问题阁楼入口是1.2m*1.2m,楼层高度是2.5m,旋转楼梯占地面积是多少平方时,下面才可以最大放多大的电冰箱?阁楼口是否要改大?至少改多少? 小树哭了是不是文明作文 入射光线与平面镜的夹角为15度,则平面镜使光的传播方向改变了 ( ) A 15度 B 30度 C 60度 D120度 每天清晨,同学们都要把教室打扫清洁,才开始一天的学习 修改病句 小树迎着风沙成长起来,也就是什么 作文 我和小树求一篇小学作文按照提示把作文补充完整 我和小树一天上学途中,一棵小树被大风吹倒在路旁.我找来绑带和木棍,把小树绑好扶正.一个星期过去了,(往下写)一个月过去了,( 修改病句:同学们把教室打扫得干干净净,迎接五月4日的青年节. 优秀作文开头结尾(三篇) 格式如下:开头:结尾: 一个长方形菜地,长和宽比是7:3,如果长减12米,宽增16米,就变成正方形,这块菜地的面积是多少 作文的写作提纲的格式大致是什么样子的啊!急用,多多益善,, 小树有什么特点 我想找人教版数学五年级上册全册有教学反思的教案? 汪老师要装修自己带阁楼的新居,在建造客厅的楼梯AC时汪老师要装修自己带阁楼的新居(图10为新居剖面图),在建造客厅到阁楼的楼梯AC时,为避免上楼时墙角F碰头,设计墙角F到楼梯的竖直距 作文提纲的格式是怎样的?作文题目是要写在提纲上面还是下面? 三个班级分一堆书,甲班比已班多三本,乙班比丙班多三本,三个班的书的数量相乘等于13608,问每个班多少书?21、24、27, 《妈妈唠叨》作文提纲和范文作文的提纲和范文,范文不超过500字,我算,超过了88,要好,不能离题,不然88. 急求论文大纲格式中国旅游购物现状及问题研究一、 中国旅游购物问题现状二、 为什么出现购物陷阱和强迫购物(一) 老百姓盲目选择旅游产品(二) 导游、司机没有稳定收入(三) 同 我想下载人教版5年级数学上册的说课教案 欣赏他人 文章开头我要急! 我与小树的作文 求八下快乐暑假答案,只要物理 男人的男字,上面为什么是田字,下面为什么是力字 要求具体 有范例为佳必须要具体 例如写人 开始怎么写 中间怎么写 结尾怎么写各类题材都要 总之具体 全面 要求有大量的提纲内容 我拿给给别人 让别人按照大家给的提纲写作文所以提纲得 我的小树 作文 少年智力开发报数学专页快乐暑假八下答案E家人帮帮忙 (人教版) 如果要把计算机学到很牛要掌握那些数学知识 优秀作文 好的开头,结尾,散文好的开头,结尾,散文,随笔.好的就行 求八下《快乐过暑假》答案这是其中一张答案.我要更清楚和全部的答案.当然不清楚看不清不给分 作文开头和结尾,细节描写片段各十个. 优秀作文加评点10篇, 语文每课一练六年级上册单元8的第七题 仿照列句,请你介绍一位你说熟悉的名人名家 优秀作文的开头、结尾、细节描写 某学校有一块正方形草地,因实际需要,现对草地进行改造,改造后正方形草地的面积扩大为原来的9倍,若原来草地的边长为17M,则改造后草地的边长为多少米? 修改病句:不到半个小时左右,教室就被我打扫干净了.给下面句子加上不同的标点,使其表达的意思不一样.1.我 批 评 他 也 批 评 你 怎 么 样 2.我 批 评 他 也 批 评 你 怎 么 样 《“精彩极了” 有没有关于抗震救灾的细节描写,作文片段一定要细节,小处... 不要高谈阔论 描写就好 有感想更好最好是有 关于手的描写...在线等 某学校有一块正方形草地,因实际需要,现对草地进行改造,改造后正方形草坪的面积扩大为原来的九倍,若原来的草地边长为17m,则改造后草地的边长是多少 第二组同学们把教室打扫得干干净净,一点土也没有.这个病句怎么修改啊? 楼梯是斜面吗是或者不是,说明理由 学校有一边长为a的正方形草坪,现将其各边增加2b+a,扩大草地面积,有的同学说:“扩建后比扩建前面积增大”学校有一边长为a的正方形草坪,现将其各边增加2b+a,扩大草地面积,有的同学说:“ 楼梯 实木楼梯 钢木楼梯 复式楼梯 阁楼楼梯楼梯什么的好啊?想安装楼梯,但不知道做什么样的,有木有人给个建议呢
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘