很多移动开发者喜欢使用原生代码开发,但这种方式并不是一个银弹,在需要快速以及低成本开发的时候Hybrid App(混合应用)就体现了它的优势。

HTML5 移动UI框架(例如Ionic)让你创建垮平台Hybrid App与NativeAPP相似的效果,而使用的则是
HTM5, CSS and JavaScript。如果你已经是一个web开发者了那么选择hybird将是一个较好的开发方式。而且只需要编写一套代码就可以在多个平台中使用。通过Cordova(PhoneGap)提供的javascriptAPI可以访问到照相机或传感器这类硬件设备。最后再编译成原生安装包发到各应用商店。

目前市面上有需要移动端的UI框架可供选择,接下来将介绍几款其中的佼佼者。

Ionic

在近几年,ionic成为了Hybrid App开发框架中的领军者,并且ionic的开发小组继续更新,并保持领先优势。ionic一直保持免费和开源,而且它还拥有庞大的生态系统,可以在社区中找到大量的资源。

ionic添加了对android材料设计的支持,同时ionic也包括了angular。像其他流行的Hybrid App框架一样,ionic也可以利用cordova来实现对原生硬件的调用。

ionic框架具有可维护性和可扩展性,使用了简单清晰的标记,大量移动端特殊优化的css(Sass),HTML5 and JavaScript 组件。

优点:

  • 基于Angularjs
  • 预置的类原生组件
  • 强大的社区

** 缺点:**

  • 需要了解Angularjs
  • 插件更新较慢
  • 动画性能较弱

官方网站

Onsen UI

Onsen UI是相对较新的框架,但是却给Ionic带来了冲击。Onsen采用Apache license开源协。Onsen UI 有通过angular的指令实现了大量的组件也提供基于jQuery的组件 。两个框架很类似但是还是存在一些不同:

与 ionic 相比

  • 两个框架都依赖与angular指令,但Onsen UI支持jQuery。
  • 两个框架都支持Android 4+, iOS 6+,Onsen UI 支持Firefox OS和桌面浏览器。但ionic没有官方的桌面浏览器支持,但还是可以用。
  • 都支持分屏显示技术
  • 都是扁平是风格,但个人觉得Ionic更好看点。
  • ionic支持SASS而Onsen UI 则是基于 Topcoat Css library。
  • Onsen UI 文档较好,但ionic的社区较活跃。
  • Onsen UI 有一个自己的IDE called Monaca IDE.

官方网站

jQuery Mobile

jQuery 依然在游戏领域与其他移动端框架抗衡。jQuery Mobile 建立在jQuery和jQueryUI的基础上。允许开发者创建webapp获得与平板、pc上无差别的用户体验。因此它无法提供类似移动端原生控件外观和体验的app.

官方网站

Mobile Angular UI

这是为bootstrap和angular的粉丝而准备的。 通过 Mobile Angular UI ,可以通过bootstrap3和Angular 构建 移动应用。

Mobile Angular UI 提供指令可以构建移动端UI Component 例如 overlays, switches.sidebars,scrollable .

官方网站

结论

目前市面上最常用的几款开源的移动端框架,总体上来均不错,但如果是要追求最终app的视觉效果则Ionic与Onsen是较好的选择,它们的UI看上去更像原生控件。如果你是jquery的粉丝,并且不想尝试使用其他的那么可以选择jQuery Mobile 简单高效。
如果你熟悉angular与bootstarp那么Mobile Angular UI则是不错的选择。

除了开源的框架外还有一些企业级框架这些框架功能强大但需要相应的费用,比如Sencha Touch 与 Kendo UI 。


参考链接

[01] http://noeticforce.com/best-hybrid-mobile-app-ui-frameworks-html5-js-css

