React Native vs. Cordova, PhoneGap, Ionic etc

最近在网络上看到(译)图解 React这篇介绍 React 的文章。用比喻以及插画的形式科普 React 的相关术语还是蛮有趣的。于是乎自己就翻译了文章原作者讲述 React 术语系列文章中的其余两篇——《What is React Native?》和《React Native vs. Cordova, PhoneGap, Ionic etc.》。本篇为《React Native vs. Cordova, PhoneGap, Ionic etc.》的译文,有翻译不对的地方欢迎指正!

上一篇文章中,我告诉过你,React Native 很棒,因为它允许我们使用原生 UI 构建应用程序。 React Native 应用程序的用户体验比使用 WebView UI 的用户体验要好得多。但“native”究竟意味着什么?什么是 WebView UI?为什么原生 UI 比 WebView UI 更好?React Native 如何与其他移动框架(如 PhoneGap,Cordova 和 Ionic)进行比较?

让我们现在深入研究这些问题。坐稳,出发啦!

学习目标

看完这篇文章后,我会让你回到这里。希望您能够轻松回答这些问题:

  • 什么是原生app?
  • 什么是 WebView UI?
  • 更原生的框架有哪些好处和缺点?那原生性较少的框架怎么样 ?
  • React Native与 Cordova 相比如何?

总之,什么是“native”app?

要了解这种“native”实际意味着什么,我们现在来讨论一下:

黑客帝国

我是黑客帝国的忠实粉丝,你也是吗?你知道,我们所见的现实实际上是一种模拟。有人提到,即使在电影里的 Zion 城市,一个人类曾经认为自己也是自由的最后一个城市,也是一个模拟。多层模拟现实的想法一直让我着迷——一个虚拟世界在另一个虚拟世界中作为模拟运行在第三世界里面 。

这很像我们的计算机(或手机)中的软件架构 。

软件是如何操作大量晶体管和电路的指令的安排,统称为硬件。直接在硬件上运行的原始指令对我们人类来说是难以理解的,特别是考虑到当今计算机的复杂性和规模。

为了使软件易于理解和可操作,计算机科学家将其分为多个层,这些层由运行在另一个框架之上的框架(让我们在这篇文章中简单地使用术语“框架”来指代具有某种结构的软件 )组成。在所有这些框架中,框架越接近硬件,我们就说它更“native”。

计算机中的原生含义

因此,应用程序的“原生性”实际上是一个相对术语。严格地说,我们不能说应用程序本身是否是原生的。我们只能说,与其他应用相比,这款应用更具原生性。例如,您可以使用C ++,Java(或Kotlin)或 Cordova 构建 Android 应用程序。 C ++ 应用程序是最原生的,Cordova 应用程序是最少原生的。 Java / Kotlin 应用程序介于两者之间。

更具原生性的app有什么优势

app有更多原生性或着较少的原生性都有各自的好处。更接近硬件意味着更多的自由,而更多的模拟(指较少的原生性)让您更舒适 。

使用更原生框架的程序通常可以更多地访问硬件功能,并且可以更自由地使用它们。它通常运行效率更高,因为不同语言之间的模拟和转换开销较低。但是现实中学习起来也会比较困难 - 代码通常更难以编写和理解。

另一方面,我们人类通常更容易在较少的原生性框架中编写代码。编码语言更容易理解,更简洁(需要更少的输入)。它的词汇量更接近我们的自然语言。它需要较少了解硬件的构成以及它内部的工作方式。还有一个好处就是,较少原生性框架中的程序通常更具可移植性 - 程序可以在完全不同的硬件平台上运行而无需修改,因为它的词汇和内部概念不包含任何特定于原始硬件的内容。然而,所有这些便利的代价是你通常会牺牲一些效率和自由。

移动开发框架集中营

在React Native之前,移动框架通常为两个阵营中的一个。

