煤气发生炉厂家
免费服务热线

Free service

hotline

010-00000000
煤气发生炉厂家
热门搜索:
技术资讯
当前位置:首页 > 技术资讯

当当网柴春燕针对移动终端的WebApp前端开发

发布时间:2021-01-16 12:01:04 阅读: 来源:煤气发生炉厂家

据2011年Vision Moblie开发者经济学报告显示,如果移动Web视作新的开发平台,那么它仅次于Android和iOS成为最受开发者青睐的第三大平台。特别是HTML5技术的飞速发展——不断涌现的各种创新产品和工具,Facebook推出斯巴达项目、Adobe收购 PhoneGap等重大动作,无不吸引众多开发者投入。

一个被业界广泛关注的问题是:“移动Web会否在不久的未来重现在PC端上最终成为主流的的发展趋势?”10月13日晚上,在CMDN移动开发者俱乐部第六期活动,当当网前端工程师柴春燕分享了他的思考和实践心得。演讲实录如下:

非常高兴今天晚上在这里跟大家分享移动终端使用HTML5技术做了一些实践。对于移动终端目前开发方式无非就两种,其中一种就是HTML5的解决方案。如果采用HTML5的话它的Fxs(音译)就在前端。

移动互联网及其现状

前面刘铁锋讲的是把PC都包含进去,我讲的就是针对移动互联网,针对移动终端,常见像智能机、上网本、移动终端可以访问网络的设备,它的可以实现的一些方式。第二是在移动互联网MobileWeb App开发的时候可能会遇到的一些问题。还有HTML5适合Mobile Web App开发的特性。这是我开发MobileWeb App的心得跟大家分享。

之前互联网消费调查中心做了一个研究,手机上网在生活中重要性比例,他所占据份额会越来越高。另外这个统计调查在2011年底,一半美国人都会使用智能手机,2013年预计移动互联网用户超过10亿,2020年HTML5这种方案已经确定了。截止到2011年6月底,中国的三大运营商智能机份额已经超过8千万。这个趋势随着3G互联网方面会越来越大。

移动互联网是指什么?官方解释就是将移动通信和互联网两者结合,用户借助移动终端包括手机、平板、PDA、上网本等,通过网络访问互联网。大家如果做过移动开发的话,最开始如果想用手机访问互联网的话,从几个阶段过渡过来,一个是WML方式,Web1.0,还有Web2.0。

移动互联网使用的关键技术

第一是Web2.0技术。在移动互联网的时候,Mobile Web App的时候以Web2.0为基础,利用集体智慧,数据驱动,带来较丰富的体验。iOS操作系统诞生,从本质来说其实带来颠覆性是用户体验上的一些更新。后面我会讲到为什么移动设备有很多局限性,包括大家在做移动开发的时候都会遇到兼容性的问题。

第二是云计算像超大规模、高可扩展性、高可靠性和相对廉价。

移动互联网开发面临问题

第一个是设备。你拿到手机终端,相比PC端浏览器运算处理速度都有很大差距。内存小,电池续航能力差,屏幕不统一。针对哪种终端设备做适配,比你做PC端前端开发所遇到的困难还要大。

第二个是开发,多种不同手机操作系统,每一种操作体验不一样,相应应用开发环境也是不同。像iPhone的IOS操作系统,是使用WebKet(音译)为 核心。两种版本兼容Webket,具体对HTML5支持力度是不一样的。大家可以看到这个官方站点就可以看到,能够支持多点触控。像 WindowsPhone是采用IE为内核。三者操作起来也不一样,iPhone硬件只有一个Hom键,Android是软硬件结合一个实体,返回可以通 过硬件操作。如果你把所有操作、用户体验都放到一个里面看的话,他是有差异的。这是我们做Web App的时候都必须要考虑的一些问题。

第三是网络,这是大家无法回避的一个地方。为什么在HTML5出现之后大家会这么狂热,会觉得他是一个趋势。目前虽然中国现在有3G,他的覆盖面并不是达 到处处都可以拥有3G网络,它的流量费用也并不是人人都可以承担的地步。像网络稳定性上面都还是有一些问题的。比如你在坐地铁的时候,可能到朝阳门的时候 还有信号,走到建国门信号就没有了。这种情况下用原声还好解决,如果使用网页形式访问的话,如果没有做到APP方式,基本处于假死或者是掉线状态,无法进 行第二次访问,这对用户体验是很大的问题。

