跨平台 App 开发技术方案汇总

跨平台 App 开发有哪些技术方案,各有哪些优缺点?是否需要从原生 App 开发切换到这些跨平台的方案上来?切换过去能节省多少工作量?

如果你有这些疑问,这篇文章有你需要的信息。

Hybrid 技术

这类技术,使用 HTML/CSS/JavaScript 等前端技术来构建 App。利用 JSBridge 获取部分访问原生 API 的能力。最有代表性的是 PhoneGap,它是 Adobe 收购一家开源创业公司后推出的平台。这个链接有 PhoneGap 的一些历史信息。

这类平台的目标是保持大部分代码跨平台共用,涉及到平台不共用的 API (比如 GPS 接口,iOS 和 Android 肯定是不一样的),则由 PhoneGap 平台通过 JSBridge 提供。除此之外,还有一些明显的优点:

  • 开发效率较高:使用 HTML/CSS/JavaScript 构建界面的效率要比原生 App 速度快很多。而且前端开发有一堆现成的框架和开源库可以直接使用。
  • 即时更新:有 Bug 可以快速更新,不需要发布新 App,只需要更新服务器上更新相关的 HTML/CSS/JavaScript 即可。可以绕过 AppStore 的上架认证时间。
  • 开发门槛低:对于前端开发工程师,可以快速转岗,开发出可用的 App,不需要对 iOS 平台和 Android 平台有太深入的了解。

这类平台的硬伤是:

  • 单线程:JavaScript 在 WebView 里执行时是单线程的。对系统并发能力有较大的影响。
  • 性能低:大概只能达到原生 App 70% 的流畅度。

这篇文章对几个热门的 Hybrid 平台进行了对比和介绍。

为了克服 Hybrid 的缺点,目前工程应用上典型的做法是,以原生 App 为主,把易变的逻辑,以及界面,不涉及性能瓶颈的部分使用基于 WebView 的 Hybrid 技术来开发。

准原生平台

为了解决 Hybrid 的问题,一些其他的方案逐步流行起来,最火的要算 React-Native,它是 Facebook 基于其前端框架 React 之上构建的跨平台 App 开发构架。

这类平台的特点是,只使用 JavaScript 来构建界面,但实际上构建出来的所有界面都是系统原生控件。这是和 Hybrid 平台最大的区别。在 Hybrid 平台,一个按钮就是 HTML 构建出来的,但在 React-Native 平台,一个按钮是在各自的平台 (Android/iOS) 上以原生控件的形式渲染出来的。

这类平台最大的优势是:

  • 跨平台开发界面及业务逻辑:以前端工程师熟悉的构架和技术,以一致的方式构建界面和业务逻辑。
  • 即时更新:可以把业务逻辑放在 JavaScript 里,这样就可以直接在线更新功能。
  • 性能较高:比 Hybrid 性能高,大概能达到原生 App 90% 的流畅度。
  • 开发效率较高:可以使用前端技术快速构建界面。比如,熟悉 React 框架的人,可以无障碍地在 React-Native 下构建界面和业务逻辑。

这类平台和 Hybrid 相比,跟原生平台靠得更近一些,更多地依赖原生平台的一些知识。比如,很多机制,其实还是要分 iOS 平台和 Android 平台的。即无法做到真正的跨平台开发,在利用 React-Native 这类构架时,还是需要对目标平台有较深入的理解。

除了 React-Native 之外,比较著名的还有 Weex 这是 alibaba 出品的一个构架,它是基于最近火热的前端构架 Vue.js 的。另外一个是 NativeScript,这是基于老牌的前端构架 Angular
之上构建的。

大家注意到,这些热门平台都是基于一个热门的前端构架来构建的。从这一点也可以看到这种类型的构架的目标,就是让前端开发人员可以在其原有知识体系里,快速开发 App ,并且使用自己熟悉的语言 JavaScript 来处理业务逻辑。至于核心的代码以及性能相关的代码,还是需要使用原生编程语言 (OC for iOS, Java for Android) 来编写,不同的平台最终向上层提供一致接口。这样,上面界面部分代码,甚至一些逻辑代码就可以跨平台共用了。

原理上,JavaScript 怎么样和原生平台交互呢?

JavaScript 是脚本语言,可以在运行时解释并执行。这类平台上写出来的 JavaScript 代码最终是由原生平台里面的 JavaScript 引擎来负责执行的。那么 JavaScript 如何调用原生代码呢?答案是利用语言的元编程能力,OC 和 Java 都具备一定的元编程能力,这样 JavaScript 只要知道原生平台的类名称,函数名称,就可以调用到原生平台的这个函数了。

关于这个课题,这里有篇文章写得深入浅出。想要理解原理的同学,推荐阅读。

关于这几类平台的性能对比,这篇文章有非常详细的数据。

总结

Hybrid 技术的愿景是真正达到一次开发,跨平台运行,但其性能是其最大的瓶颈。准原生平台的目标是让前端开发人员,基于其熟悉的前端框架,快速开发 App 的界面和业务逻辑,且其性能和原生 App 很接近。当使用准原生平台开发 App 时,除非你是全栈工程师,或者大体了解 iOS/Android 平台的一些开发知识,否则很大概率需要 iOS/Android 原生平台的开发人员配合。

以下几个场景可以考虑使用 React-Native 之类的准原生架构来开发:

  • 熟悉前端技术构架:比如熟悉 React ,则可以考虑使用 React-Native 来进行开发。如果熟悉 Vue.js ,可以考虑选择 Weex 来进行开发。
  • 对开发效率有较高的要求:特别是那些互联网创业公司,如果刚好又是个全栈工程师,可以考虑用这种技术来来提高整体开发效率,有可能一个人把 iOS/Android App 全包圆了。
  • 应用非常频繁地更新:不管是修复严重 Bug 的 HotFix ,还是业务场景快速变化,我们在等待 AppStore 审核的时候,感觉是度日如年。如果这个痛点让你痛不欲生,不仿考虑一下准原生平台方案。

反过来,如果你对前端开发和构架不熟,切换到任何类型的跨平台技术方案上来,成本都将是巨大的。从头学习和适应全新的开发模式,虽然最后可能提高了效率,但学习时间成本可能会是不可承受这重。至少短期来看,性价比不高。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容