ionic hybrid app:产品还是玩具?

前言

提到跨终端应用开发,很容易想到最近很火的React Native。使用React Native开发出的APP本质上是Native APP。在跨端应用开发这一领域内还有另一块:Hybrid APP。本文研究的inoic framework就是一种hybrid app的开发框架。

1. ionic基本组成

在之前,ouven的一篇文章介绍了ionic frameword的基本构成,和在windows系统上的环境搭建。本文在此基础了,对ionic frameword(后面简称 ionic)的基本组成作一些补充和总结。下图展示了ionic的基本组成:

在上图中,ionic所包含的范围为上图中蓝色部分。这四个部分都是现有的工具或技术,各个部分分别负责如下模块:

  • Angular & Angular UI: 用于构建APP页面的框架,以及组件UI。
  • Sass:用于编写和编译页面和组件样式。
  • iconfont:用于iconfont图标。
  • Cordova:用于将HTML, JS, CSS打包编译为不同终端的安卓包,并且为js与对应平台上的native api提供交互能力。

上面列了这么多,好像都是现有的技术和工具,那么ionic它本身到底做了什么呢?ionic的一个官方介绍文章里有句话概括了:

Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like "Bootstrap for Native,"

ionic主要职责是作为app的前端UI框架,提供基本的样式以及各种UI组件,号称相当于native版的Bootstrap(虽然严格来说ionic构建的APP不是真正的Native APP)

2. ionic安装和使用

关于ionic的安装,在之前提到的ouven的一篇文章中有着较为详细的介绍,这里不再重复。对于ionic的使用,下面的图(图片源自The Ionic Framework Cheatsheet)有助于初次接触hybrid开发和调试的同学理清流程,并快速上手:

上图描述了在安装好了ionic的所有环境之后,如何通过ionic cli的各个命令从零开始构建一个demo app。

3. 基于Cordova的 Hybrid APP

  • Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。(以上描述摘自百度百科)
  • Cordova最早的名称是PhoneGap,后来被Adobe收购,Adobe将PhoneGap的核心代码抽出,贡献给Apache作为开源项目。Adobe在Cordova的基础上加上自己的特性和生态,继续沿用PhoneGap的名字。而原本的PhoneGap的核心代码以Cordova这个名字作为Apache的一个开源项目。目前Cordova与PhoneGap的关系类似于Webkit和Google Chrome的关系。
  • Cordova支持多个终端平台,可以凭借这一点,实现一处编写前端代码,在各种平台上处处运行。目前Cordova支持的平台如下: iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
  • 基于Cordova的Hybrid APP的基本原理如下图(图片是较早时候的PhoneGap,与Cordova原理相同):
  • Hybrid APP无法直接调用Native的API,而是通过WebView和Cordova的Plugins来调用。通过WebView能调用的系统功能只有WEB页面的一些基本功能,如页面展示和HTTP请求。如果要调用系统的其它一些Native功能,比如Camera,震动等等,则需要通过Cordova来实现。Cordova有一些核心的plugins来向js提供一些常用的Native能力,另外Cordova也可以通过自定义Plugins来扩展对Native功能的使用能力,所以理论上,只要有相应Plugins的支持,通过Cordova可以使用Native的所有功能。
  • 虽然通过Cordova能够实现Web技术到APP的功能实现,但是这种基于WebView的Hybrid APP在性能上有着天生的缺陷。既然ionic是基于Cordova构建的,那么其性能也逃不出Hybrid APP的局限,使用ionic开发出来的APP必然和Native APP有着差距。那这种App是否有成功产品(或者说成功的产品)的能力呢?异或只是前端粉们的一个即兴而作的玩具?

4. ionic的适用范围

对于上文中的问题,ionic的官方博客中专门有一篇文章有说明。(点我是原文)原文较长,这里抽出最后关键的总结:

That said, Ionic is built for the devices of today and the future, not for devices built years ago. It’s focused on native app development and not mobile website creation.

ionic声明了自己是做APP的而不是做website的(毕竟很多Cordova Native API无法在手机browser上使用),最重要的,ionic果断抛弃了屌丝机,拥抱高端机。 ouven的文章里已经总结了ionic的优缺。抛开目前hybrid app的性能问题,ionic确实为前端人员构建跨端应用提供了极大的便得,而且有活跃的社区用于分享技术和成果,有丰富的教程与指引。如果按照ionic对html5以及未来手机性能的乐观展望,目前的玩具说不定真能成为将来的产品。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏量子位

5天被迫喊停!Win 10史上最短命系统升级:删文件、无法联网,误报CPU使用率

此次更新的版本号为1809,遍地是坑:删除私人文件、CPU使用情况算错、微软App连不上网……很多抢先更新的用户,现在还没爬上来。

1321
来自专栏数据和云

静默错误:为什么看了那么多灾难,还是过不好备份这一关?

可是毕竟广告好不好,还要看疗效,9个9的可靠性,你也永远无法论证你不是那 0.00000001%。

2111
来自专栏dotnet core相关

WCF入门(11)

今天11集,视频总共11分41秒,够短的,内容也很简单。上集的例子上也讲过一些他们的区别,这集来总结一下。

854
来自专栏Timhbw博客

Mac必备软件(3)-程序猿从入门到日常

2016-07-3018:40:21 发表评论 1,125℃热度 Alfred 3 欧路词典 Mou GitBook 网易云音乐 BBEdit ...

3585
来自专栏ImportSource

为什么看起来不是很复杂的网站,淘宝、腾讯却需要大量顶尖高手来开发?

来源:知乎 链接:http://www.zhihu.com/question/20303645 为什么很多看起来不是很复杂的网站,比如 Facebook 需要大...

3427
来自专栏FreeBuf

揭秘:充电宝是如何盗取你的个人隐私的?

中午吃完饭,看到一个微博中别人转的央视新闻《别被改装充电宝盗取隐私》觉得又是啥高大上的东西上了央视,看完后才知道是数字公司的某研究员做的伪装充电宝盗取隐私的玩意...

2017
来自专栏知晓程序

如何在微信群里发通知?这个方法特别好用

今天,「知晓程序」推荐的小程序「群里有事」,也许能解决这个问题。在这里,你不仅可以发布通知、活动,而且它有一种强大的魔力,吸引大家去查看。

731
来自专栏工作随笔

改VB.NET“偷懒”技巧

【开篇胡侃】虽然搞软件开发很多年了,但似乎从没有动手写过什么(很丢脸的感觉),因为,我的精力都献给了我的其他爱好,比如健身、美食、旅游等等,反而把自己最该专注的...

28613
来自专栏Crossin的编程教室

3分钟破译朋友圈测试小游戏

最近,朋友圈时不时会流行起某个测试类小游戏,比如你的性格图谱啦,你是三体中的哪个角色啦,你有什么超能力啦……昨天晚上在某个群里,又被一个测测你是什么书的小游戏刷...

4227
来自专栏Flutter入门到实战

跨平台开发框架和工具集锦

本文版权归作者AWeiLoveAndroid所有,未经授权,严禁私自转载。转载请声明原文链接和作者信息。

3013

扫码关注云+社区