Descubre por qué el proyecto Excalidraw decidió dar de baja su envoltorio Electrón y reemplazarlo por la versión web.
En el proyecto Excalidraw, decidimos dar de baja Excalidraw Desktop, un wrapper de Electron para Excalidraw, y reemplazarlo por la versión web que se puede encontrar en excalidraw.com y que siempre se puede encontrar en excalidraw.com. Después de un análisis cuidadoso, decidimos que la app web progresiva (AWP) es el futuro que queremos desarrollar. Sigue leyendo para descubrir por qué.
Cómo surgió Excalidraw para computadoras
Poco después de que @vjeux creara la versión inicial de Excalidraw en enero de 2020 y lo publicara en un blog, propuso lo siguiente en el problema n.° 561:
Sería genial unir Excalidraw en Electron (o un equivalente) y publicarlo como una aplicación [específica de la plataforma] en las diversas tiendas de aplicaciones.
La reacción inmediata de @voluntadpear fue sugerir lo siguiente:
¿Qué tal si la conviertes en una AWP? Actualmente, Android admite agregarlas a Play Store como Trusted Web Activities y esperamos que iOS haga lo mismo pronto. En computadoras, Chrome te permite descargar un acceso directo a una AWP.
La decisión que tomó @vjeux al final fue simple:
Deberíamos hacer ambas cosas :)
Si bien @voluntadpear y otros posteriores iniciaron el trabajo para convertir la versión de Excalidraw en una AWP, @lipis de forma independiente se adelantó y creó un repositorio independiente para Excalidraw Desktop.
Hasta el día de hoy, aún no se alcanza el objetivo inicial que estableció @vjeux, es decir, enviar Excalibur a las diversas tiendas de aplicaciones. Honestamente, nadie siquiera comenzó el proceso de envío a ninguna de las tiendas. Pero ¿por qué? Antes de responder, veamos a Electron, la plataforma.
¿Qué es Electron?
El argumento de venta único de Electron es que te permite “crear apps de escritorio multiplataforma con JavaScript, HTML y CSS”. Las apps compiladas con Electron son "compatibles con Mac, Windows y Linux", es decir, "Las apps de Electron se compilan y ejecutan en tres plataformas". Según la página principal, las partes difíciles que Electron facilita son las actualizaciones automáticas, los menús y las notificaciones a nivel del sistema, los informes de fallas, la depuración y la generación de perfiles, y los instaladores de Windows. Resulta que algunas de las funciones prometidas necesitan una visión detallada de la letra pequeña.
Por ejemplo, las actualizaciones automáticas "solo [actualmente] [se admiten] en macOS y Windows. No hay compatibilidad integrada con el actualizador automático en Linux, por lo que se recomienda usar el administrador de paquetes de la distribución para actualizar la app".
Los desarrolladores pueden crear menús a nivel del sistema llamando a
Menu.setApplicationMenu(menu). En Windows y Linux, el menú se configurará como el menú superior de cada ventana, mientras que en macOS hay muchos menús estándar definidos por el sistema, como el menú Servicios. Para que los menús sean estándares, los desarrolladores deben configurar elrolede su menú según corresponda, y Electron los reconocerá y los convertirá en menús estándares. Esto significa que mucho código relacionado con el menú usará la siguiente verificación de la plataforma:const isMac = process.platform === 'darwin'.Los instaladores de Windows se pueden crear con windows-installer. En el archivo readme del proyecto, se destaca que "para una app de producción, debes firmar tu aplicación. El filtro SmartScreen de Internet Explorer bloqueará la descarga de tu app, y muchos proveedores de antivirus la considerarán software malicioso, a menos que obtengas una certificación válida" [sic].
Si solo observas estos tres ejemplos, queda claro que Electron está lejos de ser “escribir una vez, ejecutar en todas partes”. Para distribuir una app en tiendas de aplicaciones, se requiere la firma de código, una tecnología de seguridad para certificar la propiedad de la app. Para empaquetar una app, debes usar herramientas como electron-forge y pensar dónde alojar paquetes para las actualizaciones de la app. Se vuelve complejo bastante rápido, en especial cuando el objetivo realmente es la compatibilidad entre plataformas. Quiero señalar que es absolutamente posible crear apps de Electron increíbles con suficiente esfuerzo y dedicación. En el caso de Excalidraw para computadoras, no lo hicimos.
Dónde quedó Excalidraw para computadoras
Hasta el momento, Excalidraw para computadoras de escritorio es básicamente la app web de Excalidraw empaquetada como un archivo .asar con una ventana Acerca de Excalidraw agregada. El aspecto de la aplicación es casi idéntico a la versión web.
En macOS, ahora hay un menú a nivel del sistema en la parte superior de la aplicación, pero como ninguna de las acciones del menú, aparte de Close Window y About Excalidraw, está conectada a nada, el menú es, en su estado actual, bastante inútil. Mientras tanto, todas las acciones se pueden realizar a través de las barras de herramientas normales de Excalidraw y el menú contextual.
Usamos el generador de electrones, que admite asociaciones de tipos de archivos.
Si haces doble clic en un archivo .excalidraw, lo ideal sería que se abra la app Excalidraw Desktop. El fragmento relevante de nuestro archivo electron-builder.json se ve de la siguiente manera:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Lamentablemente, en la práctica, esto no siempre funciona según lo previsto, ya que, según el tipo de instalación (para el usuario actual, para todos los usuarios), las apps en Windows 10 no tienen los derechos para asociar un tipo de archivo a sí mismas.
Estas deficiencias y el trabajo pendiente para que la experiencia sea realmente similar a una app en todas las plataformas (que, una vez más, con suficiente esfuerzo es posible) fueron un argumento sólido para que reconsideremos nuestra inversión en Excalidraw para computadoras. Sin embargo, el argumento más importante para nosotros fue que prevemos que, para nuestro caso de uso, no necesitamos todos los atributos que ofrece Electron. El conjunto de capacidades de la Web, que sigue creciendo, nos sirve igual de bien, si no mejor.
Cómo nos sirve la Web hoy y en el futuro
Incluso en 2020, jQuery sigue siendo increíblemente popular. Para muchos desarrolladores, se ha convertido en el hábito de usarlo, a pesar de que, actualmente, es posible que no necesiten jQuery. Hay un recurso similar para Electron, bien llamado You Might Not Need Electron. Permíteme explicar por qué creemos que no necesitamos Electron.
App web progresiva instalable
Actualmente, Excalidraw es una app web progresiva instalable con un service worker y un manifiesto de app web. Almacena todos sus recursos en dos cachés: una para las fuentes y CSS relacionadas con fuentes, y otra para todo lo demás.
Esto significa que la aplicación puede funcionar sin conexión y puede ejecutarse sin una conexión de red. Los navegadores basados en Chromium para computadoras y dispositivos móviles le solicitan al usuario que instale la app. Puedes ver el mensaje de instalación en la siguiente captura de pantalla.
Excalidraw está configurado para ejecutarse como una aplicación independiente, por lo que, cuando lo instalas, obtienes una app que se ejecuta en su propia ventana. Está completamente integrado en la IU de tareas múltiples del sistema operativo y tiene su propio ícono de la app en la pantalla principal, el Dock o la barra de tareas, según la plataforma en la que lo instales.
Acceso al sistema de archivos
Excalidraw usa browser-fs-access para acceder al sistema de archivos del sistema operativo. En los navegadores compatibles, esto permite un flujo de trabajo de apertura, edición y guardado real, y un guardado adicional y una opción "Guardar como" reales, con un resguardo transparente para otros navegadores. Puedes obtener más información sobre esta función en mi entrada de blog Cómo leer y escribir archivos y directorios con la biblioteca browser-fs-access.
Compatibilidad con arrastrar y soltar
Los archivos se pueden arrastrar y soltar en la ventana Excalidraw como en aplicaciones específicas de la plataforma. En un navegador que admita la API de acceso al sistema de archivos, se puede editar de inmediato un archivo que se haya dejado caer y guardar las modificaciones en el archivo original. Es tan intuitivo que, a veces, te olvidas de que estás tratando con una app web.
Acceso al portapapeles
Excalidraw funciona bien con el portapapeles del sistema operativo. Se pueden copiar y pegar dibujos de Excalidraw completos o solo objetos individuales en formatos image/png y image/svg+xml, lo que permite una integración sencilla con otras herramientas específicas de la plataforma, como Inkscape, o herramientas basadas en la Web, como SVGOMG.
Manejo de archivos
Excalidraw ya admite la API de manejo de archivos experimental, lo que significa que se puede hacer doble clic en los archivos .excalidraw en el administrador de archivos del sistema operativo y abrirlos directamente en la app de Excalidraw, ya que Excalidraw se registra como un controlador de archivos para los archivos .excalidraw en el sistema operativo.
Captura declarativa de vínculos
Los dibujos de Excalidraw se pueden compartir mediante un vínculo. Este es un ejemplo. En el futuro, si los usuarios tienen Excalidraw instalado como una AWP, esos vínculos no se abrirán en una pestaña del navegador, sino que iniciarán una nueva ventana independiente. Mientras se implementa, esto funcionará gracias a la captura de vínculos declarativos, que, en el momento de escribir este artículo, es una propuesta de vanguardia para una nueva función de la plataforma web.
Conclusión
La Web ha avanzado mucho, y cada vez más funciones llegan a los navegadores que, hace solo un par de años o incluso meses, eran impensables en la Web y eran exclusivas de aplicaciones específicas de la plataforma. Excalidraw está a la vanguardia de lo que es posible en el navegador, a la vez que reconoce que no todos los navegadores en todas las plataformas admiten cada función que usamos. Cuando apostamos por una estrategia de mejora progresiva, disfrutamos de lo más reciente y lo mejor siempre que sea posible, pero sin dejar a nadie atrás. Se ve mejor en cualquier navegador.
El electron nos ha funcionado bien, pero en 2020 y más adelante, podemos vivir sin él. Ah, y con respecto al objetivo de @vjeux: Como Android Play Store ahora acepta AWP en un formato de contenedor llamado Actividad web confiable y Microsoft Store también admite AWP, puedes esperar que Excalidraw esté disponible en estas tiendas en un futuro no muy lejano. Mientras tanto, puedes usar e instalar Excalidraw en el navegador y desde él.
Agradecimientos
@lipis, @dwelle y Joe Medley revisaron este artículo.