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

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

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

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

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

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

CES2013 AMD发布移动处理器路线图和环绕计算概念 对话Linus Torvalds:大多黑客甚至连指针都未理解 PaaS玩家们,怎么演好自己的角色? Apple高管表态:低端机绝不是iPhone的未来 Web开发人员应该知道的IE 10兼容性问题 一周消息树:CES2013揭幕 科技巨头纷纷发力 2012专利排行榜 IBM位列第一、Google增长最快! 微软赞黑客并称Windows RT越狱非安全漏洞所致 周报第46期:GitHub历史上最糟糕宕机事故回放及反省 著名计算机黑客Aaron Swartz自杀身亡 移动周报:移动互联网行业技术趋势前瞻 旁门左道:让移动游戏下载量暴涨的邪门功夫 可植入身体:“可穿戴计算”时代来临 Web服务器份额:Apache仍居首,Nginx将超IIS 防税务欺诈:挪威财政部将开源收银机代码 响应式设计实战:3人+1.5个月 IE10优化版cnBeta诞生记 不听乔布斯劝告:“不专心”的Google照样干得好 躲过一劫!苹果不锁杂志类APP介绍截图 Oracle发布软件更新修复Java漏洞 设计师将吞噬工程师吗? 开源产品系列:小巧灵活的Web框架web.py Windows Server 2012 VHDX格式揭秘 Rovio将赶超Zynga 成为全球最受欢迎游戏公司 Netflix基于AWS的大数据平台Hadoop架构解析 微软开始提供Windows Embedded测试版系统 Aaron Swartz自杀原因存疑 引发互联网连锁反应 重金吸引开发者 BlackBerry10应用36小时增1.5万 把数据中心搬入“空间站” Dell和Intel对OpenStack新兴公司Mirantis投资 快讯:马云自5月10日起不再担任CEO职务 Web工程师必备的43款可视化工具 怎么编译pro*c? (unix下)———在线等!!!! 今天升到5个裤衩,高兴,散分 有谁知道《斯托克代尔悖论》的内容? 使用VB6.0编程设置IIS5.0服务器 谁有InstallShield,包括汉化界面,中文语言包和注册码,200分回报 freedorm格式数据窗口打印问题,字太长如何自动换行, 一个头痛问题。 做过政府审计软件的请帮帮忙,怎么从十来套不同表结构的数据库导数据到一个固定表结构的数据库呢? 如何让菜单可用或不可用?急啊~~ Lotus中的js问题 哪有Oracle中文最新版下载呀, 请问各地delphi认证培训的费用是多少? re:下雨了 怎么样加提示框 借一个问题!XP里面网卡怎么工作不正常 请问有什么办法破VBA的密码 CEdit 背景色的问题 100 分 请问vb中浏览器控件是在哪个文件中,另外我想在vb程序中加入介绍性网页,应该怎么办! 了解jpeg的请进 高分急求数据库解决方案! 请问vb中浏览器控件是在哪个文件中,另外我想在vb程序中加入介绍性网页,应该怎么办! 存储类 在MainFrame里怎么得到一个指向MyDoc类的指针? 上海的弟兄前来领分!!!! 能ping通代理服务器,但不能上网(ftp等都不能用)。有那些原因! 谁有api做的串口通讯例子 很简单的Temporary used 问题,就是搞不清,请哪位详细点拨一下,铭谢 DataGrid中使用HyerLinkColumn,请怎样动态传递多个参数或改变DataNavigateUrlFormatString的值(在线等待答复) 在winsock1.1下怎样监听网络事件。(请给个API 的 sample ) 高分急求数据库解决方案! 高分求助软件稳定性问题! 高分请教exej4的问题!~ 我的代码可以被编译吗? 十万火急(在线等)关于发邮件问题!多谢了(最后50分了) 感谢各位的鼎力支持!!! 急:如何让sqlload使用命令行方式,把数据库中的指定几个表导出?(在线) 单元全局变量与工程全局变量有什么区别 问一个关于JSP和XML结合的问题. 请问怎样用ASP连接Mysql数据库,急! 有没有j2ee的qq群??? win2k里的smtp服务器,怎么是需要身份验证的? 怎样让智能ABC记住输入的词组呢? 你在delphi中,用到了多少面向对象的知识? Dragover事件什么情况下触发 北京还是深圳 如何实现两个类互相访问--急! <Code Complete>怎么翻译好呢? 急!!!!!在dcom中向数据源添加数据报错,为什么? 有哪些方法可以在ASP.NET设计文件.aspx(html格式WEB)与脚本文件.aspx.cs(.aspx.vb)中传递数,或者说传递变量的值!!! 我用CDONTS.NewMail发邮件,怎么判断邮件发送成功或者是不成功呢? asp.net的客户端键盘的事件处理的有关问题? 西周在治理国家有什么创新 已知一次函数y1=x+m与反比例函数y2=m-1/x(m≠-1)的图像在第一象限内的交点为P(x0,3)(1)求 x0,m 的值;(2)在同一坐标系中画出两函数的图像,并结合图像求出满足y1大于y2的取值范围. 头脑风暴真的可以解决所有问题?如题 C l fête des a h,Je t’aime 求意思?貌似是法语!他说前一句有潜伏在内 The students go to the Greats Wall by car.【对划线部分提问】划线部分是by car 下面几个头脑风暴问题,1现在有什么功能手机是没有的但是人们又需要?2不给你钱你怎么过一天?3你穿越到了古代,地点是监狱,该监狱的犯人一刻钟以后要斩头,你会怎么办? 这句法语事什么意思啊j'ai des envies de是什么意思啊 j'ai des envies de 这两个微分方程的特解都一样吗?说明下理由 olt 的发光功率我这测得OLT光功率最高才3点多个DB,距离+5还有点差距,请问怎么提高,是更换光模块么?我最近看了点资料 说是PON模块分型号的 有10KM的 发光功率在2-3DB,20KM的 发光功率在5-7DB,我想 工人阶级是我国领导阶级的原因是多选A中国共产党的工人阶级先锋队性质决定了工人阶级的领导地位B中国工人阶级是中国先进生产力和现金生产关系的代表C必须保障工人阶级的合法利益D工 地球以前的美 揶揄的汉语拼音是什么啊 神经兴奋如何产生?与钠或钾离子移动关系。 地球的美在何处? 中兴 OLT c300 发光功率? 神经组织能产生刺激吗? 已知一次函数y=x+m与反比例函数y=m+1/x(m≠-1)的图象在第一象限内的交点为P(Xo,3)(1)求p点的作标 谁了解comme des garcons 这个牌子?如题~请达人介绍下此品牌,去香港买是否便宜? il est tard, on a encore des gens a voir avant l'heure du dejeuner.这句话直译是什么意思?on和a是什么意思? 地球的美与破坏 comme des garcons 这个牌子怎么读?好像是法文,还有marc jacbos这个品牌~ Quartier des fleurs, à Face résiduelle rire, rire les gens du commun . 谁会这句话的意思? 地球美不美 哪种天气细菌不容易繁殖 各秋万代是什么意思? 永恒是什么意思?时间就定格在这一秒、“假如时间是永恒的,那么这一秒是最终的结束”“可是,下一秒呢?”打了双引号的一句话是全连起来的、是什么意思?求解 净水机处理过的污水能够饮用吗?有些好奇 Forever是永远的意思吗? 永恒的意义其实是一个宗教问题,我只是在网上粗略看了一些宗教的介绍,基本都有一个核心内容,就是 信者得救 ,好像都提倡信者死后可永恒,但不信者,有得下地狱,有的要轮回之类,可是在另外 地球为什麽是圆的 公有制经济和非公有制经济在我国国民经济中发挥着怎样的作用 永远和永恒的意思是一样的么? 为什麽地球是圆的? 龙眼干怎么晒 头脑风暴,少年智力开发报里的一道题有AB两辆汽车同时从甲乙两站相对而行,两车第一次在距离甲站40千米处相遇,相遇后两车保持原速继续行进,各自到达乙甲两站后沿着原路返回,第二次在距 为什麽地球是个圆的 已知一次函数y=x+m与反比例函数y=m+1/x(m≠-1)的图象在第一象限内的交点为P(Xo,3)(1)求Xo的值(2)求一次函数和反比例函数的解析式麻烦解答下. 来几个头脑风暴的问题 月亮是地球的什麽? 晒龙眼干怎么晒 两情相悦才是长久时是什么意思?感情是可以培养的? 第一财经的头脑风暴,为什么换主持人了?袁岳不是北京人么? 晒龙眼干的步骤,是晒,不是烘焙!晒龙眼干要不要剥壳晒? comme des fuckdown 简述什么是头脑风暴,头脑风暴如何训练?我从《教育心里学》这本书中看到的,但他没有对这一词做任何解释,请您帮助我好吗? 龙眼干可以晒好吗,有什么步骤呢 于某留做万年镜,为官当学万青山是什么意思 有所为,有人说该词语除了正确的意思之外还有一种容易让人误解的意思,在下不知道是什么. 请帮我回答谁sb 头脑风暴数学题在400米的跑道上举行400米跑比赛,跑道每道宽1.25米,相邻的两圈外一圈起跑线要比内一圈起跑线前移多少米? We are_____international school for children of 5-12.(a) 法、英等国袭击利比亚卡扎菲军队,如果俄罗斯帮助卡扎菲反攻,会引发第三次世界大战吗? 食盐的酸碱度? ‘有所为,有所不为. 新鲜龙眼怎么做龙眼干 Homme Comme des Dansens*是什么牌子? 地球还要生存多久?拜托各位大神 龙眼是怎样制造成龙眼干 结合具体问题说明头脑风暴 在资源被过度消耗的情况下,地球上的城市生存的方向有哪些? 温州:民资发起设立民营银行试点方案已冷空气今起渗透影响 明后天早晨稍微有国考报名人数预计破130万 仍有20俄防长:叙利亚例子表明恐怖分子获得化女子当街跳舞一丝不挂 众人围观无人给温州将军大酒店门口10个窨井盖突然炸杭州文一路超市门口 年轻流浪姑娘产下为养老保障拾遗补缺 多元化养老日渐“马英九宣示向黑心厂商全面开战:统统揪火车退票费四舍五入 今后将精确至0.政府年终突击花钱遭质疑 专家称与预算今年年底 杭州-深圳每天开行6对动车圆通就快递单个人信息被卖致歉 网民不杭州市区全面启动机动车“油改气”工程新旅游法实施将满月 导游不管购物反遭俄媒议论“中国反腐经验” 称中国采取阿富汗16名总统候选人被取消资格 1辛格访华获“不寻常待遇” 两国握手世19岁女孩把自己包装成富家女 梦想嫁财政部将续发行280亿元记账式附息国杭州地铁4号线开通后1号线票价将下降薪火相传晚报情下一篇深圳将建全省首个弃婴岛准备要笑了!民间借贷合法化破冰日华媒:日本天皇夫妇为何死不同穴下一篇下一篇随机应变连号热出曼谷十万人集会反英拉宏远六连胜匹马领先省实学生“创客”摘金奖400双小手“捏”出新广州前10个月全省4744人因事故亡多重阻力引变数12人食盒饭被“毒”倒成绩差的冈田执法车也套牌下一篇102.91亿!粤体彩销量连续6年创
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