几款开源的hybird移动app框架分析的更多相关文章

  1. 推荐一款开源的C#TCP通讯框架

    原来收费的TCP通讯框架开源了,这是一款国外的开源TCP通信框架,使用了一段时间,感觉不错,介绍给大家 框架名称是networkcomms 作者开发了5年多,目前已经停止开发,对于中小型的应用场景,够 ...

  2. metasploit 一款开源的渗透测试框架

    渗透神器漏洞利用框架metasploit from: https://zhuanlan.zhihu.com/p/30743401 metasploit是一款开源的渗透测试框架软件也是一个逐步发展与成熟 ...

  3. 越折腾越好用的 3 款开源 APP

    高中的时候我特别喜欢捣鼓手机,然后我一个哥们儿在我的强烈推荐下买了个 HTC Dream(G1) 手机. G1 作为谷歌的第一个亲儿子,它出厂搭载的是 Android 1.5 系统,但当时已经出到了 ...

  4. 移动app框架inoic功能研究

    原生移动app框架inoic功能研究 本篇只侧重框架提供的功能和能力的研究,请关注后续实际部署使用体验. 一.inoic是什么? inoic是一个可以使用Web技术以hybird方式开发移动app的前 ...

  5. (转)12款开源JavaScript库

    JavaScipt几乎是所有前端开发人员必会的编程语言,并且,随着各种移动APP的串红,JavaScript还可以用来开发移动应用.除此以外,为了丰富前端/移动开发,有不少开发者推出了各种基于Java ...

  6. 开源巨献:Google最热门60款开源项目

    文章整理于互联网.本文收集了 60款 Google 开源的项目,排名顺序按照 Github ★Star 数量排列. 0.机器学习系统 TensorFlow  ★Star 62533 TensorFlo ...

  7. [转]Web App 框架选择之百度&腾讯

    百度的GMU GMU(Global Mobile UI)是百度前端通用组开发的移动端组件库,GMU是基于zepto的mobile UI组件库,提供webapp.pad端简单易用的UI组件.具有代码体积 ...

  8. 如果你不知道这11款常见的Web应用程序框架 就说明你out了

    本文推荐了11款常见的Web应用程序框架,并列出了相关的学习资料和下载文档.如果对这些项目还不熟悉,就赶紧学起来吧~ Rails Rails是Ruby on Rails的简称,是一款开源的Web应用框 ...

  9. 一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)

    在目前的软件项目中,都会较多的使用到对文档的操作,用于记录和统计相关业务信息.由于系统自身提供了对文档的相关操作,所以在一定程度上极大的简化了软件使用者的工作量. 在.NET项目中如果用户提出了相关文 ...

随机推荐

  1. [CentOs7]搭建ftp服务器(3)——上传,下载,删除,重命名,新建文件夹

    摘要 上篇文章介绍了如何为ftp添加虚拟用户,本篇将继续实践如何上传,下载文件. 上传 使用xftp客户端上传文件,如图所示 此时上传状态报错,查看详情 从错误看出是应为无法创建文件造成的.那么我们就 ...

  2. 使用hexo搭建github.io博客(一)

    使用github.io可以搭建一个自己的博客,把静态文件项目托管到github上,可以写博客,可以使用markdown语法,也可以展示作品.灵活性高.但是有较大的难度. node,git版本变化日新月 ...

  3. 数据结构与算法JavaScript (三) 链表

    我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构,也是一种比较简单的基于数组的顺序存储结构.由于javascript的解释器针对数组都做了直接的优化,不会存在在很多编程语言 ...

  4. [转]浏览器退出之后php还会继续执行么?

    原文链接:http://www.cnblogs.com/yjf512/p/5362025.html 前提:这里说的是典型的lnmp结构,nginx+php-fpm的模式 如果我有个php程序执行地非常 ...

  5. Python第一天 - set

    (一)初识set dict的作用是建立一组 key 和一组 value 的映射关系,dict的key是不能重复的.有的时候,我们只想要 dict 的 key,不关心 key 对应的 value,目的就 ...

  6. ES6 - Note5:Promise

    1.Promise介绍 Promise最早是社区提出和实现,后面ES6将其写入标准,并原生提供Promise对象,是一种异步编程的解决方案,具体的概念大家可以去查看相关的资料.传统上处理异步都是以ca ...

  7. objective-c 语法快速过(7)编译器特性ARC

    ARC(是编译器特性) ARC是自iOS 5之后增加的新特性,完全消除了手动管理内存的烦琐,编译器会自动在适当的地方插入适当的retain.release.autorelease语句.你不再需要担心内 ...

  8. struts2学习笔记--拦截器(Interceptor)和登录权限验证Demo

    理解 Interceptor拦截器类似于我们学过的过滤器,是可以在action执行前后执行的代码.是我们做web开发是经常使用的技术,比如权限控制,日志.我们也可以把多个interceptor连在一起 ...

  9. ACM-南京理工大学第八届程序设计竞赛-网络赛(2016.04.17)

    A.偷吃糖果Time Limit: 1000Ms Memory Limit: 65536KB Description小鱼喜欢吃糖果.他有两盒糖果,两盒糖果分别仅由小写字母组成的字符串s和字符串t构成. ...

  10. java.util.ConcurrentModificationException异常处理

    ConcurrentModificationException异常处理 ConcurrentModificationException异常是Iterator遍历ArrayList或者HashMap数组 ...