比较开发人员跨平台框架的经验

2020年12月30日11:06:20 发表评论 35 次浏览

本文概述

跨平台的移动应用程序开发允许你仅使用一个技术堆栈就可以为多个平台(例如iOS和Android)构建移动应用程序。

这意味着你不必创建应用程序的多个版本(每个版本都使用针对每种平台的专用本机语言编写), 而是可以编写一次代码并将其一次部署在多个平台上。

什么是开发者经验?

开发人员体验(缩写为DX)描述了开发人员在使用客户端库, SDK, 框架, 开源代码, 工具, API, 技术或任何服务时的体验。

DX共享了用户体验(UX)设计中的一些想法和理念。

这有何不同?

与单个冗长的指令列表以实现相同的结果相反, 使用单个终端命令部署Web应用程序的机会表明可以被视为更好的开发人员体验。

DX是促使开发人员使用工具并坚持使用的潜在因素之一。

这篇文章根据对开发人员非常重要的四个因素, 比较了一些流行的跨平台移动框架的DX:

  • 设定
  • 文献资料
  • 热装
  • 调试

我们的比较将集中在5个跨平台框架上:

  • 反应本机
  • Flutter
  • Xamarin
  • Ionic
  • 本机脚本

入门

建立框架是它的第一印象。入门非常容易, 这是DX首先影响框架的工作流程。

在这里, 我们将比较不同移动框架的设置过程, 而不考虑Android Studio和/或XCode的设置, 因为这基本上是所有这些都必须执行的步骤。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

比较开发人员跨平台框架的经验1

反应本机:使用世博会, React Native非常容易上手。

安装NodeJS和Expo之后, 只需键入一个命令即可开始使用(无需安装Android Studio或Xcode, 并假定你已安装有Expo应用的设备)。起始模板带有漂亮而简单的界面, 以帮助指导开发人员。

你也可以使用RN命令行工具启动不带Expo的React Native应用。使用这种方法来运行我们的RN应用并不需要太多工作。 CLI工具可帮助开发人员足够快地获取其第一个屏幕应用程序。

仅当我们需要将RN集成到现有的本机应用程序中或为树外平台。但是, 这被认为是高级实践, 在此比较中不应将其考虑在内。

React Native一直做得很好, 因此他们甚至发布了反应型医生软件包以帮助验证计算机上的设置。

Flutter:安装Flutter SDK就像在计算机上安装软件包一样容易。他们的指南显示了四个易于遵循的简单步骤。即使这会给你带来麻烦, Flutter还是可以满足你的要求。

他们以关心DX闻名。他们集成了一个名为扑医生进入他们的CLI, 以帮助你获取有关在框架工具链中哪些有效以及哪些无效的信息。

还必须在代码编辑器中配置Flutter工具, 以帮助提供更好的DX。这说明了设置中的一些其他步骤。这些步骤是可选的, 但它们有助于获得Internet上最好的Flutter评论。

Flutter的所有功能都让人感觉"开箱即用"。仅使用Flutter SDK随附的软件包即可构建更复杂的应用程序。

Xamarin:如果你是使用Visual Studio IDE的C#开发人员, 那么安装Xamarin肯定就像在公园里散步一样。但是, 如果你没有Visual Studio, 则可能会发现VS2019安装和Xamarin工具很乏味。

安装Xamarin之后, 你可以通过Visual Studio入门GUI启动应用程序。在这里, 你只需选择移动应用程序, 然后从提供的模板中选择一个启动模板(主-详细信息, 选项卡式, 外壳和空白)。然后选择平台, 单击"继续", 等待其初始化。

Ionic:从v1开始, Ionic一直非常容易上手。现在我们是v5, 而且变得越来越容易。

它分3个步骤进行:使用Node安装Ionic, 运行并遵循以下提示ionic start myApp <模板名称>(他们为你提供了3个模板:空白, 选项卡和侧面菜单), 最后使用离子发球.

在这里, 默认应用程序看起来像移动网站一样在你的浏览器中提供服务, 但这几乎是构建后该应用程序的外观。

同样重要的是要注意Ionic拥有v5, 漂亮直观的启动向导仅使用一个命令行指令, 即可帮助你获得与上述相同的结果。

本机脚本:他们有两种入门方法:快速设置和完整设置。快速设置过程类似于带有Expo的React Native-在物理设备上下载一个应用程序, 然后React Native通过链接连接到开发终端, 我们可以开始使用我们的应用程序(无需安装Android Studio或XCode) 。

