Future of Electron + WebViews

[nwittwer]

Reflex is fundamentally dependent on Electron and its implementation of WebView, currently. We need to show accurate views of websites across different screen sizes.

As you may know, Electron solves the infrastructure layer of building a hybrid (native + web) app and shipping it to Windows, Mac, Linux. This makes development much easier than maintaining native versions. But it comes with its own limitations as well.

Why use WebView instead of iFrame?

When first prototyping Reflex, we started with <iframe>. But many websites block iframe embeds on external websites. Trying accessing Google.com from an iframe for example. This is not a problem most the time when using a WebView.

There's also other benefits when using WebView in Electron:

Unlike an iframe, the webview runs in a separate process than your app. It doesn't have the same permissions as your web page and all interactions between your app and embedded content will be asynchronous. This keeps your app safe from the embedded content. Note: Most methods called on the webview from the host page require a synchronous call to the main process.
Source

Why use WebView instead of BrowserView?

Figma notoriously brought BrowserView to life in Electron. Read about that here. But they didn't need to display and manipulate embedded web content within the DOM; they mostly just needed a way to show one big web app view at a time. If you imagine Google Chrome's tabs, it's similar to that. But Reflex needs to be able to show a bunch of different web pages simultaneously, and the user is able to move them around and scale them up/down from the Reflex UI.

While it could be technically possible, it's not clear why we would want to swap WebView with BrowserView in Reflex. BrowserView cannot be embedded into the DOM. In order to move the position or scale of them on the screen, the main Electron process and the renderer process need to communicate just to achieve something similar to what WebView gives us out-of-the-box. It is also not clear how much of a performance gain would be possible by switching to BrowserView, and therefore currently looks like a lot of extra development effort for minimal to no gains. WebView already runs in a separate process from the app, so it is efficient in that regard.

"Electron is RAM-heavy and bloated! Use another framework!"

I regularly check-in on the state of alternatives, since this isn't untrue. But as of December 2021, I still think Electron best suits the Reflex project.

• WebContainers: Not a "framework", but an upcoming technology which allows for running Node.js environments directly in the browser. Still in its early phases, but we hope this will be the long-term future that allows us to ship Reflex as a website instead of an app. Imagine going to the Reflex marketing site, clicking "Install app" (powered by Chrome's PWA support) and then you're able to use all the normal features of Reflex, and the dev team no longer needs to create OS-specific native builds. See here for updates.
• Tauri: Promising, but no support for WebView currently.
• neutrinojs: Promising, as it reuses the user's existing browsers instead of bundling its own. But currently has a lot of high impact bugs.
• Flutter: The UI layer requires custom Dart code which compiles to OS-native UI components, instead of HTML/CSS, which is not the preferred direction for this project. We eventually hope that Reflex can one day run natively as a website, so it makes sense to focus on building it as a web app.

How about Microsoft's Edge "WebView 2" project?

Microsoft is building a project they call Edge WebView 2. This is being built mainly to power Microsoft's web-based apps like VSCode. Fundamentally both Edge WebView 2 and Electron's Chromium WebView are expected to perform similarly, as they both are based on the Chromium WebView technology. Electron adds a lot of nice APIs on top of WebView that Edge's WebView 2 implementation does not ship with. You can read about the differences between Electron's implementation and the MS Edge implementation here.

Currently Electron still offers the best combination of tools and APIs for Reflex.