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

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

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

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

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

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

英语对于软件开发者来说到底有多重要? SDCC 2013中国软件开发者大会成功落幕 新浪微博宋琦:PHP在微博优化中的“大显身手” 8月份浏览器份额:IE浏览器PC端出现反弹 移动端跌出前五 如何让Ruby项目速度提升10倍 跨平台进行到底:Facebook发布Unity SDK 云薪资管理初创公司ZenPayroll:年处理薪资超1亿美元,获多位知名CEO力挺 Twitter开源Summingbird:近原生编码下整合批处理与流处理 亚马逊推Matchbook 欲将顽固纸质书读者拉向电子书 Broadcom为可穿戴设备推新开发平台WICED 再战江湖 New Kodak还牛不牛? 郭理靖:公、私有云架构异同点与难点 美化代码的15个代码语法高亮工具 你所不知道的虚拟化和云计算 [开源推荐]Effeckt.css项目:CSS交互动画应用集锦 针对Google Glass应用的四大UX设计原则及典型应用 Google收了摩托罗拉,微软收了诺记,黑莓又将花落谁家? 十亿月PV网站秘诀:Reddit自失败中总结的25条经验 粉碎5个NoSQL流言:各司其职,NoSQL的出现比关系型更早 豌豆荚发力移动游戏平台,推出SDK 2.0 BlackBerry Jam Asia 2013即将在香港隆重召开,免费门票限量提供 小米发布会高潮迭起:米3、电视、Hugo大牛 谷歌放在Windows上的特洛伊木马:Chrome Apps应用平台 解析:Google基于数据驱动的招聘面试程序 决战“缓存”之巅:微软 vs. 亚马逊 雪中送炭:十大前沿移动应用开发工具 高通智能手表Toq都用到了哪些技术? 研发周报:修改一行SQL代码 性能提升了100倍 2013年NoSQL就业趋势分析 鲜为人知的静态、命令式编程语言——Nimrod 高性能Web应用打造攻略:扩展过程中20个最大的绊脚石 WEB页怎样实现子父窗口? [总版主的立法和执法]:4、被网友投诉的处理不当的删帖、删回复三次或封杀一次,但制度中没有依据的 重分求解技术难题的解决方案 如何从代码中控制报表分页 高分请求一个怪问题, 关于C#中调用API 小弟写的一个动态生成JTree的例子, 大家帮忙看看. JDK环境变量的设置,实在难懂!!!搞定立刻给分!!在线等待 请问:用C#中的“System.Web.HttpUtility.UrlEncode(string)”编码后的字符串,在JScript用什么函数能对其进行解码?(在线) 一个权限的问题!!!急!!! 这个CG提示如何解决? 邮件群发软件哪个最好? 热键然后更改 换工作了,散分!!! 大家来看看[CSDN总版主的立法和执法],就会知道为什么水园的执法者如此猖狂了 请用这则给下面这个替换字符 局域网2000系统如何设置计算机描述(50分)? 强答题:请听好题"请问如何在可编辑的列表框中显示你想输入的字符串,而且可以输入多行?",开始! 下面两个操作,哪种效率高一些?或者还有什么更好的方法,谢谢! 简单问题,马上结账 ^在Delphi中是什么操作符? 各们兄台,小弟有急事相求,在线等~~~~~~~~~~~~~~~~~ 关于新闻发布时内容显示的问题 请教Tab Control的使用 microsoft jdbc for sqlserver2000 result 如何将指针移到首位!!在线等急!!! 谁有CVS下载?我去官方网站的下载,根本没有安装文件。 JSP中新建文件夹的问题 关于地图的问题,谁能解决啊? 怎样获取点击或按下winform上 [×]按钮时的事件 在服务器端执行一个 在客户端弹出对话框的程序? 如何不让局域网上的其他机用二级代理上网. oracle 表空间问题 哪位老大知道DBF的格式。 新手想请问关于刚学图象处理先学哪些?即先从哪入手? 请问关于函数挂接的问题 学习中的、已经学好的、准备学习java的朋友来看看 如何在一个线程里创建一个窗体? 难题,,,,(马上结) 怎样使windows service能接受其他程序的调用? ADO+ACCESS问题 十万火急!怎样在ASP.net(C#)中调用OCX对象 如何填充一个封闭的区域 吉林延边发生多起朝鲜警备队员越境抢劫杀人案件 perl有比较好的ide吗????? FilenameFilter用声明吗?? 怎样将两张表中相关数据绑定到DropDownList 请问java 中如何实现大小写不敏感的字符串替换???谢谢 超级头痛:如何找到DataList里的RadioButton? 权限设定时奇怪问题? 200分相送,如何写一个divx的编码过滤器 求一 SQL 语句的写法 高手来看!!!!如何在BCB程序中打开Oracle数据库 Mbps与MSKS的区别? 与心有余而力不足,心有灵犀一点通,不经一事不长一智意思相进的成语 文言文 与心有灵犀一点通,不经一事不长一智,心有余而力不足是近义词关系的有哪些? 兰泽是什么意思 为什么粮食安全如此重要 一个有深意的班名比如:兰泽(有学问一点)最好有解释和口号 兰泽是谁? 紧急 用马尔萨斯的人口论阐述粮食的安全的重要性 水稻在粮食安全中有什么地位和作用 能不能分别讲解下什么样的情况下才需要用54\150\300这三种Mbps速率的无线路由器? 德国驳斥美财政部批评 称德经济不存在伊朗推出首艘观光潜艇 完全由伊朗专家德国老人中奖1300万欧元 自称通过日本色情业历史(图)外媒:中国要美解释对华监听行为美媒:非洲或取代中国成为下一个世界工美媒:中国海军借反海盗行动获远洋经验美国毒贩修隧道铺轻轨快速运毒 通往墨湖南岳阳三姐弟上学途中遭绑架杀害 嫌苏格兰女法医揭秘连环凶杀案 数十桩悬16岁少年蜗居桥下一个月 以废弃席梦“三八”节女士免票,约吧?延迟退休要优先考虑弹性退休制湖北:督察无死角改革不打折(改革追踪全国耕地确权面积四点七亿亩将出台保护司法人员依法履行职责规定依法严厉打击报复伤害政法干警违法犯罪荆紫仙山桃花节周末亮相岂能“述”而不“作”(党员论坛)守护好“大数据”的时代价值(一线视角深化改革,助力转型攻坚战(人民观点)图片报道战皇欲艳传汉代宫廷艳史射雕之全真第八子我的一些诗词文章娇艳都市谁先爱上谁魂缘二品官我见犹怜今生不做鬼衣衣不舍只让我知道西溪3D奇幻艺术馆旅游灵隐寺旅游飞来峰旅游三潭印月旅游净慈寺旅游虎跑梦泉旅游六和塔旅游花港观鱼旅游于谦墓旅游盖叫天墓旅游茅家埠旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