Scopri perché il progetto Excalidraw ha deciso di ritirare il proprio wrapper Electron a favore della versione web.
Per il progetto Excalidraw, abbiamo deciso di ritirare Excalidraw Desktop, un wrapper Electron per Excalidraw, in favore della versione web che puoi trovare, e hai sempre potuto trovare, all'indirizzo excalidraw.com. Dopo un'attenta analisi, abbiamo deciso che le app web progressive (PWA) sono il futuro su cui vogliamo basarci. Continua a leggere per scoprire perché.
Come è nato Excalidraw Desktop
Poco dopo che @vjeux ha creato la versione iniziale di Excalidraw a gennaio 2020 e ne ha scritto nel suo blog, ha proposto quanto segue nel Issue 561:
Sarebbe fantastico includere Excalidraw in Electron (o un equivalente) e pubblicarlo come applicazione [specifica per la piattaforma] nei vari store.
La reazione immediata di @voluntadpear è stata suggerire:
Che ne dici di renderla una PWA? Al momento Android supporta l'aggiunta di queste attività al Play Store come attività web attendibili e speriamo che presto lo stesso avvenga su iOS. Sul computer, Chrome ti consente di scaricare una scorciatoia da desktop per una PWA.
Alla fine, la decisione presa da @vjeux è stata semplice:
Dovremmo fare entrambe le cose :)
Mentre la conversione della versione di Excalidraw in una PWA è stata avviata da @voluntadpear e successivamente da altri, @lipis è proseguita in modo indipendente e ha creato un repository separato per Excalidraw Desktop.
Ad oggi, l'obiettivo iniziale fissato da @vjeux, ovvero inviare Excalibur ai vari store, non è stato ancora raggiunto. Onestamente, nessuno ha nemmeno avviato la procedura di invio in nessuno dei negozi. Ma perché? Prima di rispondere, vediamo Electron, la piattaforma.
Che cos'è Electron?
L'unico 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 vengono create ed eseguite su tre piattaforme". Secondo la home page, le parti difficili che Electron semplifica sono gli aggiornamenti automatici, i menu e le notifiche a livello di sistema, i report sugli arresti anomali, il debug e il profiling e gli installatori di Windows. A quanto pare, alcune delle funzionalità promesse richiedono un'attenta lettura delle clausole contrattuali.
Ad esempio, gli aggiornamenti automatici "sono [attualmente] supportati solo su macOS e Windows. Su Linux, non è disponibile il supporto integrato per l'aggiornamento automatico, quindi è consigliabile utilizzare il gestore di pacchetti della distribuzione per aggiornare l'app".
Gli sviluppatori possono creare menu a livello di sistema chiamando
Menu.setApplicationMenu(menu). Su Windows e Linux, il menu verrà impostato come menu superiore di ogni finestra, mentre su macOS sono disponibili molti menu standard definiti dal sistema, come il menu Servizi. Per fare in modo che i menu siano standard, gli sviluppatori devono impostare di conseguenza ilroledel menu, e Electron li riconoscerà e li renderà standard. Ciò significa che molto codice correlato al menu utilizzerà il seguente controllo della piattaforma:const isMac = process.platform === 'darwin'.I programmi di installazione di Windows possono essere creati con windows-installer. Il file README del progetto sottolinea che "per un'app di produzione devi firmare la tua applicazione. Il filtro SmartScreen di Internet Explorer bloccherà il download della tua app e molti fornitori di antivirus la considereranno malware, a meno che tu non ottenga una certificazione valida" [sic].
Osservando solo questi tre esempi, è chiaro che Electron è tutt'altro che "scrivi una volta, esegui ovunque". La distribuzione di un'app negli store richiede la firma del codice, una tecnologia di sicurezza per certificare la proprietà dell'app. Il packaging di un'app richiede l'utilizzo di strumenti come electron-forge e la scelta di dove ospitare i pacchetti per gli aggiornamenti dell'app. Diventa complesso relativamente rapidamente, soprattutto se l'obiettivo è davvero il supporto multipiattaforma. Ci tengo a sottolineare che è assolutamente possibile creare straordinarie app Electron con abbastanza impegno e dedizione. Per Excalidraw Desktop non era così.
Dove Excalidraw Desktop aveva interrotto
Finora Excalidraw Desktop è fondamentalmente l'app web Excalidraw in bundle come file .asar con una finestra Informazioni su Excalidraw aggiunta. L'aspetto
dell'applicazione è quasi identico a quello della versione web.
Su macOS, ora è presente un menu a livello di sistema nella parte superiore dell'applicazione, ma poiché nessuna delle azioni del menu, ad eccezione di Chiudi finestra e Informazioni su Excalidraw, è collegata a nulla, il menu è, nel suo stato attuale, piuttosto inutile. Nel frattempo, tutte le azioni possono essere eseguite tramite le normali barre degli strumenti di Excalidraw e il menu contestuale.
Utilizziamo electron-builder, che supporta le associazioni di tipo di file.
Se fai doppio clic su un file .excalidraw, idealmente dovrebbe aprirsi 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, questo 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 un tipo di file a se stesse.
Queste carenze e il lavoro in sospeso per rendere l'esperienza davvero simile a un'app su tutte le piattaforme (che, di nuovo, con sufficiente impegno è possibile) sono stati un argomento convincente per riconsiderare il nostro investimento in Excalidraw Desktop. L'argomento più importante per noi, però, è che prevediamo che per il nostro caso d'uso non abbiamo bisogno di tutte le funzionalità offerte da Electron. L'insieme di funzionalità del web, in continua crescita, ci serve altrettanto bene, se non meglio.
Come il web ci aiuta oggi e in futuro
Anche nel 2020, jQuery è ancora incredibilmente popolare. Per molti sviluppatori è diventata un'abitudine utilizzarlo, nonostante oggi potrebberebbero non averne bisogno. Esiste una risorsa simile per Electron, chiamata Potresti non aver bisogno di Electron. Vediamo perché riteniamo di non aver bisogno di Electron.
App web progressiva installabile
Attualmente Excalidraw è un'app web progressiva installabile con un service worker e un file manifest dell'app web. Memorizza nella cache tutte le sue risorse in due cache, una per i caratteri e i CSS relativi ai caratteri e una per tutto il resto.
Ciò significa che l'applicazione è completamente offline e può essere eseguita senza una connessione di rete. I browser basati su Chromium sia su computer che su dispositivi mobili chiedono all'utente di installare l'app. Puoi vedere la richiesta di installazione nello screenshot di seguito.
Excalidraw è configurato per essere eseguito come applicazione autonoma, quindi quando lo installi avrai un'app che viene eseguita in una finestra separata. È completamente integrato nell'interfaccia utente multitasking del sistema operativo e viene visualizzata l'icona dell'app nella schermata Home, nel dock o nella barra delle applicazioni, a seconda della piattaforma in cui la installi.
Accesso al file system
Excalidraw utilizza browser-fs-access per accedere al file system del sistema operativo. Sui browser supportati, questo consente un vero e proprio flusso di lavoro aperto→modifica→salva e un salvataggio effettivo e "Salva come", con un fallback trasparente per gli 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 di Excalidraw, come nelle applicazioni specifiche della piattaforma. Su un browser che supporta l'API File System Access, un file eliminato può essere modificato immediatamente e le modifiche possono essere salvate nel file originale. È così intuitiva che a volte dimentichi di avere a che fare con un'app web.
Accesso agli appunti
Excalidraw funziona bene con gli appunti del sistema operativo. Interi disegni di Excalidraw o solo
singoli oggetti possono essere copiati e incollati 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 di file
Excalidraw supporta già l'API di gestione dei file sperimentale,
il che significa che puoi fare doppio clic sui file .excalidraw nel gestore dei file del sistema operativo e
aprirli direttamente nell'app Excalidraw, poiché Excalidraw si registra come gestore dei file per i file .excalidraw
nel sistema operativo.
Acquisizione dei link dichiarativa
I disegni di Excalidraw possono essere condivisi tramite link. Ecco un esempio. In futuro, se gli utenti hanno installato Excalidraw come PWA, questi link non si apriranno in una scheda del browser, ma in una nuova finestra autonoma. In attesa di implementazione, questa funzionalità 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à che vengono implementate nei browser e che solo qualche anno o addirittura qualche mese fa erano impensabili sul web ed esclusive di applicazioni specifiche per la piattaforma. Excalidraw è in prima linea su ciò che è possibile nel browser, pur riconoscendo che non tutti i browser su tutte le piattaforme supportano ogni funzionalità che utilizziamo. Scommettendo su una strategia di miglioramento progressivo, godiamo delle migliori novità quando possibile, ma senza lasciare nessuno dietro. Da visualizzare preferibilmente in qualsiasi browser.
L'elettrone ci ha servito bene, ma nel 2020 e oltre, possiamo farne a meno. A proposito, per quanto riguarda l'obiettivo di @vjeux: poiché il Play Store di Android ora accetta le PWA in un formato contenitore chiamato Attività web attendibile e poiché anche il Microsoft Store supporta le PWA, puoi aspettarti di trovare Excalidraw in questi store in un futuro non troppo lontano. Nel frattempo, puoi sempre utilizzare e installare Excalidraw nel browser e dal browser.
Ringraziamenti
Questo articolo è stato esaminato da @lipis, @dwelle e Joe Medley.