Scopri perché il progetto Excalidraw ha deciso di ritirare il proprio wrapper Electron a favore del web completamente gestita.
Nel progetto Excalidraw, abbiamo deciso di ritirare Excalidraw Desktop, una Wrapper Electron per Excalidraw, in favore della versione web che hai si può trovare (e sempre possibile) all'indirizzo excalidraw.com. Dopo un'attenta analisi, hanno deciso che l'app web progressiva (PWA) è il futuro che vogliamo creare su di Google. Continua a leggere per scoprire perché.
Evoluzione di Excalidraw Desktop
Poco dopo che @vjeux ha creato la versione iniziale di Excalidraw in gennaio 2020 e ha scritto sul blog, ha proposto quanto segue nel Problema n. 561:
Sarebbe fantastico disporre di Excalidraw all'interno di Electron (o equivalente) e pubblicarlo come [specifico per la piattaforma] ai vari store.
La reazione immediata di @voluntadpear è stata suggerire:
Che ne dici di trasformarla in una PWA? Android al momento supporta l'aggiunta al Play Store come Attività web attendibili e, si spera, iOS faranno lo stesso presto. Sui computer, Chrome ti consente scaricare un collegamento sul desktop a una PWA.
La decisione che @vjeux ha preso alla fine è stata semplice:
Dovremmo fare entrambe le cose :)
Mentre la conversione della versione di Excalidraw in una PWA è stata avviata, @voluntadpear e altri successivi, @lipis in modo indipendente ha fatto progressi e ha creato un repository separato per Excalidraw Desktop.
A oggi, l'obiettivo iniziale stabilito da @vjeux, ovvero inviare Excalidraw nei vari store, ma non ancora raggiunto. Onestamente, nessuno ha mai iniziato la procedura di invio a uno qualsiasi dei negozi. Ma perché? Prima di rispondere, diamo un'occhiata a Electron, la piattaforma.
Cos'è l'elettrone?
Il punto di forza unico di Electron è che consente di "creare app desktop multipiattaforma con JavaScript, HTML e CSS". Le app create con Electron "compatibile 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 aggiornamenti automatici, menu e notifiche a livello di sistema, report sugli arresti anomali, debug e profilazione e Programmi di installazione di Windows. Risulta che alcune le caratteristiche promesse richiedono un'analisi dettagliata.
Ad esempio, gli aggiornamenti automatici "sono [attualmente] solo [supportati] su macOS e Windows. C'è nessun supporto integrato per l'aggiornamento automatico su Linux, quindi è consigliabile usare il comando gestore di pacchetti 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 il menu principale di ogni finestra, mentre su macOS ci sono molti menu standard definiti dal sistema, come Servizi o dal menu Fogli Google. Per rendere i menu standard, gli sviluppatori dovrebbero impostare il valoreroledel menu di conseguenza, ed Electron li riconoscerà e li farà diventare menu standard. Ciò significa che molte relativo al menu utilizzerà il seguente controllo della piattaforma:const isMac = process.platform === 'darwin'.I programmi di installazione di Windows possono essere creati windows-installer. Il file README del progetto sottolinea che "per un'app di produzione devi firmare la tua applicazione. Internet Explorer Il filtro SmartScreen bloccherà il download della tua app e molti fornitori di antivirus lo faranno considera la tua app come malware se non ottieni un certificato valido" [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 firma del codice, una tecnologia di sicurezza la certificazione della proprietà dell'app. La pacchettizzazione di un'app richiede l'uso di strumenti come electron-forge e stavo pensando a dove ospitare pacchetti per gli aggiornamenti delle app. Diventa complesso in tempi abbastanza brevi, soprattutto quando l'obiettivo è il supporto multipiattaforma. Ci tengo a sottolineare che è assolutamente possibile creare app elettroniche con abbastanza impegno e dedizione. Non eravamo lì per Excalidraw Desktop.
Dove si era interrotto Excalidraw Desktop
Excalidraw Desktop finora è fondamentalmente l'app web Excalidraw in bundle come
.asar con l'aggiunta di una finestra Informazioni su Excalidraw. Aspetto
e la struttura dell'applicazione
è quasi identica alla versione web.
Su macOS, ora c'è un menu a livello di sistema nella parte superiore dell'applicazione, ma poiché nessuno dei menu diverse, ad eccezione di Chiudi finestra e Informazioni su Excalidraw, sono collegate a qualsiasi elemento, il menu è, allo stato attuale, piuttosto inutile. Nel frattempo, tutte le azioni possono ovviamente essere eseguite tramite le normali barre degli strumenti di Excalidraw e il menu contestuale.
Usiamo electron-builder, che supporta
associazioni dei tipi di file.
Se fai doppio clic su un file .excalidraw, idealmente dovrebbe aprirsi l'app desktop Excalidraw. La
un 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, nella pratica, questo non sempre funziona come previsto, in quanto, a seconda del tipo di installazione (per l'utente corrente, per tutti gli utenti), le app su Windows 10 non hanno diritti necessari per associare un tipo di file.
Questi difetti e il lavoro in sospeso per rendere l'esperienza davvero simile a quella delle app su tutte le piattaforme (che, ancora una volta, con un impegno sufficiente è possibile) sono stati un argomento forte per cui abbiamo deciso di riconsiderare le nostre di 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. Un insieme cresciuto e ancora in crescita di capacità del web ci offre lo stesso livello di servizio, se non di più.
L'utilità del web oggi e in futuro
Anche nel 2020, jQuery è ancora molto popolare. Per molti agli sviluppatori è diventata un'abitudine usarla, anche se oggi potrebbe non aver bisogno di jQuery. Esiste una risorsa simile per Elettrone, chiamato appunto You potrebbe non avere bisogno di elettroni. Fammi sapere spiegando perché pensiamo di non aver bisogno dell'elettrone.
App web progressiva installabile
Excalidraw oggi è un'app web progressiva installabile con una un service worker e un file manifest dell'app web. Memorizza tutte le risorse in due cache, una per i caratteri e CSS correlati 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 richiedono all'utente di installare l'app. Puoi vedere la richiesta di installazione nello screenshot seguente.
Excalidraw è configurato per essere eseguito come applicazione autonoma, quindi quando lo installi ricevi un'app che viene eseguito in una propria finestra. È completamente integrato nell'interfaccia utente multitasking del sistema operativo. mostra la propria icona dell'app nella schermata Home, nel dock o nella barra delle applicazioni; a seconda della piattaforma su cui installi li annotino.
Accesso al file system
Excalidraw utilizza browser-fs-access per che accede al file system del sistema operativo. Sui browser supportati, questo consente apri→modifica→salva il flusso di lavoro e salva l'eccessivo risparmio e "salva con nome", con un fallback trasparente 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 come nelle applicazioni specifiche per piattaforma. Su un browser che supporta l'API File System Access, una il file può essere modificato immediatamente e le modifiche vengono salvate nel file originale. È così intuitivo che a volte ti dimentichi di avere a che fare con un'applicazione web.
Accesso agli appunti
Excalidraw funziona bene con gli appunti del sistema operativo. Interi disegni di Excalidraw o anche 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 basati sul web
come SVGOMG.
Gestione di file
Excalidraw supporta già l'API File handling sperimentale,
Ciò significa che è possibile fare doppio clic su .excalidraw file nel gestore di file del sistema operativo e
si apre direttamente nell'app Excalidraw, poiché si registra come gestore di file per .excalidraw
file nel sistema operativo.
Acquisizione dei link dichiarativa
I disegni di Excalidraw possono essere condivisi tramite link. Ecco un esempio. In futuro, se utenti hanno installato Excalidraw come PWA, questi link non si aprono in una scheda del browser, ma avviano nuova finestra autonoma. In attesa di implementazione, questa operazione funzionerà grazie a l'acquisizione dichiarativa dei link, una proposta all'avanguardia per una nuova funzionalità della piattaforma web al momento della stesura di questo articolo.
Conclusione
Il Web ha fatto molta strada, con sempre più funzionalità che arrivano nei browser e solo un paio di anni o addirittura mesi fa erano impensabili sul web ed esclusive di applicazioni specifiche della piattaforma. Excalidraw è in prima linea su ciò che è possibile nel browser, pur riconoscendo che non tutti i browser su tutte le piattaforme supportano tutte le funzionalità che utilizziamo. Scommettendo su una strategia di miglioramento della sicurezza, sfruttiamo le più recenti e straordinarie funzionalità disponibili, ma senza lasciare dietro. Visualizzazione ottimale in qualsiasi browser.
L'elettrone ci ha servito bene, ma nel 2020 e oltre, possiamo farne a meno. E per questo obiettivo di @vjeux: poiché il Play Store di Android ora accetta le PWA in un formato container chiamato Attività web attendibile poiché Microsoft Store supporta le PWA, e potrai aspettarti di trovare Excalidraw in questi negozi in un futuro non troppo lontano. Nel frattempo, puoi Usare e installare sempre Excalidraw all'interno e dal browser.
Ringraziamenti
Questo articolo è stato esaminato da @lipis, @dwelle Joe Medley.