在开发阶段,跨平台开发App面临一个很重要的决定,到底是应该使用原生技术开发应用还是使用hybird或者基于web的技术。这些问题将会影响着大量的开发工作-也就是说,最近选择继续使用原生的方法开发应用意味着让你的开发团队同时使用 Objective C/Swift (iOS)和 Java (Android )开发功能。这对于开发原生的应用并没有什么可以讨论的。下面我们将看到用javascript通过使用React Native或者使用Angular2和NativeScript联合去开发跨平台的原生应用。我们可以看一下这两种方式都提供哪些方法,然后去比较两者,希望能给开发者选择技术方式有一定的启发。

为什么选择Native?

Native App 比hybird和基于H5的应用有很多优点。首先,Native 应用更接近设备底层,意味着原生应用代码的执行效率比hybird框架高。另外,Native应用还可以让你使用很多hybird框架用不了的特性,你可以使用更多特定的平台下很多特性,特别是与硬件结合的部分可以在一组源代码中完成,而不用在hybird应用中包含自定义的模块或者非web的组件。这些特性能提供一个良好的用户体验,所以使用Native方式开发应用变动越来越流行。通过使用native组件的框架,我们可以减少原生app开发的花费。

React Rective

在2015年3月,Facebook推出了React Native,允许开发者使用相同的javascript代码运行在iOS或者Android上的框架。React是一组具有最小的外部副作用和对DOM依赖的一系列函数。React能够将使用DOM作为主要的渲染模型,这种设计模式使得替换本地组件变得简单,而不是使用原来的那种web视图和HTML组件的方式。因此,使用相同的代码应用可以在iOS上使用UIAlertView上使用AlertDialog 实现警告弹窗,而不用写任何额外的代码去支持UI视图。这些特性都使得React专注于速度和脏渲染相结合,你可以用一个代码库快速构建跨平台的移动应用。

AngularJS 2 + NativeScript

Telerik的团队最初集成Angular开发了Kendo UI库。它作为一个跨平台的开发工具,为开发hybord应用和H5应用提供了一个一致性的跨平台UI体验。当Telerik开始使用NativeScript来提供真正的跨平台应用时,他发现Angular 1.x对DOM的紧耦合的依赖性在用Angular开发应用创建native UI映射时呈现的问题。然而,随着Angular2的到来,一切都变了。Angular2对DOM的松耦合允许NativeScript开发者和React Native一样的机制-抽象视图和组件渲染,这使得DOM不再是必需的。Angular2很容易和NativeScript集成,允许你开发一样风格的native app运行在所有的手机平台。

两者比较

在比较React Native和NativeScript 这两个以解决native开发为重心的解决方案时,关键是看它们是怎么样从相同的代码构建应用的。NativeScript 采用了整体性的解决方案,真正实现了"一次编写,到处运行"。这意味着许多UI元素会降低级别,因为NativeScript尝试在多个平台间可以透明和可重复的方式管理这些UI组件。随着Angular2的加入,你可以通过Angular核心的UI指令的优点去创建跨平台的应用,这些指令可以比在多个应用之间创建UI组件更具有一致性。

在辩论的另一方是React Native,它选择拥抱-而不是隐藏其多平台的性质。这意味着虽然您可以以平台无关的方式编写React Native代码,但你也可以访问特定平台的UI控件。另一方面,React的目标是抽象业务逻辑,同时支持每个平台之间的UI呈现固有的差异,而NativeScript专注于创建一个单一的开发体验而与平台无关。React的重点放在高性能的渲染和执行上,你可以很轻松的创建高性能的跨平台应用,这些应用可以在相同的代码库上运行并且随意使用特点平台的组件。使用哪种方式应该依据你的应用综合考虑,相对通用的数据驱动的应用程序可能更欢NativeScript,因为它的UI通常不足以满足以平台为中心的应用。尽管是这样,在web应用中使用Angular2来驱动的应用架构也会比React Native有很多性能优势。不管怎么样,使用Angular2和NativeScript需要去使用传统的Angular架构去构建你的代码,但是React Native可以不必如此。另外,使用NativeScript和Angular2构建应用,会向应用程序的管道中引入附加的依赖关系,这个问题不像React Native那样明显,它可以处理React框架中的所有跨平台功能。

结论