HTML5适合Mobile Web App开发的特性

这些是一个不完全包括的HTML5的集合,这里面我只是罗列出来,我这里说明一下,我觉得HTML5本身也是草案,我也是在一个学习过程中。

第一是语义化。你做MobileWeb App,他本质还是希望以后把PC端搜索引擎,都可以用到移动端。当用户通过手机搜索某些东西的时候,可以直接定位到MobileWeb App这种站点,更好的用户体验。百度框计算,现在都有这种功能。

第二是新的表单功能。之前做表单功能的时候可能常见的像Canvas,像移动端验证肯定是必须的,像这个键盘是不容忽视的问题,你的手指相比你的移动设备还是很大的。这个情况下如何更好带来用户输入上的体验,支持浏览器都有对HTML5的一些帮助。我们有对于E-Mail的,软键盘都有调用方式,邮件的话键盘就增加一个@符号。还有Canvas像一些对图片旋转是可以原声支持,像手机处理性能会越来越高,手机有这样的提升。做这种技术储备,后面都有一些长足的用处。

第四讲到视频和音频,嵌入音频和视频和文字排版布局的时候,相当麻烦,你要把所有音频视频文本作为独立资源去集合起来,如果采用HTML5的方式的话就非常简单。他和你普通做页面没有辅助差别,可以辅助与CSS,包括CSS3这种方式,可以轻松实现这种布局方式。Web Worker是一个草案,只是一个工具。具体项目里面没有用到。剩下地理位置信息,是HTML5原声支持,为什么说像HTML5使用一些场景都会像导航类、地图类都会用到地理位置信息。传统的话谷歌地图,大家获得地图信息,不是所有地图软件包获取下来,可以实施地理位置定位。移动区别PC端,因为他就是移动。可以扩展出很多,在实际项目应用中就会遇到这样的,我们所有的商品都会有区域购买,他在什么地区可以购买,什么地区他是没有配货。这种情况下如果用地理位置信息他就非常方便。因为我可以检测到如果他购买的用户是来自于本地的话,我可以首先获取它的地理位置,告诉他联网请求后台服务,看他是否有货。他其实就是利用地理位置信息一个功能。剩下这个就是本地存储和离线功能,这是我们做Web App的一个源动力。像这个功能才能够支持我们去更好带来这种用户体验,我们可以把一些资源缓存到本地。可以把用户状态缓存到本地,这个地方也是需要注意的一个地方,就是安全性问题。你像用户比较核心的一些信心是不建议保存到本地的。但是有一些信心可以用到这些功能,比如在项目中可能会用到搜索,原来大家可能会常用这种搜索推荐。我如果搜索一次,下次还是搜索这个怎么办,我可以使用本地搜索功能,我直接把他放到本地,下次直接读取历史记录,这个跟原生没有差别。另外就是离线功能,金融时报FT这个站点,他其实都用了离线功能,把所需要资源优先获取到本地,然后这样子,当用户在没有网络的情况下,我可以把有一些资源呈现给用户。然后又可以再去请求服务器端,同时像这种离线功能还有一些Gmail还有新浪微博都有这些应用在里面。我发帖子也是一样,把先在发帖时候的信息先缓存到本地,然后再把他发送到服务器端。WebSocket,虽然现在也是草案,目前各浏览器支持力度还是比较好的。这在实际项目中可能会用到,我觉得就是像这些新特性,像HTML5提供了相当相当多的全新API,是原来没有尝试过的。有些地方像OA这种,如果采用传统这种方式,像这种HTTP这种是无状态的,这种情况下怎么办,可以通过WebSocket方式。这是从网上找到,如果你去开发,他有一些底层框架在上面的。

HTML5在开发移动应用方面有哪些优势呢?

