移动平台前端开发之区分Native&App、WebApp、HyridApp
Native App：
1、开发成本非常大。
一般使用的开发语言为JAVA、C++、Objective-C。
2、更新体验较差、同时也比较麻烦
每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。
因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果
4、Native app是被Apple认可的
Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web
app却不行。
1、开发成本较低
使用web开发技术就可以轻松的完成web app的开发
2、升级较简单
升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉
3、维护比较轻松
和一般的web一样，维护比较简单，它其实就是一个站点Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的。
Hybrid App
Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native
App，但只有一个UI WebView，里面访问的是一个Web
App，比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。再彻底一点的，如掌上百度和淘宝客户端Android版，走的也是Hybrid
App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。
Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用。
Hybrid App的瓶颈与未来
国内外Hybrid
App的开发框架众多。如何选择又成为一个难题。下面对开发者比较关心的集中知名跨平台开发移动应用中间件进行列表和对比，以便选择最适合您的移动应用中间件。
PhoneGap是相对比较早进入公众视线的一种选择。但是，开发者简单的基于PhoneGap来开发移动应用肯定会发现结果和Web
App比较差的用户体验类似。这也是为什么基于PhoneGap有实用性的移动应用主要集中在iOS上。可是PhoneGap这种现状弱化了HTML5的跨平台价值。
AppCan在技术架构上和PhoneGap类似是Web主体型中间件，但是通过结合了一些原生交互效果能够达到iOS、Android平台都比较一致的用户体验。但是相比PhoneGap的开源，AppCan相对封闭的路线显得过于谨慎。
Titanium是一种基于翻译机制的跨平台中间件，能够开发出具有Native体验的移动应用，但是因为翻译机制的限制导致移动应用开发不能像真正的HTML5开发一样灵活。哪怕一个按钮也不能像普通HTML一样来编写，而必须按照Titanium约定的特定格式。
App这个领域虽然还处于比较初期的阶段，但是已经有很多优秀的公司和技术团队在致力于跨平台开发移动应用中间件技术的研究，给了开发者众多选择。开发者可以根据实际的项目需求来选择中间件。
参考文献：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。移动前端开发的一点心得（APPCAN） - 推酷
移动前端开发的一点心得（APPCAN）
从8月初正式开始的团队appcan项目，截止到目前基本上是完成了第一版的开发，其中历经很多曲折。
初次用phonegap和appcan开发应用，最大的不同之处在于反应速度，appcan这点做得很好，但是也别对appcan这个框架抱太多期望值。
任何框架都是基于webview的，webview支持到什么程度，开发的项目功能大概也就达到什么程度，混合app肯定比不上原生的好，原生的可以满足很多需求，混合的就算了，用来看点资讯信息什么的还行。
appcan新建一个项目预先给你设置了N多功能N多样式和N多适配，这对于菜鸟来说，的确很方便，但是对于有经验的人来说，总是要去清理掉用不着的，很麻烦，这方面建议appcan的团队学习visual studio的编辑器吧。
appcan有几大优势：
1、js的跨窗口相互调用；
2、窗口的分拆解决不支持fixed定位；
3、窗口的缓存
当然了，有时候优点也是缺点，打开同名的窗口，如果之前该名字的窗口已经打开过（没有关闭，也就是缓存还在），那么打开的这个窗口不会刷新，那么你会觉得这个页面怎么没刷新，是不是本地存储不支持？还是程序哪里写错了？排查了很久，才知道，原来是缓存的原理导致的。于是，跨窗口的js相互调用可以解决这个问题，怎么解决，使用location.href=’本页面地址’来刷新缓存~~
我觉得官方应该先把这些注意事项跟初学者说清楚的，不是让开发者到处去翻api或者论坛然后自己慢慢摸索。
移动前端开发主要是注意几点问题：响应式布局、网页性能、交互动作的响应和不同版本的系统对H5和CSS3的支持。
一、响应式布局
之前广州的webrebuild年会迅雷的高磊已经给我们说得很清晰了，当然，也可以参考我之前写的一篇《
》，主要就是用好viewport和媒体查询。
二、网页性能
基本上我们这个appcan的项目没有用到java的东西，因为我也不懂java。那么纯H5+CSS3+JS的性能问题来自哪里呢？appcan框架的性能、类库的性能，特效的性能，其中js的性能问题占大部分，特别是js的内存问题。当然，大部分的时候我们把一些东西都存储到了本地存储，也就少了很多闭包的使用。
其中，用到了三个js框架，jquery1.8、iscroll、和arttemplate。本地加载每个资源也就30Ms~300Ms之间，框架到用对地方才能发挥最大的性能。比如利用jquery来实现一些dom的操作是最合适不过的了，因为jquery最新版本操作dom的速度提升了很多，当然，如果你要获取id的dom，用原生的是最好的，如果你要获取类名的dom或者tagName，还是用jquery比较合适。
iscroll用在水果机上一些性能的问题一般不会体现出来，但是在安卓机上面，性能会挥霍掉一些。之前写了一个加载刷新的动画，在浮动窗口上的css3的rotate动画是可以实现的，但是在辅窗口上的动画直接被无视掉了~~
然后iscroll又是使用float来布局排列元素的，正所谓布局的浮动乃万恶之源……我自己的观点就是尽量少用浮动布局，能用流式布局或者inline-block尽量用。
arttemplate是腾讯一个团队开发的开源框架，mvc模式正如他所说的，它在 v8 中的渲染效率可接近 javascript 性能极限，其中我最喜欢的是他可以在js中提前做好编译模板，这样的确很灵活。
之前有想过用玉伯的seajs来改造一下，但是发觉两个人写的js很多风格不同，导致了模块化比较难搞，这个得再下一个版本的开发中注意了。
有些人喜欢用js来实现一些特效，比如进行一些dom的操作，其实每一次dom的操作都会造成重绘，而且css的display的显示隐藏也会造成重绘，在使用iscroll的过程中，伴随着show和hide经常出现界面一些渲染重绘的不完整问题，我也尝试过使用绝对定位让其不至于总是重绘，但是问题依旧，估计我需要深入去学习webview的特性，最后我干脆就让它固定在那里算了~然后，有些转场效果能用css3的transform实现的，还是使用css3吧。
三、交互动作的响应
这块的问题真TMD特别多，输入法的弹出，键盘的弹出，键盘按键的跟踪，多点触摸的跟踪等等。appcan自带了一个手势的js库，其中有一个不错的手势，比如左滑动，右滑动等等。使用jq的click事件很方便，但是区别不出是轻按、长按，只能通过加一个时间判断来区别。
之前做的phonegap应用使用了jqm框架，但是在textarea中，死活输入不了汉字，jqmobi输入不了汉字是众所周知的，但是jqm也输入不了实在是不知道为什么。但是在appcan的输入方面，汉字是没用问题的。
四、版本的支持程度
webkit应该说是支持web database的，在android2.2中的webview是支持的，但是在2.3以上的版本中却不支持了，sqlite的好处是轻量级的数据库，可是这一特色却进不了W3C规范。
2.2一下的版本对border-radius的支持各有差异~~
触摸屏没用鼠标，所以hover用不着。android不支持设置焦点高亮色，iPhone支持–webkit-tap-highlight-color。
最好，把我们团队的第一版的项目公开一下吧，大家可以去
下载。至于文章的分享功能，近期在提交审核，所以大家可以稍后尝试下。
android不支持多点触摸和手势，iPhone全部支持。
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示我为什么看好Hybrid - 献给Web前端工程师
招聘信息：
Web从最开始，用html标签这种最简单的方式搭建门户网站、论坛，那时候能做个网站感觉很牛叉的样子。后来又有了Ajax方式，可以动态的获取数据，让网页能不刷新而完成更新。之后又有了HTML5，结合JS、CSS3到达另一个高度，通过Web可以用很炫的方式实现不错的功能效果。这是PC时代；现在到了移动互联网时代，有人唱衰Web，也有人高唱Web。不管怎么样，Web在以它的方式而野蛮生长着。生长的方式不是以我们的主观意愿的，而是这个时代需要Web，需要这种方式来实现一些东西，人们希望有这么一个东西能像一个树，在这个炎热的夏天提供一处阴凉，愿意为它施肥浇水，让它再大些再高些。因为需要所以产生，而不是因为存在所以可用。1、到达一个拐点技术上：从原先的一根筋变成现在的两头堵了。在2014年10月底，W3C宣布HTML5正式定稿。这个时间，不晚不早，硬件性能更强、手机OS迭代速度下降。优势是跨平台，更新及时。可用和原生代码结合实现互相的调用，机制上是完全可以的。只是看你用不用而已。其中OS X Mavericks和iOS 7引入了JavaScriptCore库，它把WebKit的JavaScript引擎用Objective-C封装，提供了简单，快速以及安全的方式接入世界上最流行的语言。不管你爱它还是恨它，JavaScript的普遍存在使得程序员、工具以及融合到OSX和iOS里这样超快的虚拟机中资源的使用都大幅增长。生态上：很多的公司和个人在Web这个领域一直的添砖加瓦，不管是、、、、、等等，都在从各个方向突围，让大家看到了希望。硬件上：系统版本和浏览器已经可以很好的支持html5和css3硬件加速。Google在2013年底发布的Android4.4，内置的Webview不再是蹩脚的Android WebKit浏览器，而是Chromium，性能大幅提升。从最新的Android 5.0开始，Webview可以通过GooglePlay Store实时更新，和Chrome的升级保持一致，用户就可以不刷机享受到最新的浏览器引擎；再看Apple方面，2012年iPhone5发布后，HTML5在iOS上的表现已令人满意，Safari独家的JavaScript加速引擎Nitro不再那么重要，不过在iOS 8发布后，苹果还是很识趣地取消了三方程序调用Nitro的限制，现在任意浏览器或应用调用iOS的UIWebview都可以利用Nitro加速，这样在前端使用JS做大型运算也成为可能。实现上：具体到这个层面，最初是直接嵌网页的方式；后来是打包JS、HTML、CSS到本地；这两种方式都有优缺点，不能满足我们要求加载快而且实时更新。于是出现了第3种，可以用增量更新zip包的方式来实现本地加载和快速更新的目的。这些已经在超级app上实现，并且效果很好，下面内容有讲到。2、需求要求这样而对于开发者而言，开发者为什么不愿意开发WP版本，很多时候是因为工作量太大，除了版本适配，分辨率调整等，一旦有新版本推出，在原生App中开发者不得不等待多达两周时间去接受审核。另外内容维护上也很麻烦，这也是为什么有些媒体开始放弃原生App鼓励读者使用WebApp的原因。除此之外，跨平台在多屏时代给开发者非常痛苦的体验，人们都期待当年Java的一次编译处处运行的理想情况。HTML5目前正在扮演一个开发者救星的角色。全新的互联网入口超级App+WebApp的时代来临你手机里装了多少App，最常用的有哪些？可能最多的回答是，我用「微信、QQ，或者其他浏览器」等等所谓的超级App。在超级APP里Web正在扮演着重要的角色，发挥她的快速、跨平台、轻的特性。3、已经被验证过手Q中群部落、吃喝玩乐、主题中心等核心业务。微信的[发现]。新版支付宝的[商家]、京东、淘宝这些电商更是用到了各处。这些超级APP已经在某些场景下用的不亦乐乎，发挥Web的优势，为我们所用。4、农村包围城市从PC到移动互联网时代，Web正在符合时代的需求而生长着。没有一种语言是像Web一样，随着时代的发展而不断的修订，并能符合这个时代发展的速度。Java做不到、Objective-C也做不到。虽然出身草根，但是像水一样，随形而动，生命力旺盛。还是让我们拥抱变化，拥抱草根出身的Web。献给一直坚守在Web前端的工程师们扩展阅读:
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量11134点击量9353点击量8096点击量6379点击量5600点击量5537点击量5374点击量4930点击量4680
关注微信 每日推荐
扫一扫 浏览移动版
&2015 Chukong Technologies,Inc.
京公网安备89收藏，11.2k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
题主有一些pc端web前端开发的经验，但移动端web前端了解较少且没有实践过。
想了解一些移动端web前端开发的经验。
尤其是关于响应式布局和性能问题。
有哪些需要注意的问题？
有哪些好的框架推荐？
与设计团队，产品团队，后端开发团队的对接方面有什么需要注意的？
忘记提很重要的一点：Hybrid App 和 移动版网站会有需要分别注意什么？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这里推荐一些关于移动端开发的博文：
希望对需要了解或者准备开发手机端页面的朋友有所帮助
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Hybrid App其实就是在做网页，只是本地的功能是通过JS调用，所有出错调试比较麻烦，移动网站开发，看你兼容哪些设备，是否需要响应式布局，ios的的浏览器兼容性就不用说了。主要是android的浏览器兼容，国内主流的那几个主流浏览器做好测试就行。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Hybrid App
js方面:zepto.js jquery-mobile
CSS方面:jquery-mobile boostrap
hybrid app其实就是在写网页，不过最后用cordva进行封装
不过性能方面还是没有单纯的安卓应用好。
一般现在市场上的应用都是在安卓里调用H5+JS这样。
项目DEMO你可以参考下：
因为这个是正在做的项目，所以只公开了刚开始构建的时候的一点静态页面。可作为入门参考。
这里是一个完整的DEMO：
求星星~~用jquery-mobile构建的前端页面，后来用phonegap封装了一下。
不过目前只上传了完整的前端静态页面……采纳我，我上传完整版本。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
说说webApp开发的注意事项：
2、首屏加载时间
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知}