reactjs - Electron vs Web Apps(特别是使用 React)

标签 reactjs web-applications electron single-page-application

上下文

我目前正在使用 React 开发单页 Web 应用程序。 (和其他 node 库)。我已经对这个项目比较深入了。正在构建此应用程序以取代公司的物流平台(交易、库存管理等)。

他们当前的系统是 Windows基于应用程序,因此直觉认为 Electron桌面应用程序可能更适合他们的需求。我正在开发一个基于网络的应用程序,因为这些是我熟悉的技术。

我所知道的

不是很多,因此问题。据我了解,您可以使用 Electron 构建基本相同的 Web 应用程序,但包含桌面功能。 .此外,Electron 可以离线工作,而 Web 应用程序则不能。

我研究过的

我已经进行了一些研究,但对于我正在寻找的东西,没有什么能完全击中我的头。其他人将 Electron 与扩展、Chrome 应用程序(贬值)和 PWA 进行比较。似乎没有人将 Electron 与 Web 应用程序进行比较。

  • What is Electron, and Why Should We Use It
  • Chrome App vs Electron
  • PWA vs Electron vs Browser extension
  • From React to Electron

  • 我想知道的

    很难准确地说,因为这是一个相当开放的问题。尽管如此,这里有一些我正在努力寻找答案的观点:
  • 单页 Web 应用程序与 Electron 的直接比较(安全性、 native 桌面功能的优势、部署等)
  • 易于从纯 Reactjs 过渡到 Electron/Reactjs

  • 总而言之,我希望有人能够指出我遗漏的任何东西,这可能是决定走哪条道路的重要因素。

    最佳答案

    我会尽量给你一个简短的回答你的问题:

    Electron 的基本工作是将浏览器引擎(在本例中为 Chromium)与您的应用程序捆绑在一起。浏览器引擎负责渲染您的应用程序。

    使用 native 功能的方法是在主进程和渲染器进程之间进行通信。所以基本上你想在本地桌面端做的所有事情都将在主进程中进行。因此,在您的情况下,您仍然需要做一些额外的工作才能使您的网络应用程序在内部或与 Electron 一起工作。

    native 桌面功能的优势取决于您的 Web 应用程序的用例。我可以从我自己的个人经验中看出,以下内容非常有用:

  • 访问文件系统(写入、读取、编辑、删除本地文件)
  • 全局快捷方式(例如按下 alt+o 将打开您的应用程序或特定页面,无论用户当前使用什么其他应用程序)
  • 就像你说的,如果你没有互联网连接,你的应用程序至少仍然会呈现。

  • 部署明智的最常见的事情是构建和生成应用程序的可安装 .exe 文件。有很多库允许您构建 Electron 应用程序的 .exe,例如“electron-builder”。还有很多方法可以通过内置的 Electron 更新程序 api 或一些第三方库向您的用户提供更新。

    安全方面,我必须承认我对那部分并没有太多了解,但 Electron 开发人员经常使框架保持最新状态,因此安全问题不应该成为问题。

    希望这至少能回答你的一些问题,如果不仅仅是问更多:)

    关于reactjs - Electron vs Web Apps(特别是使用 React),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55639442/

    相关文章:

    c# - 为什么调用默认的aspx?

    javascript - 将json对象注入(inject)html元素

    html5-canvas - 在 Electron 中将 OffscreenCanvas 内容以 PNG 格式保存到磁盘

    javascript - Bootstrap 的 JavaScript 需要 jQuery - Reactjs

    authentication - aws 上的网络应用程序中的用户身份验证

    javascript - 优化对象数组的搜索

    php - 以图形方式创建和管理文档结构的应用程序

    javascript - 将Java添加到Electron应用程序

    reactjs - 处理同一元素的 React onDoubleClick 和 single onClick

    javascript - 如何使用react-native-vision-camera代替expo-camera?