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

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

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

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

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

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

开源世界应该致谢的五家公司 Square、LinkedIn、Google... 高薪利器:四大热门云计算认证推荐 陌生的编程任务,该拿你怎么办? 辟谣:网传Flappy Bird开发者已经自杀 Apple可穿戴倾向健康类,又一个即将被颠覆的行业 传诺基亚月底推Android手机 去除一切谷歌服务 响应式网站与原生移动应用,哪个更适合你的企业? HBuilder:最快的Web开发IDE 成功开发系统集成项目的六大建议 OS X平台上出现窃取比特币的木马 《近匠》第11期:Arrownock——移动社交构建师 面向企业:Google发布iOS版Google Admin应用 Github推出Education平台 师生免费享有微账号 平板的市场依然巨大:应用更丰富,Phablet设备存局限 免费的PCB数据3D转换工具 OBD++ XVL Converter Hadoop Namenode以regular方式启动代码流程分析 走进支撑过8亿用户的Yahoo!数据中心 Napier,一个引领Rackspace14年老兵功成身退 Twitter最新测试版被指仿Facebook的界面设计 成功求职者的自述:如何向应聘企业展示自身价值? 仅用移动开发服务:一分钱不花,开发native应用 苹果员工爆辞职内幕 Windows Phone 8.1被曝光信息汇总 Phaser:开源的HTML5 2D游戏开发框架 HTML5调查:做的好,收入不比iOS差 汽车巨人福特让“数据”说话 基调数据解读2014网购行业的3大变化 测测:用百度Clouda占卜移动互联网 微软的无奈:或允许Android应用运行于Windows平台 如何选择适合自己的编程语言 Google Now新增语音命令:生活简单一点,让爱更近一点 在asp调用access数据库时出现错误( 在线等待) InstallShield Developer 7.0 East Language Pack 的问题!!! *****寻求好的Global.asa(在线等待)******* 大家快过来看看这个小程序!送分!来者有分! 学完操作系统的,将来能作什么工作呢? Insert一幅图片到Oracle数据库及从数据库中取出这幅图片的方法及代码(1) 如何将文本框设置成只读的,帮帮忙了!在线等待! MSXML如何使用,能否给一个较详细的例子 一阵风 屏蔽控件某个事件 使用MicroSoft DTSPackage Object Library开发的问题 逃离爱情 [原创] 如何动态使用web service 自动递增的字段数据类型,是否应该设置成number? 寻电子商务领域合作-购买源码或合作开发 讨论:如何用WinSock API 的异步选择模型(WSAAsyncSelect模型)构建一个多连接的服务器? 如何删除一个服务,如:OracleOraHome81TNSListeneroral;谢谢!!! 请问各位软件是如何控制硬件的? 如何判断输入的字符串长度? 能否以命令方式启动win2000 请问如何判断字符串中的字符在a~z之间 如何在jsp调用windows下的程序执行.就是IE当shell.(有点像黑客:) 不是用来干坏事 高手呀,能告诉我怎么把OLE drag&drop过程中的图元格式改成增强图元格式? 哪位有http下载的源程序(或下载地址),C++的。。。 哪位大侠有制作均衡器的资料和代码,是否有相关控件?在线急等,先谢谢了 dbgrid焦点问题。 如何识别客户端浏览器是不是腾讯浏览器? 怎么样得到上个月最后一天的天数 关于图片显示的问题? 一个应该很简单的问题!散分了! sybase12安装后sybase server启动不起来,服务启动没有问题 请问oracle JDBC 中classes12.jar、classes12_g.jar、classes12dms.jar这三者有什么区别? ( 召唤HTML编辑控件(ActiveX) 为什么没有遍历所有文件和目录?哪位可以帮忙调试一下。 请问如何再java里面执行oracle数据库指令如;exp,imp等等 高分求助!关于触发器。来者有分!在线等待! 工作累了﹖沒有精神﹖來我這里喝一杯吧﹐ Ghost2001如何备份win2000系统 工作累了﹖沒有精神﹖來我這里喝一杯吧 关于图像缩放求援? 各位老大!有没有用C#写的浏览器的程序? 请问如何再java里面执行oracle数据库指令如;exp,imp等等 C#调用C++写的动态链接库中函数的问题! dns的转发项是灰色,说是根服务器,怎么办? 求助!如何实现鼠标移动Image控件 无法终止程序, 条件判断出问题 ,奇怪 为什么对象释放出错? 在FormDestroy中释放对象时出现 'Invalid pointer operation'的错误。 MDI子窗体在MDI父窗体内不能显示的问题,希望高手指点!!! 小问题,高手行!!! JSP 关于中文乱码 哪位高手请提供下面题目的源代码, 急!!! 英语中的非谓语动词怎么看later the woman spreading the rumor learned that it was untrue ,句子中为什么spreading 是非谓语. 我现在的英语水平够烂,连初中的估计都达不到,怎样在三年内自学成四级英语 二、用方框中所给的不定代词填空.everything something nothing anything anyone someone everyone no二、用方框中所给的不定代词填空.everything something nothing anything anyone someone everyone no one1.I did ____special on my "非谓语动词"用英文怎么表达? 本人英语水平不好(没有过四级),想自学商务英语,有哪些好的书,可以推荐下 用something.everything.nothing.everyone.anyone填空 什么叫做非谓语动词?怎样识别?如何应用?请朋友们用通俗易懂的语言解释一下,本人比较笨,呵呵,请多举例子说明! 形容词性从句和名词性从句054.A terrible earthquake happened in that district at the end of 2004,______ many countries in the world paid close attention to this.A.where B.when C.which D.what5.This is Mr.White,______ I think has something in 从方框中选择适当的词填空 something,someone,everything,anything,anyone,nothing,no one,anywhere,ever从方框中选择适当的词填空something,someone,everything,anything,anyone,nothing,no one,anywhere,everydid you grandparents live ___ 非谓语动词可以自己带宾语 状语 那为什么书上说要把非谓语动词的状语 宾语 看作整体再充当句子成分吖是不是非谓语动词的宾语 状语 不是整个句子的宾语状语吖 要看作整体才能做句子的 形容词性从句和名词性从句6.At last the soldiers reached ______ the locals called the Golden Triangle.A.that B.where C.when D.what7.A war is so cruel that it always causes great losses,______ has happened in Iraq and other cou 空里是让选择的 分别是 anything everything nothing everyone空里是让选择的 分别是 anything everything nothing everyone noone 德语写邮件,表达邮件来自某人时,是用von还是用aus? 形容词性从句和名词性从句56.At last the soldiers reached ______ the locals called the Golden Triangle.A.that B.where C.when D.what7.A war is so cruel that it always causes great losses,______ has happened in Iraq and other co 语文古文阅读时被任以官职的次有哪些 公务员英语水平 如果没过四级 可以填写一般吗 什么是形容词性从句?是什么结构?举一些例子. 达到什么英语水平能过英语四级? 我四级没过,报地方公务员.那个职位不需要四级,不过有英语水平的选项,假如我填了通过四级.到时候面试是不是要查呀?面试的时候一般都会审核写什么?我现在都不敢填表,心里发虚. Mr Green is talking _______his friend 1.about 2.with 3.to 4.all of the three 为什么选4 英语完成时的问句里,是不是不能用短暂性动词 国考公务员报名英语水平怎样填?我四级没过 但是那个职位对四级要求?我该怎样填我已经提交了 但是现在还没有审查 我该怎么办 会不会审查不通过啊我四级没过 但是那个职位对4级没要求 Bob is talking with (Mr.Green)(就划线部分提问)Bob is talking with (Mr.Green)(就划线部分提问)( )is Bob ( ) with? 英语中完成时后面可以跟短暂性动词吗, 国考公务员报名英语水平怎样填?我四级没过 但是那个职位对四级要求?我该怎样填 我已经提交了 但是现在还没有审查 我该怎么办 会不会审查不通过啊我四级没过 但是那个职位职位对四级 talking with与talking to的区别 用anything everything nothing anyone ever用anything everything nothing anyone everyone no one填空, 公务员报名英语水平怎么填 没有过四级 报的地方不限制英语四级 选词填空: anyone,something,anything,everything,nothing L:Did you do __ fun on you vacation,Alice?选词填空:anyone,something,anything,everything,nothingL:Did you do __ fun on you vacation,Alice?A:yes,i did.i went to sanya.l:how did you like 用someing,anything,nothing,everything,everyone,anyone what are you talking ____?A with B in C for D about 有人知道西语版的donte voy 歌词和歌手吗?要西班牙语版的我知道英语版的,但十分想知道西语版的歌词,第二个答案是对的,就是那首 用avoid doing sth 造句 短点! What they are talking about ____ ____ ____ with you.他们正在谈论的事情与你有关.还有一个He _____ _____ _____ being rude to his teacher.他因为对老师无礼而受到了惩罚. How was your vacation ? did you do anything?翻译 practise doing sth. 写一句英语,句子含有主格+动词+宾格 动词前有状语后有宾语,怎样分 have+sth.+done表示什么意思 英语动词加宾格的用法如 I think she can feel better soon.还是 I think her can feel better soon.动词加宾语从句时其宾语中的I SHE HE...还要变宾格吗? 请问如何区分动词不定式作宾语还是作状语啊?是不是有固定用法的,如choose ,want ,等词后的不定式一定为宾语,那么我们是不是把这一部分的词记熟就可以作为判断依据,如果不是这些词,就可以 have sth 时间状语后面动词加什么 (比如 ing 什么的) 宾语与状语的区别I live in China. live后的是宾语还是状语如何区别到底是宾语还是状语 have sth.done是啥意思?什么情况下用?我记的初中的时候有讲过,可我不记得了! 时间状语 动词的ing动词的ing形式做时间状语的问题时间状语不是一般是 last week sometimes 等等嘛例如 Arriving in Paris ,I lost my way.Arriving in 是时间状语 怎么理解 状语与宾语怎样区分?.. 在中国寄信到外国地址用英文可以吗?如题不太确定的先让让哈. The reporter has taken some photos ____ our school life.A.with B.about C.of D.to应该选哪一个?要有语法点啊! 国外寄信到中国应该怎么写英文地址?中国重庆市潼南县电信分公司 have sth done意思 英语非谓语动词怎么用 英语翻译和En los poros de tu pielHacen nido mil dulces promesas.Rebuscando yo encontréQue el da?o siempre se compensa.En los poros de tu pielLos errores cada vez más pesan.Cada lágrima de hielQue se derrama como aceite espesa.El camino es dud 窈窕淑女,君子好逑 奠定了全文怎样的基调 Tomorrow we will have an interview ______ foreign visitors in our school.A.with B.to C.of D.about最好写上原因 怎么记那些动词短语?如 break out 之类的.怎样记忆才方便,不容易忘却呢? “窈窕淑女,君子好逑”的“好”发什么音,它的全文是什么? 怎么讲解英语中的非谓语动词? 要求是要初一的动词短语 请问一下西班牙语:“愿我们友谊天长地久”怎么说?希望知道的朋友来帮帮忙,
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