完整设置也很容易, 因为它们提供的链接可与你的OS终端一起很好地安装框架。而且, 像Flutter一样, 它们具有可通过以下方式访问的Doctor工具:tns医生, 它可以验证你计算机上的设置。

注意

:

应该注意的是, 大多数快速设置在工作流程上都有一些限制。例如, 对某些本机插件的访问受到限制, 有时无法进行单元测试(对于NativeScript), 并且某些资源(启动画面, 图标)不可访问。

文献资料

任何开发人员都可以承认, 有时由于易于使用该工具的手册而爱上了该工具。

反应本机:尽管最近对React Native的文档进行了一些重大改进, 但是React Native开发人员很可能倾向于从博客文章, 在线教程和课程等资源中获得一些高级主题。

这似乎与以下事实有关:React Native主题从中级到高级要求比其核心API提出的要求更多(状态管理, 导航, 动画等)。

Flutter:Flutter的文档必须是这五个框架中最受欢迎的。他们用有组织的信息淹没了它, 以帮助任何人通过它们。从简单的命令到包含简短内容丰富的视频和窗口小部件类的菜谱, Flutter的文档都非常出色。我是否提到过可以从每个小部件的源代码轻松访问小部件的类引用API?

Xamarin:Xamarin开发人员说他们的文档"完整", 这是真的! Xamarin在这五个文档中, 有一个文档, 你随时可以在需要有关框架任何主题的见解时随时回来。

你可以仅使用文档中的材料就可以从初学者过渡到高级。它的导航非常直观, 并且包含简短的教程和指向有关主题和用例的未解决问题的链接。

Ionic:很明显, Ionic在他们的文档中做了惊人的工作。在每次重大更新中, 整个网站都会更改, 以改善用户体验。

与Ionic一起工作的大多数开发人员都可以轻松地搜索, 查找和集成所需的组件。

本机脚本:关于NativeScript的一件事是, 它比他们的广告要好得多。 NativeScript的文档非常基础-他们需要更多指南, 以向开发人员展示利用框架功能的简便程度。

此外, 当尝试从入门到经验丰富时, 我们觉得NativeScript的文档缺少一些框架真正允许你做什么的清晰示例。通常, 开发人员必须阅读GitHub问题才能了解一些基本概念。

热装

在移动跨平台框架中, 这是一个热门话题, 有时可以称为移动开发的省时部分。

反应本机:很长一段时间以来, 热重载是驱使开发人员脱离此跨平台解决方案的弱点之一。但是, 在React Native 0.61中, 他们宣布了快速刷新, 这是不完全是热装但也使RN开发人员感到高兴。

快速刷新的惊人之处在于它完全支持现代React(功能组件和Hooks)并优雅地处理错误。

Flutter:Flutter的热重装功能令人愉快。颤振提供了很好3种不同方式工作时重新加载应用程序的方式:热重新加载, 热重新启动和完全重新启动。

在他们的文档中有一些需要很好解释和解决的警告, 但是这些警告并不能阻止此功能成为Flutter对开发人员的最畅销点之一。

Xamarin:与其他4个框架一样, Xamarin的热重装是开箱即用的。无需进一步配置, 你就可以保存文件并触发刷新。 Xamarin的热装可同时在多个平台上运行, 并使用称为弹性加载.

Xamarin的热重载还存在一些问题:它无法重载C#代码, 包括事件处理程序, 自定义控件, 后台页面代码以及其他类。另外, 你不能在热重装会话期间更改文件。要查看此更改, 你需要重建并重新部署你的应用以重新启用热重载

Ionic:在Ionic中实时重新加载可以用两种方式查看, 因为可以使用两种不同的方法来开发Ionic应用程序。可以使用浏览器对应用进行编码并查看结果, 也可以将手机插入计算机以从那里进行评估。但是, Ionic具有完整的热重装功能, 无论你选择哪种方法, 它都将帮助你有效地开发应用程序。

本机脚本:自本机脚本5.3起, 正式支持很棒的HMR–热模块替换功能, 支持从VSCode进行调试, 样式编辑, JavaScript编辑甚至文件编辑。

的LiveSync功能, 当我们启动一个在设备上运行或调试还可以像对Ionic一样对应用程序进行更改, 并查看在所有连接的设备和仿真器上实时应用的更改。

调试工具

开发人员有时会说"调试的难度是一开始编写代码的两倍。"既然这可以被认为是我们工作中最困难的部分之一, 那么为什么要使用任何工具使其变得更困难呢?

移动跨平台调试一直以来都不是一件容易的事, 因为这些工具不仅是混合的, 而且可能并不总是本地兼容的。

