En las últimas semanas, hemos recibido varias preguntas sobre las diferencias entre el nuevo WebView2 y Electron.
Ambos equipos tienen el objetivo expreso de hacer que la tecnología web sea la mejor posible en el escritorio, y se está discutiendo una comparación exhaustiva compartida.
Electrón y WebView2 son proyectos en constante evolución. Hemos realizado un breve resumen de las similitudes y diferencias entre Electron y WebView2 tal y como existen en la actualidad.
Visión general de la Arquitectura
Electrón y WebView2 se desarrollan bajo la fuente de Chromium para renderizar contenido web. Estrictamente hablando, WebView2 se construye a partir de la fuente de Edge, pero Edge se construye utilizando una bifurcacion/fork de la fuente de Chromium. Electron no comparte ninguna DLL con Chrome. Los binarios de WebView2 se enlazan con Edge (canal estable a partir de Edge 90), por lo que comparten disco y algún conjunto de trabajo. Ver Modo de distribución Evergreen para más información.
Las aplicaciones de Electron siempre empaquetan y distribuyen la versión exacta con la cual fueron desarrolladas. WebView2 tiene dos opciones de distribución. Puedes empaquetar la versión exacta de la biblioteca de WebView2 con la que tu aplicación fue desarrollada, o puedes usar un entorno de ejecución que esté instalado en el sistema. WebView2 brinda herramientas para cada enfoque, incluyendo un instalador de arranque en el caso de que el entorno de ejecución compartido no esté disponible. WebView2 viene preinstalado de forma nativa a partir de Windows 11.
Las aplicaciones que empaquetan sus frameworks son responsables de la actualización de dichos frameworks, incluidas las versiones menores de seguridad. Para apps que utilicen el entorno de ejecución compartido de WebView2, WebView2 cuenta con su propio actualizador similar a Chrome o Edge que se ejecuta de forma independiente a tu aplicación. Actualizar el código de la aplicación o cualquiera de sus dependencias siguen siendo responsabilidad del desarrollador, al igual que con Electron. Windows Update no gestiona ni Electron ni WebView2.
Both Electron and WebView2 inherit Chromium’s multi-process architecture - namely, a single main process that communicates with one-or-more renderer processes. These processes are entirely separate from other applications running on the system. Every Electron application is a separate process tree, containing a root browser-process, some utility processes, and zero or more render processes. WebView2 apps that use the same user data folder (like a suite of apps would do), share non-renderer processes. WebView2 apps using different data folders do not share processes.
Conoce más sobre el Modelo de procesos de WebView2 y del Modelo de procesos de Electron aquí.
Electron provides APIs for common desktop application needs such as menus, file system access, notifications, and more. WebView2 is a component meant to be integrated into an application framework such as WinForms, WPF, WinUI, or Win32. WebView2 does not provide operating system APIs outside the web standard via JavaScript.
Node.js is integrated into Electron. Electron applications may use any Node.js API, module, or node-native-addon from the renderer and main processes. A WebView2 application does not assume which language or framework the rest of your application is written in. Your JavaScript code must proxy any operating system access through the application-host process.
Electron strives to maintain compatibility with the web API, including APIs developed from the Fugu Project. We have a snapshot of Electron’s Fugu API compatibility. WebView2 maintains a similar list of API differences from Edge.
Electron has a configurable security model for web content, from full-access to full-sandbox. WebView2 content is always sandboxed. Electron has comprehensive security documentation on choosing your security model. WebView2 also has security best practices.
The Electron source is maintained and available on GitHub. Applications can modify can build their own brands of Electron. The WebView2 source is not available on GitHub.
Quick Summary:
| Electron | WebView2 |
|---|
| Dependencia de compilación | Chromium | Borde |
| Código fuente disponible en GitHub | Sí | No |
| Comparte DLLs de Edge/Chrome | No | Sí (a partir de Edge 90) |
| Runtime compartido entre aplicaciones | No | Opcional |
| API de la aplicación | Sí | No |
| Node.js | Sí | No |
| Sandbox | Opcional | Siempre |
| Requiere un framework de aplicación | No | Sí |
| Plataformas soportadas | Mac, Windows, Linux | Windows (Mac/Linux previstos) |
| Uso compartido de procesos entre aplicaciones | Nunca | Opcional |
| Actualizaciones del framework gestionadas por | Aplicación | WebView2 |
Discusión sobre el rendimiento
Cuando de trata de renderizar tu contenido web, esperamos que exista poca diferencia de rendimiento entre Electron, WebView2 y cualquier otro motor de renderizado basado en Chromium. We created scaffolding for apps built using Electron, C++ + WebView2, and C# + WebView2 for those interested to investigate potential performance differences.
There are a few differences that come into play outside of rendering web content, and folks from Electron, WebView2, Edge, and others have expressed interest in working on a detailed comparison including PWAs.
Inter-Process Communication (IPC)
There is one difference we want to highlight immediately, as we believe it is often a performance consideration in Electron apps.
In Chromium, the browser process acts as an IPC broker between sandboxed renderers and the rest of the system. While Electron allows unsandboxed render processes, many apps choose to enable the sandbox for added security. WebView2 always has the sandbox enabled, so for most Electron and WebView2 apps IPC can impact overall performance.
Even though Electron and WebView2 have a similar process models, the underlying IPC differs. Communicating between JavaScript and C++ or C# requires marshalling, most commonly to a JSON string. JSON serialization/parsing is an expensive operation, and IPC-bottlenecks can negatively impact performance. Starting with Edge 93, WV2 will use CBOR for network events.
Electron supports direct IPC between any two processes via the MessagePorts API, which utilize the structured clone algorithm. Applications which leverage this can avoid paying the JSON-serialization tax when sending objects between processes.
Resumen
Electron and WebView2 have a number of differences, but don't expect much difference with respect to how they perform rendering web content. Ultimately, an app’s architecture and JavaScript libraries/frameworks have a larger impact on memory and performance than anything else because Chromium is Chromium regardless of where it is running.
Un agradecimiento especial al equipo de WebView2 por revisar este artículo, y asegurarse de que contamos con una visión actualizada de la arquitectura de WebView2. Agradecen además cualquier sugerencia sobre el proyecto.
