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 条评论
登录 后参与评论

相关文章

来自专栏京东技术

老板们不知道的秘密:开启自动化测试,让我们一起以逸待劳

我认为所有的UI自动化测试都分成基本的三个步骤:定位元素,操作元素和执行断言。大家在做UI自动化不同的主要是方案的选型,封装优化的方式不同。目前移动App的更新...

1213
来自专栏FreeBuf

甲方安全中心建设:代码审计系统

纵观甲方的安全体系建设,最开始和最重要的那一部分就是代码安全。甲方公司内部有很多项目,每个项目都由不同的开发人员进行开发,所以项目开发水平也是参差不齐,也就是说...

752
来自专栏進无尽的文章

扒虫篇-苹果审核被拒原因小汇

很多时候,我们的美美滴开发完了,并测试完成之后准备打包上传到APPStore,却发现被拒绝了,各种各样的理由让我们触不及防,一直想整理汇总一下却一直因为各种事耽...

952
来自专栏企鹅号快讯

首款采用Kotlin语言编写的恶意APP现身Google Play商店

“用指尖改变世界” ? 趋势科技的安全研究人员在上周发现了一款名为“Swift Cleaner”的恶意应用程序,他们认为这可能是首款使用开源Kotlin编程语言...

1936
来自专栏张戈的专栏

WordPress 4.0 Benny简体中文版现已开放下载

昨天,收到了 WordPress 官方邮件,告知 4.0 已发布,要我确认中国联盟的导航插件是否兼容新版本。 ? 不过后台看了下,却没提示更新。直到今早才在后台...

3487
来自专栏生信技能树

计算资源及编程-仅针对生信人员

第 5 章 计算资源及编程 5.1 硬件配置 理论上在个人Windows电脑上面做生物信息学数据分析是不实际的,因为太多的生物信息学相关软件的开发者对windo...

38010
来自专栏携程技术中心

Qnext大会 | React Web——浏览器端复用React Native代码解决方案

原创专栏|杨乾军 ? 自2008年开始接触前端,至今已有8年的前端开发经验,是一名资深前端攻城狮。目前在去哪儿平台事业部前端架构组。 1 背景 ? 一直以来...

3086
来自专栏腾讯Bugly的专栏

腾讯祭出大招VasSonic,让你的H5页面首屏秒开!

作者简介: 陈志兴,腾讯SNG增值产品部高级工程师,主要负责手Q个性化业务、手Q WebView等项目。喜欢阅读优秀的开源项目,听听音乐,偶尔也会打打竞技类游戏...

3336
来自专栏BIT泽清

这些年iOS AppStore 套壳开发上架从棋牌类到彩票类在到如今的金融原油期货类App过程

下面给大家讲讲作者我“ios开发子”这些年iOS AppStore 套壳开发上架过程-从棋牌类到彩票类在到如今的金融原油期货类App-过程中所遇到的一些开发问题...

3613
来自专栏FreeBuf

JS投毒的另一种尝试

半个月前看了‍‍‍EtherDream写的那篇wifi流量劫持和JS投毒,随手就在公司实验室里折腾了一下,头一次接触这个领域,感觉挺新鲜的。然后又看到sh4do...

44410

扫码关注云+社区