在比较过程中, 我们将结合框架中的调试工具和错误报告功能。

反应本机:与热重装一样, 使用React Native进行调试始终是"徒劳的", 因为核心团队没有正式支持任何工具。

但是, 在React Native 0.62中, 它们宣布, 它是3月26日以来的默认RN调试器。Flipper具有调试器所需的强大功能, 尤其是:

  • 可用React DevTools
  • 网络, 布局, 数据库和首选项检查器
  • Metro操作可帮助重新加载应用
  • 崩溃报告和设备日志。

Flutter:Flutter DevTools是一项非常强大且完整的功能。它几乎适合所有用例, 从简单的控制台输出到可视化窗口小部件分析, 网络和性能检查, 一应俱全。

Flutter可能在5个框架之间拥有最好的调试工具。

Xamarin:Xamarin调试安卓和的iOS应用不同。与其他.NET应用程序一样, 对Android应用程序进行了调试-使用调试配置运行设备后, 我们只需添加断点并跟踪应用程序的执行即可。

Xamarin.iOS使用单声道软调试器, 生成的代码以及Mono运行时与IDE配合使用可提供调试体验。

Ionic:在他们的文档中, Ionic提供了多种调试设施因为框架会创建混合应用程序(Web视图中的HTML, CSS和JavaScript), 这些应用程序可以使用网络调试器轻松调试。

如果你希望查看更好的日志或进行更深入的调试, 科尔多瓦提供VSCode扩展几乎可以满足你的所有需求。

本机脚本:使用命令tns调试<平台>, 我们可以轻松地使用NativeScript启动调试会话并启动Livesync。

然而调试输出将打印到控制台中, 并且你所做的所有更改都将与应用程序同步。但是, 应注意VSCode扩展可以提供更好的调试体验。

此外, 此博客文章调试NativeScript插件通过NativeScript概述帮助开发人员更深入地构建和调试应用程序, 这说明了开发人员如何进行调试所使用插件的本机源代码。

进一步比较

以上是吸引和吸引开发人员使用他们使用的工具的主要因素。现在, 让我们看一下使开发人员享受使用跨平台工具所花费的时间的可选内容。

代码编辑器/ IDE集成

在上述5个框架中, Flutter听起来可能是最好的, 这是因为它们为支持的不同编辑器提供了强大的插件和集成功能。

安装后VSCode上的Flutter扩展, 它很快就开始感觉它已经成为具有完整调试支持, 脚手架片段, 漂亮的语法突出显示和代码完成的IDE。

尽管它不如Flutter的工具先进, 但React Native还具有反应本机工具由Microsoft提供, 以帮助你快速轻松地运行和调试React Native应用。

Xamarin很好, 因为当你决定安装框架时, VS2019为你提供了Xamarin开发所需的一切。这使开发人员可以使用该工具, 因为他们可以从IDE中获得所需的一切。

使用Ionic和NativeScript, 你可以与大多数Web开发编辑器配合使用, 因为它们使用流行的前端工具, 例如HTML, JSX, CSS, SASS, Angular, React和Vue, 这些工具已经对现有编辑器提供了良好的支持。

第三方模块

Advanced React Native应用程序严重依赖于第三方模块, 由于缺少与其他模块的兼容性或与当前版本框架的兼容性, 当缺少缺少的部件进行更新时, 这很快就会成为难题。

但是, React Native社区非常庞大, 因此npm上有很多可用的开源软件包, 这些软件包可能对构建应用程序非常有帮助。

在Flutter和Xamarin中, 此问题很小, 因为它们已准备好我们构建跨平台应用程序所需的大部分内容, 并且它们的更新过程由相应的YAML和XML文件很好地管理。

颤振有它自己的包管理器网站你可以在其中搜索和查看Flutter软件包的使用示例。

Ionic本身随附构建材料或iOS UI应用程序所需的大多数UI组件, 并且它们遵守设计准则。但是, 它强烈依赖Cordova的本机插件来访问本机功能, 而这些功能又可能不是最新的或缺少文档。

像Ionic一样, NativeScript也捆绑了许多美观的UI组件。不过, NativeScript团队及其社区可以使用和开发Native插件, 并在专用的市场.

总结

由于这五个框架在公司中的广泛使用, 因此拥有广泛的社区, 并且已经被称为主要的跨平台工具。他们每个人都有独特的工作流程, 可以针对每个用例进行定制。

不过, 重要的是要了解它们的优势和局限性, 并根据你要处理的任务和团队进行选择。

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: