Descubre por qué el proyecto Excalidraw decidió dar de baja su wrapper Electron para priorizar la versión web.
En el proyecto de Excalidraw, decidimos dar de baja Excalidraw Desktop, un wrapper Electron para Excalidraw, en favor de la versión web que puedes (y siempre podrías encontrar en excalidraw.com). Después de un análisis cuidadoso, decidimos que la app web progresiva (AWP) es el futuro que queremos compilar. Sigue leyendo para descubrir por qué.
Cómo surgió Excalidraw Desktop
Poco después de que @vjeux creara la versión inicial de Excalidraw en enero de 2020 y habló al respecto, propuso lo siguiente en el problema 561:
Sería genial unir Excalidraw con Electron (o una versión equivalente) y publicarla como una aplicación [específica para la plataforma] en varias tiendas de aplicaciones.
La reacción inmediata de @voluntadpear fue sugerir lo siguiente:
¿Y si se trata de una AWP? Actualmente, Android admite agregarlas a Play Store como Actividades web de confianza, y esperamos que iOS haga lo mismo pronto. En el escritorio, Chrome te permite descargar un acceso directo de escritorio a una AWP.
La decisión que tomó @vjeux al final fue simple:
deberíamos usar ambas :)
Mientras que @voluntadpear y otros más tarde iniciaron el trabajo para convertir la versión de Excalidraw en una AWP, @lipis se adelantó por su cuenta y creó un repositorio independiente para Excalidraw Desktop.
Hasta el día de hoy, aún no se alcanzó el objetivo inicial establecido por @vjeux, es decir, enviar Excalidraw a las diversas tiendas de aplicaciones. Honestamente, nadie inició el proceso de envío a ninguna de las tiendas. Pero ¿por qué? Antes de responder, echemos un vistazo a Electron, la plataforma.
¿Qué es Electron?
El argumento de venta único de Electron es que te permite “compilar apps multiplataforma para computadoras 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 se ejecutan en tres plataformas". Según la página principal, las partes difíciles que Electron facilita 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 "por el momento solo son [compatibles] con 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 tu app".
Los desarrolladores pueden crear menús a nivel del sistema llamando a
Menu.setApplicationMenu(menu). En Windows y Linux, el menú se establecerá 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 convertir los menús estándar en uno estándar, los desarrolladores deben establecer elrolede su menú según corresponda, y Electron los reconocerá y hará que se conviertan en menús estándar. Esto significa que una gran cantidad de código relacionado con el menú usará la siguiente verificación de plataforma:const isMac = process.platform === 'darwin'.Los instaladores de Windows se pueden crear con windows-installer. El archivo README del proyecto 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 considerarán tu app como software malicioso, a menos que obtengas un certificado válido [sic].
Si observas solo estos tres ejemplos, está claro que Electron está lejos de "escribir una vez, ejecutar en todas partes". La distribución de una app en tiendas de aplicaciones requiere firma de código, una tecnología de seguridad que certifica la propiedad de las apps. Empaquetar una app requiere usar herramientas como electron-forge y pensar dónde alojar paquetes para actualizaciones de apps. Se vuelve complejo relativamente rápido, en especial cuando el objetivo es realmente la compatibilidad entre plataformas. Quiero señalar que es absolutamente posible crear apps de Electron asombrosas con suficiente esfuerzo y dedicación. Para el Excalidraw Desktop, no estábamos allí.
Dónde se dejó Excalidraw Desktop
Hasta ahora, Excalidraw Desktop es, básicamente, la app web de Excalidraw incluida en un archivo .asar con una ventana agregada About Excalidraw. 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ú, excepto Close Window y About Excalidraw, están conectadas a cualquier cosa, por lo que, en su estado actual, es 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 electron-builder, que admite asociaciones de tipos de archivos.
Si haces doble clic en un archivo .excalidraw, lo ideal sería que se abra la app de Excalidraw Desktop. El extracto relevante de nuestro archivo electron-builder.json tiene el siguiente aspecto:
{
"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 derecho a asociarse con un tipo de archivo a sí mismas.
Estas deficiencias y el trabajo pendiente para hacer que la experiencia sea realmente similar a la de la app en todas las plataformas (lo que, de nuevo, es posible realizar un esfuerzo suficiente) fueron un fuerte argumento para que reconsideremos nuestra inversión en Excalidraw Desktop. Sin embargo, el argumento mucho más amplio para nosotros es que prevemos que para nuestro caso de uso, no necesitamos todas las funciones que ofrece Electron. El conjunto creciente y en constante crecimiento de capacidades de la web nos sirve de igual manera, si no mejor.
Cómo nos sirve la Web hoy y en el futuro
Incluso en 2020, jQuery sigue siendo increíblemente popular. Muchos desarrolladores lo usan como un hábito, a pesar de que, en la actualidad, es posible que no necesiten jQuery. Existe un recurso similar para Electron, llamado You Might Not Need Electron. Permítanme explicarles por qué creemos que no necesitamos Electron.
App web progresiva instalable
En la actualidad, Excalidraw es una app web progresiva instalable con un service worker y un manifiesto de app web. Almacena en caché todos sus recursos en dos cachés, una para fuentes y CSS relacionadas con fuentes, y otra para todo lo demás.
Esto significa que la aplicación puede ejecutarse sin conexión por completo y sin una conexión de red. Los navegadores basados en Chromium para computadoras de escritorio 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 para realizar varias tareas a la vez del sistema operativo y obtiene su propio ícono de la app en la pantalla principal, el conector 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 navegadores compatibles, esto permite un flujo de trabajo verdadero de open→edit→save, y ahorra en exceso y "guarda como", con un resguardo transparente para otros navegadores. Puedes obtener más información sobre esta función en la entrada de mi blog Cómo leer y escribir archivos y directorios con la biblioteca browser-fs-access.
Compatibilidad con la función de arrastrar y soltar
Los archivos se pueden arrastrar y soltar en la ventana de Excalidraw, al igual que en las aplicaciones específicas de la plataforma. En un navegador compatible con la API de File System Access, un archivo soltado se puede editar de inmediato y las modificaciones se pueden guardar en el archivo original. Esto es tan intuitivo que, a veces, olvidas que estás tratando con una aplicación web.
Acceso al portapapeles
Excalidraw funciona bien con el portapapeles del sistema operativo. Los dibujos de Excalidraw completos o también solo objetos individuales se pueden copiar y pegar 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 File Handling experimental, lo que significa que se puede hacer doble clic en los archivos .excalidraw en el administrador de archivos del sistema operativo y abrirse directamente en la app de Excalidraw, ya que este servicio se registra como un controlador de archivos .excalidraw en el sistema operativo.
Captura de vínculos declarativa
Los dibujos de Excalidraw se pueden compartir mediante vínculos. A continuación, se muestra 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 abrirán una nueva ventana independiente. Si la implementación está pendiente, esto funcionará gracias a la captura declarativa de vínculos, una propuesta de vanguardia al momento de escribir una nueva función de plataforma web.
Conclusión
La Web ha recorrido un largo camino, y cada vez más funciones llegan a navegadores que hace solo un par de años o incluso meses eran impensables en la Web y que son exclusivas de las aplicaciones específicas de la plataforma. Excalidraw está en la vanguardia de lo que es posible hacer en el navegador, a la vez que reconoce que no todos los navegadores de todas las plataformas admiten cada función que usamos. Cuando apostamos por una estrategia de mejora progresiva, disfrutamos lo mejor y más reciente siempre que sea posible, pero sin dejar a nadie atrás. Se recomienda hacerlo en cualquier navegador.
La electron nos ha ayudado bien, pero en 2020 y en el futuro, podemos vivir sin ella. Ah, y para ese objetivo de @vjeux: dado que Android Play Store ahora acepta AWP en un formato de contenedor llamado Actividad web de confianza, y como Microsoft Store admite AWP, puedes esperar que Excalidraw en estas tiendas en un futuro no muy lejano. Mientras tanto, siempre puedes usar e instalar Excalidraw dentro y desde el navegador.
Agradecimientos
@lipis, @dwelle y Joe Medley revisaron este artículo.