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

相关文章

来自专栏编程

你知道Python很火!那你知道它有哪些好玩的库吗?

Python现在可谓是一股风潮来袭!很多这样的文章,小学生学Python,高考即将纳入高考,甚至还有一张试卷,确实现在Python的势头是非常的火,那么Pyth...

2825
来自专栏互联网数据官iCDO

智能分析工具PK:Tableau VS Google Data Studio

译者:吕东昊 审校:陈明艳 本文长度为3743字,预估阅读时间10分钟。 摘要:本文从数据连接器、数据处理、可视化等多个维度解析Tableau和 Googl...

3396
来自专栏Jerry的SAP技术分享

SAP成都研究院大卫哥:SAP C4C中国本地化之微信小程序集成

今天的文章来自Wu David,SAP成都研究院C4C开发团队的架构师,在加入团队之前曾经在SAP上海研究院工作,组内同事习惯亲切地称呼他为大卫哥。

722
来自专栏Flutter入门到实战

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

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

1253
来自专栏V站

SEO丨网站内容多少与收录多少PY关系分析

简单明了,直接从个人建站经历即可得知,当我们第一次接触网站的时候,百度搜索自己的网站,是空荡荡的一片,文章积累到一定程度时,一段时间停止更新后,收录量会上一个层...

1473
来自专栏较真的前端

[译] React Native vs. Cordova、PhoneGap、Ionic,等等

在前面的文章中,我曾说过 React Native 很棒,因为它能让我们使用原生 UI 来开发应用。React Native 应用的用户体验要比使用 WebVi...

1153
来自专栏phodal

写给前端工程师看的,移动应用选型指南

想来在这一个混合应用的项目上,我已经差不多做了一年了。加之,在上一个项目里,我做的是一个移动 Web 应用,从 Backbone 到设计基于 React 的原型...

1946
来自专栏IT派

Ionic vs React Native: 移动开发哪家强 ?

选择合适的平台是开发人员在创建移动应用程序时面临的主要问题之一。据统计,iOS 和 Android 两大巨头已经有超过了十年的竞争。为了从软件开发的预算效益和时...

3805
来自专栏FreeBuf

安卓端渗透工具DVHMA:自带漏洞的混合模式APP

DVHMA(Damn Vulnerable Hybrid Mobile App)是一个安卓端的混合模式APP,故意包含大量漏洞。其功能就是帮助安全研究员合法地对...

3334
来自专栏企鹅号快讯

从网站结构出发,提升搜索引擎的友好度

搜索引擎爬取网站内容都是从网站的结构出发,为了提升搜索引擎的友好的,优化网站结构是重点。和对待用户一样,对待搜索引擎也需要投其所好,才能获取它的友好度。 ? 1...

1846

扫码关注云+社区