第一个是原生阵营,例如 Android 的 Java/Kotlin 和 iOS 的 Objective-C/Swift。在原生阵营中,应用程序速度快,可以访问丰富的硬件功能。用户界面是针对目标平台(Android 或 iOS)的定制,因此非常流畅且使用愉快。然而,所有这些优点仅限于一个平台。要构建应用程序,必须学习两种不同的框架,这使得学习曲线陡峭两倍。这尤其会让数百万网络开发人员落伍。

然后是另一个移动框架阵营,例如 Cordova/PhoneGap 和 Ionic。这些框架允许 Web 开发人员使用其现有的 HTML,CSS 和 JavaScript 技能构建移动应用程序。这些应用可以在Android和iOS(以及更多)上运行。但是,它们更加缓慢,并且对硬件功能的访问受限。最重要的是,这些应用程序的用户界面很糟糕!由于这些框架使用一个名为 WebView 的关键组件来呈现 UI,因此我们将它们称为 WebView 框架。

WebView 框架构建在原生框架之上。我们可以看到前者是在后者内部运行的模拟世界。这就是为什么他们有上述的好处和限制。

webview

为什么我们不能从中获益并避免两者的陷阱?这就是 React Native 要做的事情。

React Native 代表了移动框架的第三阵营。它的 UI 层比 WebView 框架更原生,而其余部分则处于相同的模拟级别,以实现其易用性。

React Native UI 比 WebView UI 更加原生

像 Cordova 这样的框架可以使用 Web 技术构建移动UI。他们是如何做到的呢?他们在每个应用程序中嵌入了一个名为 WebView 的网络浏览器!您在UI中看到的所有内容,按钮,菜单和动画都在浏览器的网页中运行。在模拟方面,Cordova 应用程序的 UI 是在 Web 浏览器中运行的模拟世界,Web 浏览器又是一个在原生系统内运行的模拟世界。

相比之下,React Native的 UI 是比 WebView 框架更接近原生的一层——它直接在原生系统内运行。

此结构确定了 React Native UI 的优点。 React Native 直接使用原生 UI 组件,而 WebView 框架尝试使用 HTML / CSS 中的 Web UI 模仿原生 UI 的外观。真实的东西或假的东西,你更喜欢哪一个?

根据经验,识别出使用 WebView 框架构建的应用程序并不困难。那些小东西,比如滚动加速,键盘行为,导航和UI的一般平滑度。如果他们没有完全本地化的行为,复杂性就会增加并导致用户感到沮丧。

React Native 使用 JavaScript 来使过程更加简单

另一方面,React Native 仍然允许我们用 JavaScript 编写应用程序,并使用类似于 HTML 和CSS 的语法来构建 UI。这无疑降低了网页设计师和 Web 开发人员的入门门槛。

必要时,React Native 提供了一种渗透到原生框架的方法,以实现我们希望在应用程序中实现的任何原生功能。这有点像在黑客帝国中拨打电话。

黑客帝国

那么 WebView 框架一文不值?

不,绝对不是。例如,如果您已经拥有一个 Web 应用程序,并希望尽快将其发布到应用程序商店。您愿意以最短的上市时间牺牲用户体验。

另一种情况是,如果应用程序中显示的内容主要是内容没有太多的交互性,那么将它放在WebView中并不是太糟糕。

但是,如果您的应用程序的用户体验很重要,如果应用程序中存在某些交互性,例如接受用户输入,拖放,滑动屏幕等,请务必考虑 React Native。因为你最不想要做的一件事就是使用 WebView UI 模拟原生 UI。

总结

好吧,我们已经看过“native”的真正含义,WebView UI 是什么以及为何 React Native UI 更好,React Native 如何与其他 WebView 框架(如 Cordova/PhoneGap 和 Ionic)进行比较。 你怎么看?您将使用哪个框架来构建您的下一个应用程序?

原文链接:React Native vs. Cordova, PhoneGap, Ionic etc.

作者: Linton Ye(a full-stack developer in BC Canada)

Donate comment here