第一是跨平台。如果公司比较小,你如果要去开发一套针对iPhone版本,再针对一套Android版本,Android目前有高中低三种版本,每一种版本去做适配有四个版本,两套代码。你开发需要两套成本,然后运营。我们通过Mobile Web App的方式,开发成本低于你这种本地应用,在不同操作系统上可以带来近乎一致这种用户体验。因为他其实还是一种Web方式去展现。

第二是他基于Web技术。它有成熟社区,Web开发人员很容易迁移到像移动互联网开发上面去。

第三个是易用部署。这是后面我在开发中发现他其实真的有很大差异的地方。我们用传统方式去开发APP这种应用的时候,我要做一个广告位,像原生这种方式,我更新一个版本,通过他的用户去下载。更新一个版本的话,你必须把每个系统都做一次更新升级,这个带来部署和维护上面一些成本。采用这种Mobile Web App方式,可以实现持续更新。

HTML5开发移动应用的注意事项

第一智能手机市场占有率。针对对比一下这种HTML5开发移动应用注意事项,智能手机市场占有率没有达到人手一部,虽然智能机在8000万,但是中国13亿人,没有做到人人一部。我们公司做的统计,移动端,Symbian操作系统还是占45%份额以上,访问量还是比较大的。

第二是移动设备浏览器对HTML5的支持并没有像桌面版本那么全面。每个移动浏览器,目前市面上见到的IE的Mobile版本,包括目前出来的QQ浏览器、遨游、海豚浏览器,各个移动设备浏览器对HTML5支持都是不一样的。像HTML5开发Web App方式,最成功案例永远是出现在iPhone上面,出现在iOS操作系统上面,会做他的兼容和适配。

第三是不同浏览器间的兼容性问题。移动端的浏览器不比PC端他要差一些。

适合采用Mobile Web App方式的场景

我自己总结一下适合采用Mobile Web App方式的场景,所有都是我在自己不断学习过程的一个总结,并不是一个权威的观点,只是拿出来和大家分享。我觉得MobileWeb App基本上都是基于信息流的,什么叫做信息流的?这种应用都是由后台服务器推送过来。打个比方,我们看到新闻类,iOS、Android支持两种,一个是JSL,一个是HTML。有两条产品线做iPhone和Android产品线,采用Mobile Web App的方式,我可以完全做到直接去存储数据库就可以。我做一套API提供给客户端。

第一个是微博,另外是社交新闻类,地图和导航类,他采用就是按需下载,能够带来客户更多流量上的节省和体验上的提升。基于这个基础之上可以做更多的分享,像切客这种功能。一个是商品列表、一个是商品详情,点进去之后就是购物流程。信息展示类,他是非常适合用MobileWeb App的方式做的。

后面我想展示一些成功的站点,比如说谷歌Plass(音),还爱百度小说都是采用MobileWeb App方式做的。还有像淘宝。像列表展示,其实内部嵌这个都是Webwell(音),他们做HTML5然后去实现的。这个图登录和注册功能,完全可以使用HTML5表单功能,去做记住密码,你去校验用户输入。还有第三方框架,有学习和参考的地方,第一是iUI,还有JQtouch,

Mobile Web App开发心得

第一要创新。HTML5提供了很多原来你不曾想象的一些功能点,你可以去参考iPhone和IOS操作体验。你去看像这种HTML5官方站点提供Demo(音),你想这些功能可能会用到什么地方。你可以去判断这个商品是否是区域购买,你针对具体应用场景,完全可以做到你的实际项目里边。

第二是安全性。并不是这个技术一定要用到这个项目里边去,你要考虑是这个场景,我做的Android应用的时候其实只是考虑到为了实现这样的功能,比如说记住密码。我们可以由其他替代方案,并不是一定要采用为了技术而技术,我们用户需求是第一位的。

第三是规范。HTML5本身是草案,每个公司做Mobile Web App的时候,都没有一套完整的体系,不像之前做开发的时候前端会给你开发,像HTML5跟CSS3结合,做Mobile Web App这种,Web App的方式的话更多可能会在交互,还有就是样式,配置等等,你要精确到细节,比你原来做前端,具体到细节更加要规范一些。

梦浮灯

伏魔情缘至尊无限版

995彩票

王者乾坤下载