Descubre por qué el proyecto Excalidraw decidió dar de baja su envoltorio Electrón para dar lugar a la Web versión.
En el proyecto Excalidraw, decidimos Excalidraw Desktop, un servicio Wrapper de Electron para Excalidraw, en favor de la versión web que puede (y siempre podría) encontrar en excalidraw.com. Después de un análisis cuidadoso, decidieron que la app web progresiva (AWP) es el futuro que queremos compilar . Sigue leyendo para descubrir por qué.
Cómo surgió Excalidraw para computadoras de escritorio
Poco después de que @vjeux creara la versión inicial de Excalidraw en enero de 2020 y publicó información al respecto en un blog, propuso lo siguiente en Error 561:
Sería genial unir Excalidraw en Electron (o equivalente) y publicarlo como un archivo [específico de la plataforma]. a las diferentes tiendas de aplicaciones.
La reacción inmediata de @voluntadpear fue sugerir lo siguiente:
¿Qué tal si, en cambio, se convierte en una AWP? Actualmente, Android permite 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 de escritorio a una AWP
La decisión que @vjeux tomó al final fue simple:
Deberíamos hacer ambas cosas :)
Mientras el trabajo para convertir la versión de Excalidraw en una AWP se inició por @voluntadpear y luego otros. @lipis de forma independiente se adelantó y creó un repositorio independiente para Excalidraw Desktop.
Hasta el día de hoy, el objetivo inicial establecido por @vjeux, es decir, enviar Todavía no se llegó a la etapa Excalidraw en las diferentes tiendas de aplicaciones. Honestamente, nadie ha comenzado el proceso de envío a cualquiera de las tiendas. Pero ¿por qué? Antes de responder, mira Electron, la plataforma.
¿Qué es Electron?
El argumento de venta único de Electron es que te permite "crear apps para computadoras multiplataforma con JavaScript, HTML y CSS". Las aplicaciones creadas con Electron "compatible con Mac, Windows y Linux", es decir, "Las apps de Electron se compilan y ejecutan en tres plataformas”. Según la página de inicio, las partes difíciles que Electron facilita son actualizaciones automáticas menús y notificaciones del sistema informes de fallas, depuración y generación de perfiles, y Instaladores de Windows. Resulta que algunos de las características 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. Hay no tiene compatibilidad integrada con el actualizador automático en Linux, por lo que se recomienda usar la administrador de paquetes 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 los menús estándar definidos por el sistema, como Servicios . Para hacer que los menús sean estándar, los desarrolladores deben configurar elrolede sus menús según corresponda. y Electron los reconocerá y los convertirá en un menú estándar. Esto significa que muchos el 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 aplicación de producción, debes firmar tu aplicación. de Internet Explorer El filtro SmartScreen bloqueará la descarga de tu app y muchos proveedores de antivirus considerar tu app como software malicioso, a menos que obtengas un certificado válido" [sic].
Si observamos solo estos tres ejemplos, queda claro que Electron está lejos de "escribir una vez, ejecutar en todas partes". La distribución de una aplicación en tiendas de aplicaciones requiere firma de código, una tecnología de seguridad para certificar la propiedad de la app. Para empaquetar una app, debes usar herramientas como forjar-electrones y pensar en dónde paquetes de host para actualizaciones de la app. Se vuelve complejo bastante rápido, especialmente cuando el objetivo es realmente compatible con varias plataformas. Quiero señalar que es absolutamente posible crear contenido Apps de electrones con suficiente esfuerzo y dedicación No estábamos en el caso de Excalidraw Desktop.
Dónde dejó Excalidraw Desktop
Hasta ahora, Excalidraw Desktop es la app web de Excalidraw incluida en un paquete
Archivo .asar con una ventana Acerca de Excalidraw agregada. El estilo
y el aspecto de la aplicación es casi idéntico a la versión web.
En macOS, ahora hay un menú de nivel de sistema en la parte superior de la aplicación, pero como ninguno de los menús distintas de Cerrar ventana y Acerca de Excalidraw) están conectadas a cualquier cosa, el menú es, en su estado actual, bastante inútil. Mientras tanto, todas las acciones se pueden realizar barras de herramientas de Excalidraw normales 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
el extracto relevante de nuestro archivo electron-builder.json se ve así:
{
"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 (para el usuario actual y para todos los usuarios), las apps en Windows 10 no tienen derechos para asociar un tipo de archivo consigo mismo.
Estas deficiencias y el trabajo pendiente para lograr que una experiencia sea verdaderamente similar a la de una aplicación en todas las plataformas (lo cual, de nuevo, con suficiente esfuerzo sí es posible) fue un fuerte argumento para que reconsideremos nuestra de inversión en Excalidraw Desktop. Sin embargo, el argumento más importante para nosotros fue que prevemos que para nuestro caso de uso, no necesitamos todas las funciones que ofrece Electron. El conjunto, creciente y aún en crecimiento, de capacidades de la web nos sirve de igual manera, si no mejor.
Cómo nos beneficia la Web en la actualidad y en el futuro
Incluso en 2020, jQuery increíblemente popular. Para muchos usuarios desarrolladores, se ha convertido en el hábito de usarlo, a pesar de que hoy en día podría no necesitar jQuery. Existe un recurso similar para Electrón, acertadamente llamado You Might Not Need Electron. Permíteme describen por qué creemos que no necesitamos Electron.
App web progresiva instalable
Excalidraw hoy es una app web progresiva instalable con un un service worker y un manifiesto de apps web. Almacena en caché 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 en computadoras de escritorio y dispositivos móviles le solicitan al usuario que instale la app. Puedes ver la solicitud de instalación en la captura de pantalla a continuación.
Excalidraw está configurado para ejecutarse como una aplicación independiente. Por lo tanto, cuando la instales, obtendrás una app que se ejecuta en su propia ventana. Está completamente integrado en la IU multitarea del sistema operativo y tiene su propio ícono de la app en la pantalla de inicio, el Dock o la barra de tareas. según la plataforma en la que instales que la modifica.
Acceso al sistema de archivos
Excalidraw usa browser-fs-access para lo que permite acceder al sistema de archivos del sistema operativo. En navegadores compatibles, esto permite un verdadero abrir→editar→guardar el flujo de trabajo y el ahorro excesivo real y "guardar como" con un resguardo transparente de otros navegadores. Puedes obtener más información sobre esta función en mi entrada de blog. Lee y escribe archivos y directorios con la biblioteca del navegador-fs-access.
Compatibilidad con la función de arrastrar y soltar
Los archivos se pueden arrastrar y soltar en la ventana Excalidraw como en aplicaciones específicas de la plataforma. En una navegador compatible con la API de File System Access, una solicitud se puede editar de inmediato y las modificaciones se pueden guardar en el archivo original. Esto es así es intuitivo que a veces olvidas que estás trabajando con una aplicación web.
Acceso al portapapeles
Excalidraw funciona bien con el portapapeles del sistema operativo. dibujos de Excalidraw completos o solo
objetos individuales se pueden copiar y pegar en los 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 basadas en la Web
herramientas 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
se abren directamente en la app de Excalidraw, ya que Excalidraw se registra como un controlador de archivos para .excalidraw
archivos en el sistema operativo.
Captura declarativa de vínculos
Los dibujos de Excalidraw se pueden compartir mediante vínculos. Este es un ejemplo. En el futuro, si personas tienen Excalidraw instalado como una AWP, tales vínculos no se abrirán en una pestaña del navegador, sino que se iniciará nueva ventana independiente. La implementación está pendiente, esto funcionará gracias a captura declarativa de vínculos, una propuesta al momento de la redacción de una propuesta de vanguardia para una nueva función de plataforma web.
Conclusión
La Web ha avanzado mucho, y cada vez hay más funciones en navegadores que solo años o incluso meses atrás eran impensables en la web y exclusivos de aplicaciones específicas para cada plataforma. Excalidraw está en la vanguardia de lo que es posible en el navegador, al mismo tiempo que reconoce que no todos los navegadores y las plataformas admiten todas las funciones que usamos. Si apuestan por una estrategia de mejora de la optimización, disfrutamos de lo último y lo mejor siempre que sea posible, pero sin dejar de atrás. Se recomienda en cualquier navegador.
El electron nos ha funcionado bien, pero en 2020 y más adelante, podemos vivir sin él. Ah, y por eso objetivo de @vjeux: como Android Play Store ahora acepta AWP de una formato contenedor llamado Trusted Web Activity y ya que el Microsoft Store admite AWP, puedes esperar Excalidraw en estas tiendas en un futuro no muy lejano. Mientras tanto, puedes utilice siempre e instale Excalidraw dentro y desde el navegador.
Agradecimientos
@lipis revisó este artículo, @dwelle y Joe Medley.