Scopri perché il progetto Excalidraw ha deciso di ritirare il wrapper Electron in favore della versione web.
Nel progetto Excalidraw, abbiamo deciso di ritirare Excalidraw Desktop, un wrapper Electron per Excalidraw, a favore della versione web che puoi trovare e che è sempre possibile trovare su excalidraw.com. Dopo un'attenta analisi, abbiamo deciso che l'app web progressiva (PWA) è il futuro che vogliamo creare. Continua a leggere per scoprire perché.
Come è nata Excalidraw Desktop
Poco dopo aver creato la versione iniziale di Excalidraw nel gennaio 2020 e ha pubblicato un post su un blog, @vjeux ha proposto quanto segue nel numero 561:
Sarebbe bello disporre di Excalidraw in Electron (o equivalente) e pubblicarlo come applicazione [specifica della piattaforma] nei vari store.
La reazione immediata di @voluntadpear è stata nel suggerire:
Ti piacerebbe invece trasformarla in una PWA? Android al momento supporta l'aggiunta al Play Store come Attività web attendibili e speriamo che presto iOS farà lo stesso. Su desktop, Chrome ti consente di scaricare un collegamento sul desktop a una PWA.
La decisione che @vjeux ha preso alla fine è stata semplice:
Dovremmo fare entrambe le cose :)
Mentre il lavoro alla conversione della versione di Excalidraw in una PWA è stato avviato da @voluntadpear e successivamente da altri, @lipis in modo indipendente è andato avanti e ha creato un repository separato per Excalidraw Desktop.
Ad oggi, l'obiettivo iniziale impostato da @vjeux, ovvero l'invio di Excalidraw ai vari store, non è stato ancora raggiunto. Onestamente, nessuno ha nemmeno avviato la procedura di invio per nessuno dei negozi. Ma perché? Prima di rispondere, diamo un'occhiata a Electron, la piattaforma.
Che cos'è Electron?
Il punto di forza di Electron è che consente di "creare app desktop multipiattaforma con JavaScript, HTML e CSS". Le app create con Electron sono "compatibili con Mac, Windows e Linux", ovvero "Le app Electron si creano ed vengono eseguite su tre piattaforme". Secondo la home page, le parti tecniche semplificate da Electron sono gli aggiornamenti automatici, le notifiche e i menu a livello di sistema, i report sugli arresti anomali, il debug e la profilazione e i Programmi di installazione di Windows. Ho scoperto che alcune delle funzionalità promesse necessitano di un'analisi dettagliata.
Ad esempio, gli aggiornamenti automatici "sono [attualmente] solo [supportati] su macOS e Windows. Su Linux non è disponibile il supporto integrato per l'aggiornamento automatico, perciò ti consigliamo di usare il gestore di pacchetti della distribuzione per aggiornare l'app.".
Gli sviluppatori possono creare menu a livello di sistema chiamando il numero
Menu.setApplicationMenu(menu). Su Windows e Linux, il menu verrà impostato come il menu principale di ogni finestra, mentre su macOS sono disponibili molti menu standard definiti dal sistema, come il menu Servizi. Per rendere i propri menu un menù standard, gli sviluppatori dovrebbero impostare di conseguenza ilroledel loro menu; Electron li riconoscerà e li farà diventare menu standard. Ciò significa che gran parte del codice relativo al menu utilizzerà il seguente controllo della piattaforma:const isMac = process.platform === 'darwin'.I programmi di installazione di Windows possono essere creati con il windows-installer. Il file README del progetto evidenzia che "per un'app di produzione è necessario firmare la tua applicazione. Il filtro SmartScreen di Internet Explorer impedirà il download della tua app e molti fornitori di antivirus la considereranno come malware se non ottieni un certificato valido" [sic].
Osservando solo questi tre esempi, è chiaro che Electron è tutt'altro che "scrivere una volta, eseguire ovunque". La distribuzione di un'app negli store richiede la firma del codice, una tecnologia di sicurezza per la certificazione della proprietà dell'app. La pacchettizzazione di un'app richiede l'uso di strumenti come electron-forge e la necessità di pensare a dove ospitare i pacchetti per gli aggiornamenti dell'app. Diventa abbastanza complesso, soprattutto se l'obiettivo è il supporto multipiattaforma. Voglio sottolineare che è assolutamente possibile creare straordinarie app Electron con abbastanza impegno e dedizione. Per Excalidraw Desktop, non eravamo lì.
Dove si era interrotto Excalidraw Desktop
Finora Excalidraw Desktop è fondamentalmente l'app web Excalidraw integrata come file .asar con l'aggiunta della finestra Informazioni su Excalidraw. L'aspetto
dell'applicazione è quasi identico a quello della versione web.
Su macOS, ora c'è un menu a livello di sistema nella parte superiore dell'applicazione, ma poiché nessuna delle azioni di menu, a parte Chiudi finestra e Informazioni su Excalidraw, è collegata a qualsiasi cosa, il menu nello stato attuale è praticamente inutile. Nel frattempo, tutte le azioni possono essere eseguite tramite le normali barre degli strumenti Excalidraw e il menu contestuale.
Utilizziamo electron-builder, che supporta le associazioni di tipi di file.
Se fai doppio clic su un file .excalidraw, dovresti aprire l'app Excalidraw Desktop. L'estratto pertinente del nostro file electron-builder.json ha il seguente aspetto:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Purtroppo, in pratica, questa operazione non funziona sempre come previsto poiché, a seconda del tipo di installazione (per l'utente corrente, per tutti gli utenti), le app su Windows 10 non hanno i diritti per associare a se stesse un tipo di file.
Queste carenze e il lavoro in sospeso per rendere un'esperienza realmente simile a quella di un'app su tutte le piattaforme (cosa che, di nuovo, con un impegno possibile sufficiente) ci hanno spinto a riconsiderare il nostro investimento in Excalidraw Desktop. Tuttavia, prevediamo che, per il nostro caso d'uso, non abbiamo bisogno di tutte le funzionalità offerte da Electron. L'insieme di funzionalità cresciute e cresciute del web ci offre un servizio altrettanto buono, se non migliore.
Come il web ci serve oggi e in futuro
Anche nel 2020, jQuery è ancora incredibilmente popolare. Per molti sviluppatori è diventata un'abitudine usarlo, nonostante oggi potrebbero non aver bisogno di jQuery. Esiste una risorsa simile per Electron, appropriatamente chiamata You Might Not Need Electron. Vediamo perché riteniamo di non aver bisogno di Electron.
App web progressiva installabile
Excalidraw oggi è un'app web progressiva installabile con un service worker e un file manifest dell'app web. Memorizza tutte le risorse in due cache, una per i caratteri e i CSS correlati e una per tutto il resto.
Ciò significa che l'applicazione supporta la modalità offline e può essere eseguita senza una connessione di rete. I browser basati su Chromium su desktop e su dispositivi mobili richiedono all'utente di installare l'app. La richiesta di installazione è visibile nello screenshot di seguito.
Excalidraw è configurato per essere eseguito come applicazione autonoma, quindi, quando la installi, ottieni un'app che viene eseguita in una finestra separata. È completamente integrato nell'interfaccia utente multitasking del sistema operativo e dispone della propria icona dell'app nella schermata Home, nel dock o nella barra delle applicazioni, a seconda della piattaforma in cui viene installata.
Accesso al file system
Excalidraw utilizza browser-fs-access per accedere al file system del sistema operativo. Sui browser supportati, questo consente un reale flusso di lavoro di apertura, modifica e salvataggio, nonché un reale risparmio energetico e il salvataggio con nome, con un fallback trasparente per altri browser. Puoi scoprire di più su questa funzionalità nel mio post del blog Lettura e scrittura di file e directory con la libreria browser-fs-access.
Supporto del trascinamento
I file possono essere trascinati nella finestra Excalidraw proprio come nelle applicazioni specifiche della piattaforma. Su un browser che supporta l'API File System Access, un file rilasciato può essere modificato immediatamente e le modifiche possono essere salvate nel file originale. Questa funzionalità è così intuitiva che a volte ti dimentichi di avere a che fare con un'app web.
Accesso agli appunti
Excalidraw funziona bene con gli appunti del sistema operativo. È possibile copiare e incollare interi disegni Excalidraw o anche solo singoli oggetti nei formati image/png e image/svg+xml, consentendo una facile integrazione con altri strumenti specifici della piattaforma come Inkscape o strumenti basati sul web come SVGOMG.
Gestione dei file
Excalidraw supporta già l'API File handling sperimentale, il che significa che puoi fare doppio clic sui file .excalidraw nel gestore di file del sistema operativo e aprirli direttamente nell'app Excalidraw, poiché Excalidraw viene registrata come gestore di file per i file .excalidraw nel sistema operativo.
Acquisizione dichiarativa dei link
I disegni Excalidraw possono essere condivisi tramite link. Ecco un esempio. In futuro, se Excalidraw è installato come PWA, questi link non si apriranno in una scheda del browser, ma verranno lanciati in una nuova finestra autonoma. In attesa di implementazione, questa soluzione funzionerà grazie all'acquisizione dichiarativa dei link, una proposta all'avanguardia per una nuova funzionalità della piattaforma web al momento della stesura.
Conclusione
Il web ha fatto molta strada, con sempre più funzionalità disponibili nei browser che solo un paio d'anni o addirittura mesi fa erano impensabili sul web ed esclusive per applicazioni specifiche della piattaforma. Excalidraw è in prima linea in ciò che è possibile fare nel browser, anche se è noto che non tutti i browser su tutte le piattaforme supportano ogni funzionalità che utilizziamo. Scommettendo su una strategia di miglioramento progressivo, godiamo i contenuti più recenti e migliori ovunque sia possibile, senza lasciare nessuno dietro. Visualizzazione ottimale in qualsiasi browser.
Electron ci ha servito bene, ma nel 2020 e oltre, possiamo farne a meno. E anche per questo scopo di @vjeux: poiché ora il Play Store Android accetta le PWA in un formato container chiamato Attività web attendibile e Microsoft Store supporta le PWA, in un futuro non troppo lontano ci si può aspettare Excalidraw in questi store. Nel frattempo, puoi sempre utilizzare e installare Excalidraw nel e dal browser.
Ringraziamenti
Questo articolo è stato rivisto da @lipis, @dwelle e Joe Medley.