跨平台开发已经在迅速的发展,最近跨平台和原生开发框架的激增只会继续这种势头。选择React Native和Angular2结合NativeScript,换一种方式说,就像选择React和Angular框架自身。React被设计作为一个快速轻量的渲染框架在大型应用中使用,React Native延续了这种设计设计的模式。另一方面,Angular是一个有意识的应用程序开发框架,它具有开发应用程序的“正确方法”,Angular 2和NativeScript的集成进一步减少了小型的设备集成的费用。因此,两者之间的选择在很大程度上是相同的。你的应用是集中在大量的渲染复杂UI和传统元素吗?如果是,React Native比较适合你。但是,如果有一个声明式用户界面模式的单一跨平台代码库的应用程序架构,那么结合Angular2和NativeScript可以帮助你实现在采用Angular用于Web应用程序,同时保持类似的开发模式和程序体系结构。

原文链接

Angular2, NativeScript 和 React Native比较[翻译]的更多相关文章

  1. ios – React native链接到另一个应用程序

    如果是错误的,有人知道如何调用正确的吗?

  2. ios – React Native – 在异步操作后导航

    我正在使用ReactNative和Redux开发移动应用程序,我正面临着软件设计问题.我想调用RESTAPI进行登录,如果该操作成功,则导航到主视图.我正在使用redux和thunk所以我已经实现了异步操作,所以我的主要疑问是:我应该把逻辑导航到主视图?我可以直接从动作访问导航器对象并在那里执行导航吗?.我对组件中的逻辑没有信心.似乎不是一个好习惯.有没有其他方法可以做到这一点?

  3. 在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么?

    我已经挖掘了很多帖子试图使用cocoapods为本地ios库设置一个反应原生项目,但我不可避免地在#import中找到了丢失文件的错误.我的AppDelegate.m文件中的语句.什么是使用反应原生的可可豆荚的正确方法?在这篇文章发表时,我目前的RN版本是0.43.4,而我正在使用Xcode8.2.1.这是我的过程,好奇我可能会出错:1)

  4. ios – React Native WebView滚动行为无法按预期工作

    如何确保滚动事件的行为与ReactNative应用程序中的浏览器相同?

  5. ios – React Native – BVLinearGradient – 找不到’React/RCTViewManager.h’文件

    谢谢.解决方法几天前我遇到了完全相同的问题.问题是在构建应用程序时React尚未链接.试试这个:转到Product=>Scheme=>管理方案…=>点击你的应用程序Scheme,然后点击Edit=>转到Build选项卡=>取消选中ParallelizeBuild然后点击标志添加目标=>搜索React,选择第一个名为React的目标,然后单击Add然后在目标列表中选择React并将其向上拖动到该列表中的第一个.然后转到Product=>再次清理并构建项目.这应该有所帮助.

  6. ios – React Native – NSNumber无法转换为NSString

    解决方法在你的fontWeight()函数中也许变成:

  7. ios – React native error – react-native-xcode.sh:line 45:react-native:command not found命令/ bin/sh失败,退出代码127

    尝试构建任何(新的或旧的)项目时出现此错误.我的节点是版本4.2.1,react-native是版本0.1.7.我看过其他有相同问题的人,所以我已经更新了本机的最新版本,但是我仍然无法通过xcode构建任何项目.解决方法要解决此问题,请使用以下步骤:>使用节点版本v4.2.1>cd进入[你的应用]/node_modules/react-native/packager>$sh./packager.s

  8. 反应原生 – 如何通过Xcode构建React Native iOS应用程序到设备?

    我试图将AwesomeProject应用程序构建到设备上.构建成功并启动屏幕显示,但后来我看到一个红色的“无法连接到开发服务器”屏幕.它表示“确保节点服务器正在运行–从Reactroot运行”npmstart“.看起来节点服务器已经运行,因为当我做npm启动时,我收到一个EADDRINUSE消息,表示该端口已经在使用.解决方法从设备访问开发服务器您可以使用开发服务器快速迭代设备.要做到这一点,你的

  9. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  10. 如何为iOS的React Native设置分析

    所以我已经完成了一个针对iOS的ReactNative项目,但是我想在其中分析.我尝试了react-native-google-analytics软件包,但是问题阻止了它的正常工作.此外,react-native-cordova-plugin软件包只适用于Android,因此插入Cordova插件进行分析的能力现在已成为问题.我也没有Swift/ObjectiveC的经验,所以将完全失去GA的插入.有没有人有任何建议如何连接GoogleAnalytics的ReactNativeforiOS?

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部