下次自动登录
现在的位置:
本文作者Tal Gleichger是拥有8年实战经验的资深全栈Web开发者，也是SocialBelong的CTO及联合创始人。在移动开发成为大势所趋之后，转战移动应用开发，在深度接触Hybrid App开发的同时，他也对几大开发者使用最广泛的框架进行了使用与对比，剖析优劣，供开发者们参考。
以下为译文：
在过去的两年里，我一直都在和移动应用打交道，其中绝大部分是基于AngularJS开发的Hybrid App。基于AngularJS的UI框架并不多，而Ionic、Famo.us、Framework7和OnsenUI绝对是首选，此外，还有Google新推的设计语言Material Design。
什么是Hybrid App？
混合应用（Hybrid App）相当于是利用Web开发技术编写的原生应用，如HTML5、CSS、JavaScript都是进入原生容器（Native Container）的比较常用的语言，原生应用包含了一个链接到HTML文件的WebView隐藏浏览器。而使用Cordova、PhoneGap或其他类似的解决方案，不但使整合HTML和原生代码成为可能，甚至不费吹灰之力便能做到，也让在应用商店中部署App更加容易。
图：混合应用的发展趋势
没错，开发者可以创建一个HTML5应用，然后以原生的方式运行。而Corodva，PhoneGap等解决方案也能够让混合应用像Native App那样访问照相机、加速计、位置和通讯录等设备功能。
此外，混合应用开发还有很多好处。其中一个便是别出心裁的跨平台优势，既省钱又省时间。不仅如此，开发混合应用还是创意付诸实践的最佳捷径，所以优势之二是：Web开发者不论水平如何，只需经过短期培训就能成为合格的混合应用开发者。一方面公司的成本可以降低，另一方面学习难度也低于Objective-C、Swift、Java及其他原生语言。虽然从性能上讲，混合应用还稍逊Native App，但几经发展，混合应用也在不断提升的过程中。
在过去，当进行移动应用开发时，大多数开发者都会使用jQuery库来打造动画效果，并自己创建CSS和HTML。这个套路用在网站开发商还挺不错，但对于移动应用开发而言却是绝对行不通的。从响应式、跨平台到原生应用质感，都得费一番功夫才能实现。如今这个时代，用户体验（UX）太重要了，如果他们觉得应用速度太慢，漏洞太多，质量太差，那你只能认栽。
而最近，混合应用和移动开发相当火热，很多公司也看到了商机。在去年，已有三大UI框架被列入了开发工具推荐名单，其他框架也将陆续加入，为混合应用带来质量优、效率高、性能好的用户体验。
整合了AngularJS的Ionic框架发布并不长，却已在混合&移动开发圈子里备受追捧。该框架的Git repo累计超过10,000星，几乎每天都在更新，而且Ionic论坛（Ionic Forum）也相当活跃，甚至比StackOverflow更能帮助开发者解决技术上的难题。目前，Ionic 1.0仍处于测试阶段，虽然存在Bug，但越来越流畅。Ionic团队也在努力提高框架的效率和性能，尽可能实现原生质感。
Ionic还为开发者提供了Ionic Box来帮助其能够快速入门，对于微软Windows用户来说也省却许多麻烦（或者可以直接使用Linux），启动Ionic应用花费的时间最多5分钟而已。此外，Ionic同样提供了诸多工具，以适应iOS、Android和其他操作系统的不同需求。目前，Ionic正在完善名为“”的IDE/GUI工具。通过它，在Ionic应用上拖放创建模板能更方便。
图：Ionic趋势
安装Ionic和Cordova：
创建一个新的Ionic项目：
提供多种模板来供开发者启动左侧导航菜单、标签或空项目，举例如下：
至此，便大功告成，开发者可运行自己的Ionic应用，只需三步即可完成创建，随后便可删除或进一步开发应用，而其项目结构亦是简单易懂：
如果已经掌握PhoneGap和Cordova，那么设置平台并运行应用就更小菜一碟：
同样的步骤也适用于Android系统，当然，所有支持Cordova的操作系统，包括iOS、Android、BlackBerry、Windows Phone、Palm webOS、Baday以及Symbian都在适用范围内。
当我首次使用Ionic时，我实在不敢相信短短3分钟就能诞生一个可运行的应用。Ionic不但能节省构建应用架构的时间，还能帮助改进不尽如人意的架构，并替换之前的CSS文件（SASS）。此外，Ionic一整套丰富的工具，从“下拉刷新（Pull-To-Refresh）”到“无限滚动（Infinite Scroll）”应有尽有，能极大地节省开发者的时间。
Ionic的优劣势对比：
完美融合AngularJS 
测试阶段，有Bug 
    全套UI组件（下拉刷新、无限加载、标签等）    
   变换&动画效果不够流畅    
