资讯频道 → 移动开发
阅读更多

5顶
0踩

移动开发

原创新闻 性能、UX、跨平台：移动Web应用UI框架大比拼（上）

2014-12-24 14:41 by 正式编辑 cao345657340 评论(0) 有7007人浏览
Web 框架 性能 Ionic AngularJS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

摘要：仅限iOS或跨平台？力求打造惊艳的转换、动画效果和流畅的用户体验？想要快速部署产品？针对高端移动设备还是中低端？对比Ionic、Famo.us、F7、OnsenUI以及Angular Material Design，选择最合适的Hybrid App UI框架。

本文作者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，但几经发展，混合应用也在不断提升的过程中。

2014年最受开发者好评的混合应用UI框架

在过去，当进行移动应用开发时，大多数开发者都会使用jQuery库来打造动画效果，并自己创建CSS和HTML。这个套路用在网站开发商还挺不错，但对于移动应用开发而言却是绝对行不通的。从响应式、跨平台到原生应用质感，都得费一番功夫才能实现。如今这个时代，用户体验（UX）太重要了，如果他们觉得应用速度太慢，漏洞太多，质量太差，那你只能认栽。

而最近，混合应用和移动开发相当火热，很多公司也看到了商机。在去年，已有三大UI框架被列入了开发工具推荐名单，其他框架也将陆续加入，为混合应用带来质量优、效率高、性能好的用户体验。

1. Ionic Framework

整合了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正在完善名为“Ionic Creator”的IDE/GUI工具。通过它，在Ionic应用上拖放创建模板能更方便。



图：Ionic趋势




创建一个新的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的优劣势对比：



  • 评分：



2. Famo.us + AngularJS

以最炫HTML5 JavaScript框架著称的Famo.us可以说是专为提高应用性能而生，而此处中所讲的并非单纯的Famo.us框架，而是ThomasStreet开发的Famo.us&Angular整合版。用自主开发的JavaScript引擎结合CSS3 3D转换基础上的GPU加速，来打造60帧/秒（fps）的流畅动画效果，满足最佳用户体验的需求，绝对能让你的混合应用一瞬间高大上起来。



在渲染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）：


启动项目：



通过上面的步骤，在端口9000创建一个NodeJS服务器，随后便可编写Famo.us。打开浏览器，即可看到一个完整的Angular整合Famo.us的范例。

Famo.us包含了两个主要的“DOM”元素，分别为modifiers和surface。surface从根本上讲就是内容，也就是HTML元素，而modifier则是执行动画、移动或其他操作的对象，两者相辅相成。

  • Famo.us+ AngularJS的优劣势对比：



  • 评分：



最初使用Famo.us时并不觉得惊艳，直到后来在移动设备上测试，看到最终效果时才暗自叫绝。Famo.us的性能和灵活性非常棒，但呈现的学习曲线比较陡峭，而且文档也不够详尽和易懂。在框架使用过程中，很多时候都像是摸着石头过河，而具体的范例能帮助开发者更快掌握使用方法。

但即使Famo.us存在众多缺点，但打造复杂动画效果的优势让人难以拒绝。开发者应密切关注Famo.us的发展动向，这个框架成长得很快，也在日臻完善。
  • 大小: 24.3 KB
  • 大小: 11.8 KB
  • 大小: 57 KB
  • 大小: 11.4 KB
  • 大小: 41.1 KB
  • 大小: 36.8 KB
  • 大小: 7.8 KB
  • 大小: 13.4 KB
  • 大小: 22.8 KB
  • 大小: 35.1 KB
  • 大小: 2.3 KB
  • 大小: 15.8 KB
  • 大小: 19.8 KB
  • 大小: 11.1 KB
  • 大小: 52.9 KB
  • 大小: 2.3 KB
  • 大小: 7.8 KB
  • 大小: 6.3 KB
