欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  资讯频道

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

程序员文章站 2022-04-22 21:56:56
...
摘要:仅限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。

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

什么是Hybrid App?

混合应用(Hybrid App)相当于是利用Web开发技术编写的原生应用,如HTML5、CSS、JavaScript都是进入原生容器(Native Container)的比较常用的语言,原生应用包含了一个链接到HTML文件的WebView隐藏浏览器。而使用Cordova、PhoneGap或其他类似的解决方案,不但使整合HTML和原生代码成为可能,甚至不费吹灰之力便能做到,也让在应用商店中部署App更加容易。

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

图:混合应用的发展趋势

没错,开发者可以创建一个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)也相当活跃,甚至比*更能帮助开发者解决技术上的难题。目前,Ionic 1.0仍处于测试阶段,虽然存在Bug,但越来越流畅。Ionic团队也在努力提高框架的效率和性能,尽可能实现原生质感。

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

Ionic还为开发者提供了Ionic Box来帮助其能够快速入门,对于微软Windows用户来说也省却许多麻烦(或者可以直接使用Linux),启动Ionic应用花费的时间最多5分钟而已。此外,Ionic同样提供了诸多工具,以适应iOS、Android和其他操作系统的不同需求。目前,Ionic正在完善名为“Ionic Creator”的IDE/GUI工具。通过它,在Ionic应用上拖放创建模板能更方便。

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

图:Ionic趋势


性能、UX、跨平台:移动Web应用UI框架大比拼(上)

创建一个新的Ionic项目:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

提供多种模板来供开发者启动左侧导航菜单、标签或空项目,举例如下:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

结果:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

至此,便大功告成,开发者可运行自己的Ionic应用,只需三步即可完成创建,随后便可删除或进一步开发应用,而其项目结构亦是简单易懂:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

如果已经掌握PhoneGap和Cordova,那么设置平台并运行应用就更小菜一碟:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

同样的步骤也适用于Android系统,当然,所有支持Cordova的操作系统,包括iOS、Android、BlackBerry、Windows Phone、Palm webOS、Baday以及Symbian都在适用范围内。
当我首次使用Ionic时,我实在不敢相信短短3分钟就能诞生一个可运行的应用。Ionic不但能节省构建应用架构的时间,还能帮助改进不尽如人意的架构,并替换之前的CSS文件(SASS)。此外,Ionic一整套丰富的工具,从“下拉刷新(Pull-To-Refresh)”到“无限滚动(Infinite Scroll)”应有尽有,能极大地节省开发者的时间。

  • Ionic的优劣势对比:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

  • 评分:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

2. Famo.us + AngularJS

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

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

在渲染DOM元素方面,Famo.us的方法也独树一帜: 干脆放弃DOM,转而创建自己的DOM渲染树。效果很不错,值得称赞。

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

由于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):
性能、UX、跨平台:移动Web应用UI框架大比拼(上)

启动项目:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

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

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

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

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

  • 评分:

性能、UX、跨平台:移动Web应用UI框架大比拼(上)

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

但即使Famo.us存在众多缺点,但打造复杂动画效果的优势让人难以拒绝。开发者应密切关注Famo.us的发展动向,这个框架成长得很快,也在日臻完善。