社区活跃、框架适用范围广 
                     评分标准                   
                    得分                   
文档 
    快速入门 
10.0 
性能 
<font style="font-size: 10.5pt" color="#.0
社区&#160;
<font style="font-size: 10.5pt" color="#.0
学习曲线&#160;
<font style="font-size: 10.5pt" color="#.0
以最炫HTML5 JavaScript框架著称的Famo.us可以说是专为提高应用性能而生，而此处中所讲的并非单纯的框架，而是ThomasStreet开发的整合版。用自主开发的JavaScript引擎结合CSS3 3D转换基础上的GPU加速，来打造60帧/秒（fps）的流畅动画效果，满足最佳用户体验的需求，绝对能让你的混合应用一瞬间高大上起来。&#160;
在渲染DOM元素方面，Famo.us的方法也独树一帜： 干脆放弃DOM，转而创建自己的DOM渲染树。效果很不错，值得称赞。
由于Famo.us和Ionic的侧重点有所不同，目前还不足以构成竞争的关系。不过考虑到两个框架都整合了AngularJS，而前者弥补了Ionic恼人的性能和动画流畅度的问题，由此来看，未来Famo.us很可能对Ionic构成威胁。前不久，Ionic团队曾在论坛表示会考虑整合Ionic和Famo.us，但问题是后者的UI完全遵循不同的运作方式。
而Famo.us虽然在性能上有着卓越的优势，却也缺失了很多开发所必要的工具，换句话说，Famo.us只是一堆文件和文件夹组合起来的架构而已，顺带几个Angular和Famo.us运行的范例罢了。我也是花了很长的时间才搞清楚用“原生”Famo.us和AngularJS&Famo.us开发应用的区别。
要启动一个Famo.us+ AngularJS项目，只需复制一下初学者工具包或使用Bower管理工具来安装即可。
节点依赖模块（Node Dependencies）：
启动项目：
通过上面的步骤，在创建一个NodeJS服务器，随后便可编写Famo.us。打开浏览器，即可看到一个完整的Angular整合Famo.us的范例。
Famo.us包含了两个主要的“DOM”元素，分别为modifiers和surface。surface从根本上讲就是内容，也就是HTML元素，而modifier则是执行动画、移动或其他操作的对象，两者相辅相成。
Famo.us+ AngularJS的优劣势对比：
60 fps的动画效果让应用更加生动，拥有着更好的用户体验&#160;
不提供菜单、标签、基本应用结构/布局等基础架构&#160;
整合AngularJS&#160;
发展尚未成熟，可供参考的范例有限&#160;
提供初学者工具包&#160;
文档中缺少“入门指南”
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 评分标准&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 得分&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
文档&#160;
&#160;&#160;&#160; 快速入门&#160;
性能&#160;
<font style="font-size: 10.5pt" color="#.0
社区&#160;
<font style="font-size: 10.5pt" color="#.0
学习曲线&#160;
<font style="font-size: 10.5pt" color="#.0
最初使用Famo.us时并不觉得惊艳，直到后来在移动设备上测试，看到最终效果时才暗自叫绝。Famo.us的性能和灵活性非常棒，但呈现的学习曲线比较陡峭，而且文档也不够详尽和易懂。在框架使用过程中，很多时候都像是摸着石头过河，而具体的范例能帮助开发者更快掌握使用方法。
但即使Famo.us存在众多缺点，但打造复杂动画效果的优势让人难以拒绝。开发者应密切关注Famo.us的发展动向，这个框架成长得很快，也在日臻完善。
一年多前，在我刚创业时，为了尽可能地减少麻烦，我一直在寻找一种组件丰富、功能强大的UI框架，而早于Ionic问世的FrameWork 7（简称“F7”）正好能满足我的需求。其官方网站上称F7是“为iOS应用开发量身定制的全能型HTML框架”，这反倒给了我一个拒绝的理由，因为F7不支持跨平台。
不过，用F7开发混合iOS应用还是不错的，一整套UI组件覆盖了原生iOS应用所能呈现的一切内容。跟Ionic和Famou.us + Angular整合版有所不同的是，开发F7应用时，必须使用内置的F7 MVC（Model View Controller，模型试图控制器）框架。
通过F7源码，创建bower_components目录之后，如果想要启动的话，还必须创建一个HTML文件，就这一点而言，F7并没有像Ionic或OnsenUI那样贴心地提供基础模板。
此外，在使用F7开发时，还必须将文档放进Web服务器的目录中，并在localhost上操作。F7调用AJAX来实现页面之间的转换，需要一个运行的网络服务器，但为PhoneGap和Cordova部署时则可以省去这一步。
F7的优劣势对比：
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 几近完美的iOS用户体验&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;
不支持跨平台&#160;
提供诸多实用的工具&#160;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 使用自主开发的MVC框架&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;
尚未普及，无“starting-kit”
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 评分标准&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 得分&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
文档&#160;
&#160;&#160;&#160; 快速入门&#160;
性能&#160;
<font style="font-size: 10.5pt" color="#.0
社区&#160;
<font style="font-size: 10.5pt" color="#.0
学习曲线&#160;
<font style="font-size: 10.5pt" color="#.0
Onsen UI不但整合了AngularJS，连解决方案都跟Ionic团队的方向一致，可谓Ionic的一大劲敌了。对于PhoneGap和Cordova开发者来说，Onsen UI简直是专为解决启动项目的UI问题而生的，同类的移动UI框架可以说是寥寥无几。
在检测Onsen UI时，我发现的第一个问题就是“入门指南”写得并不清楚，而且Onsen UI团队创建的模板也并不在模板存储库（比如Git）里，要使用还得先下载。如此一来，如果遇到Bug，开发者根本无法直接写问题报告来解决，或提交Pull Request以警示其他开发者。如果模板升级的话，开发者一方要做出相应的更新也不容易。
有弊也有利，Onsen UI的贴心之处在于，开发者能在线选择颜色和基本组件样式，无须更改CSS，下载后就能使用。当然，也可以用Monaca IDE，不必下载文件，直接用定制模板来创建项目。
那么，如何用Onsen UI来创建一个项目呢？首先在“getting started”上选择一个心仪的模板。解压文件后，就能看到一个标准的Cordova/PhoneGap目录结构。然后，回到网站，选择一个不同的配色方案，比如黑色主题：
和Ionic一样，Onsen UI提供了一套完整的指令（HTML自定义元素），很贴心地帮开发者避开了弯路，保证开发过程严格遵循业务逻辑。虽然Onsen UI社区没有Ionic那么活跃，但同样人才济济，未来，Onsen UI的提升空间还是很大的。其次来谈谈框架本身，Ionic和OnsenUI都具备下拉刷新、列表、标签、菜单等工具，但Ionic更用心，可以往AngularJS的控制器里注入服务，以对其实现控制。
Onsen UI的优劣势对比：
兼容AngularJS，友好支持Cordova和PhoneGap&#160;
使用自家的MVC框架&#160;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 提供诸多实用的工具&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;
&#160;&#160; 尚未得到广泛使用&#160;&#160; &#160;
易于定制&#160;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 评分标准&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 得分&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
文档&#160;
&#160;&#160;&#160; 快速入门&#160;
性能&#160;
<font style="font-size: 10.5pt" color="#.0
社区&#160;
<font style="font-size: 10.5pt" color="#.0
学习曲线&#160;
<font style="font-size: 10.5pt" color="#.0
Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念，而AngularJS还发起了一个Angular Material Design项目，为应用开发者提供一组完整的实现Material Design的AngularJS UI元素。这听上去不错，但要深究或展示实际范例还为时尚早，感兴趣的开发者可登陆了解最新进展，或进入下载源码尝鲜。
综上所述，在我看来，Famo.us和Ionic之间才是真正的较量，因为两者都是旨在为Hybrid应用开发提供原生体验的UI框架，只是实现途径各不相同。Ionic先从UI着手，启动应用后能快速获得一个包含多种UI组件和功能的基础架构。同时，其性能问题也在逐渐完善。而Famo.us则是从性能、效率、动画效果入手，以后可能会加入完整的UI工具包。
不论前端还是后端，开发者都应根据自己的侧重点来选择框架，而不是随着框架而转移自己的侧重点。开发的应用仅限于iOS还是跨平台？是否力求打造惊艳的转换、动画效果和流畅的用户体验？想要快速部署自己的产品吗？是针对高端移动设备还是中低端？
实际上，这些问题一旦想明白，选择什么样的框架就一目了然了。拿我自己来说，想要快速部署MVP，我更青睐Ionic，它整合了AngularJS，还有下拉刷新、无限加载、图片轮播等诸多酷炫的功能，节省了我很多时间。更重要的是Ionic社区群体庞大，我能把精力全部放在业务逻辑上，而不必亲自开发整个UI。但说到Famo.us，其发展方向是对的，而且未来一定会越来越完善。
【上篇】【下篇】
您可能还会对这些文章感兴趣！
百度站内搜索
同分类最新文章React实战-一个非常棒的React与Material风格相结合的UI控件库（Material-UI）
React实战-一个非常棒的React与Material风格相结合的UI控件库（Material-UI）
ReactJs提供了JSX、UI更新机制、化原则等底层支持，但是正如我们在所有的程序语言基础上搭建框架所面临的问题一样，很大程度上语言提供的是解析、编译、运行过程的后台调度等，真正实现一个应用往往由大量的三方控件或库完成。所以当我们长期使用一个框架后，往往陷入了框架的规则，忘记了语言的规则，在java中最明显的例子就SSH了，在项目整体架构成熟后，我们好像就在干配置的工作，不断的依据SSH的规则，维护着库内或各层间的关联。
但是如果不用框架，几乎是不可能的，因为各种框架或者库，是之前程序员的经验总结与积累，这也就是每个人在设计程序框架时需要面临的经典问题：是选用轮子还是造轮子的问题？甚至在选轮子时，依然存在苦恼，哪个轮子好的问题。
在ReactJs开发过程中，你可以选择任何你喜欢的组件，在http://react-component.github.io/badgeboard/，你可以找到各类ReactJs的组件。
但是目前为止，我依然认为Material-UI是一款你应该首先选择的UI控件库（http://www./#/components/app-bar）主要原因有以下几点：
1.完全基于ReactJs
Material-UI是一款完全基于ReactJs的控件，采用的是ReactJs的原理实现，虽然在早期的版本中存在为了推出控件，采用了原始的数据流和控制流方式，但是从其版本更新来看，它在不断改造自己，是自己更ReactJS。
2.设计风格基于Material
Material是近年来流行的设计方式，推崇简洁、明快的设计风格，在Material-UI中蕴含了前卫的设计元素，够炫、够Cool。
3.控件丰富、涵盖所有典型场景
在选择控件时，我们希望一个库能涵盖所有典型场景，但往往会出现很多的三方库集成在一起的情形。采用Material-UI不能说涵盖了所有所需控件，但至少涵盖了所有典型场景。
4.活跃度高
选择控件一个重要的考虑因素是活跃度，活跃度高的意味着该控件经历着各类实战的考验，能及时更新bug，控件库的功能、性能更有保证。从github上我们可以看到参与的开发者和使用者均居高位。
5.版本更新频率高
版本更新频率高是个双刃剑，你可能庆幸下一个版本修改了你急需修改的bug，也可能因为下一个版本的实现方法改变了导致你要重新修改代码，但目前看来,Material-ui的版本变化处理修改bug外，均是是自己更reactjs。
6.同时支持SVG/Font Icon
7.设置样式简单
Material-ui不仅支持一般采用Css class或者在JSX中设置Inline Styles设置样式，也可以采用设置Themes的方式统一设置整个应用的样式。如：社会化媒体
了解更多>>
桂ICP备 号
桂公网安备 36号
阅读下一篇
Hi，在你登录以后，就可以永久免费的收藏任何您感兴趣的内容，关注感兴趣的作者！
请输入正确的邮箱
已有帐号请点击
帐号创建成功！
我们刚刚给你发送了一封验证邮件
请在48小时内查收邮件,并按照提示验证邮箱
感谢你对微口网的信任与支持
如果你没有收到邮件，请留意垃圾箱 或 重新发送
你输入的邮箱还未注册
还没有帐号请点击
你输入的邮箱还未注册
又想起来了？
邮件发送成功！
我们刚刚给你发送了一封邮件
请在5分钟内查收邮件,并按照提示重置密码
感谢你对微口网的信任与支持
如果你没有收到邮件，请留意垃圾箱 或 重新发送
对不起，你的帐号尚未验证
如果你没有收到邮件，请留意垃圾箱 或
意见与建议
请留下您的联系方式
* 留下您正确的联系方式，以便工作人员尽快与你取得联系ReactJS 开发过程中的一些使用心得
一.项目所用的各种框架
在我目前开发的项目中,前端UI框架使用的是framework7,ReactJS用来构建用户界面,reflux用来操作数据(主要负责数据请求和数据操作)。
二.ReactJS简单的介绍
什么是React?下面是来自文档的说明:
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。
很多人认为 React 是 MVC 中的 V（视图）。
我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。
1:仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新
2:数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。
三.React中的生命周期