来自: CSDN
5
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 性能、UX、跨平台：移动Web应用UI框架大比拼

    仅限iOS或跨平台？力求打造惊艳的转换、动画效果和流畅的用户体验？想要快速部署产品？针对高端移动设备还是中低端？对比Ionic、Famo.us、F7、OnsenUI以及AngularMaterialDesign，选择最合适的HybridAppUI框架。本文...

  • 2015年最受开发者好评的混合应用UI框架大比拼

    在移动开发成为大势所趋之后，转战移动应用开发，在深度接触Hybrid App开发的同时，他也对几大开发者使用最广泛的框架进行了使用与对比，剖析优劣，供开发者们参考。 以下为译文： 在过去的两年里，我一直都在和...

  • 2014年最受开发者好评的混合应用UI框架大比拼

    2014年最受开发者好评的混合应用UI框架大比拼 本文作者Tal Gleichger是拥有8年实战经验的资深全栈Web开发者，也是SocialBelong的CTO及联合创始人。在移动开发成为大势所趋之后，转战移动应用开发，在深度接触...

  • 常用快速原型设计工具大比拼、原型设计工具哪个好用

    而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。 简单说，“原型”是在项目前期阶段的重要设计步骤，主要以发现...

  • 国产浏览器的创新之路，拼的就是用户体验

    关于浏览器的知识产权成为了人们热议的焦点，对于国产浏览器，很多人充满了焦虑和期待。开发一款有技术含量，赢得世界尊敬的浏览器...如何让更多的国人接受国产浏览器，其实，最终国产浏览器的竞争比拼的还是用户体验。

  • Hybrid选型和PhoneGap开发环境搭建

    简介 主流的 Hybrid App 现在有两种方案： ...大规模团队协作。...所以选型上就直接选择了 ...安装，非常不喜欢虚拟机，所以直接插上 ...然后一个很傻的，没有什么功能的...性能、UX、跨平台：移动Web应用UI框架大比拼

  • Mongodb从这里开始

    当然建立索引就意味着增加空间开销，我的建议是，如果你能把一个文档作为一个对象的来考虑，在线上应用中，你通常只要对对象ID建立一个索引即可，根据ID取出对象某些数据放在memcache即可。如果是后台的分析需要，...

  • 关于Mongodb的全面总结

    当然建立索引就意味着增加空间开销，我的建议是，如果你能把一个文档作为一个对象的来考虑，在线上应用中，你通常只要对对象ID建立一个索引即可，根据ID取出对象某些数据放在memcache即可。如果是...

  • MongoDB学习指导

    当然建立索引就意味着增加空间开销，我的建议是，如果你能把一个文档作为一个对象的来考虑，在线上应用中，你通常只要对对象ID建立一个索引即可，根据ID取出对象某些数据放在memcache即可。如果是后台的分析需要，...

  • 关于Mongodb的全面总结，学习mongodb的人，可以从这里开始！

    对于大多数的MongoDB的用户来说，MongoDB就像是一个大黑盒，但是如果你能够了解到MongoDB内部一些构造的话，将有利于你更好地理解和使用MongoDB。 BSON 在MongoDB中，文档是对数据的抽象，它被使用在...

  • MongoDB总结

    当然建立索引就意味着增加空间开销，我的建议是，如果你能把一个文档作为一个对象的来考虑，在线上应用中，你通常只要对对象ID建立一个索引即可，根据ID取出对象某些数据放在memcache即可。如果是后台的分析需要，...

  • MongoDB 全面总结

    当然建立索引就意味着增加空间开销，我的建议是，如果你能把一个文档作为一个对象的来考虑，在线上应用中，你通常只要对对象ID建立一个索引即可，根据ID取出对象某些数据放在memcache即可。如果是后台的分析需要，...

  • node-v6.11.1-linux-ppc64le.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • ArduinoESP32板卡支持包

    ArduinoESP32板卡支持包

  • Inno-Tasks-Test.zip

    无需在自定义页面中使用复杂的设置，而是使用Inno设置[Task]使安装更简单。

  • node-v18.14.2-headers.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • node-v6.15.0-linux-x86.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • 基于SSM+JSP的高校实验室信息化综合管理平台毕业设计(源码+录像+说明).rar

    基于SSM+JSP的高校实验室信息化综合管理平台毕业设计(源码+录像+说明).rar 【项目技术】 开发语言：Java 框架：ssm+jsp 架构：B/S 数据库：mysql 【演示视频-编号：417】 https://pan.quark.cn/s/b3a97032fae7

  • MOSFET损耗MOSFET计算损耗分析与工程近似计算等资料合集（10个）.zip

    MOSFET损耗MOSFET计算损耗分析与工程近似计算等资料合集（10个）： (MCD)MOSFET开关损耗的计算.pdf (核心)BoostPFC电路中开关器件的损耗分析与计算(1).pdf AN-6005.pdf AN-6005_Switching_Loss_Calculation.xls dvdt引发的MOSFET误导通分析.pdf MOSFET损耗计算.pdf MOSFET损耗计算.zip MOSFET损耗详细计算过程.pdf MOSFET的损耗分析与工程近似计算.pdf 《MOSFET损耗计算》操作指导书.pdf 大功率MOSFET的功耗计算.docx 张兴柱之MOSFET分析.pdf 理解功率M0SFET的开关损耗1.pdf

  • node-v7.0.0-linux-ppc64.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics