Dowiedz się, dlaczego twórcy projektu Excalidraw postanowili wycofać oprogramowanie Electron na rzecz wersji internetowej.
W przypadku projektu Excalidraw postanowiliśmy wycofać wersję na komputer, czyli opakowanie Electron dla Excalidraw, na rzecz wersji internetowej, którą można znaleźć na stronie excalidraw.com. Po dokładnej analizie uznaliśmy, że progresywna aplikacja internetowa (PWA) to przyszłość, na której chcemy się skupić. Czytaj dalej, aby dowiedzieć się, dlaczego.
Jak powstała wersja Excalidraw na komputer
Wkrótce po tym, jak @vjeux utworzył pierwszą wersję Excalidraw w styczniu 2020 r. i opisał ją w blogu, zaproponował w problemie 561:
Warto byłoby owinąć Excalidraw w Electron (lub jego odpowiednik) i opublikować jako aplikację [dla konkretnej platformy] w różnych sklepach z aplikacjami.
Natychmiastowa reakcja użytkownika @voluntadpear:
Czy nie lepiej zrobić z niej PWA? Android obecnie obsługuje dodawanie ich do Sklepu Play jako zaufanych działań w internecie. Mamy nadzieję, że wkrótce będzie to możliwe również w iOS. Na komputerze przeglądarka Chrome umożliwia pobranie skrótu do aplikacji PWA.
Ostatecznie @vjeux podjął prostą decyzję:
Powinniśmy zrobić i jedno, i drugie :)
Prace nad przekształceniem wersji Excalidraw w aplikację PWA rozpoczęły się, gdy @voluntadpear i inni później @lipis niezależnie od siebie przeprowadzili i utworzyli oddzielne repozytorium dla Excalidraw na komputer.
Do dziś nie udało się osiągnąć początkowego celu wyznaczonego przez użytkownika @vjeux, czyli przesłania aplikacji Excalidraw do różnych sklepów z aplikacjami. Szczerze mówiąc, nikt nie rozpoczął procesu przesyłania do żadnego ze sklepów. Dlaczego? Zanim odpowiem, przyjrzyjmy się platformie Electron.
Co to jest Electron?
Unikalną zaletą Electron jest to, że pozwala „tworzyć wieloplatformowe aplikacje na komputery z wykorzystaniem JavaScriptu, HTML i CSS”. Aplikacje utworzone za pomocą Electron są „zgodne z systemami Mac, Windows i Linux”, co oznacza, że „aplikacje Electron są tworzone i uruchamiane na 3 platformach”. Według strony głównej trudne zadania, które Electron ułatwia, to: automatyczne aktualizacje, menu i powiadomienia na poziomie systemu, zgłaszanie awarii, debugowanie i profilowanie oraz instalatory Windowsa. Okazuje się, że niektóre z obiecanych funkcji wymagają dokładnego zapoznania się z drobnym drukiem.
Na przykład automatyczne aktualizacje [obecnie] są obsługiwane tylko w systemach macOS i Windows. W Linuxie nie ma wbudowanego wsparcia dla automatycznej aktualizacji, dlatego zalecamy użycie menedżera pakietów dystrybucji do zaktualizowania aplikacji”.
Deweloperzy mogą tworzyć menu na poziomie systemu, wywołując funkcję
Menu.setApplicationMenu(menu). W systemach Windows i Linux menu będzie ustawione jako menu górne każdego okna, a w systemie macOS jest wiele standardowych menu zdefiniowanych przez system, takich jak menu Usługi. Aby menu stało się menu standardowym, deweloperzy powinni odpowiednio skonfigurować wartośćrole, a Electron je rozpozna i uczyni standardowymi. Oznacza to, że wiele kodu związanego z menu będzie używać tego sprawdzenia platformy:const isMac = process.platform === 'darwin'.Instalatory Windows można tworzyć za pomocą windows-installer. W pliku README projektu podano, że „w przypadku aplikacji produkcyjnej musisz ją podpisać. Filtr SmartScreen przeglądarki Internet Explorer zablokuje pobieranie aplikacji, a wielu dostawców oprogramowania antywirusowego uzna ją za złośliwe, chyba że uzyskasz prawidłowy certyfikat. [sic].
Wystarczy spojrzeć na te 3 przykłady, aby zrozumieć, że Electron to nie „napisz raz, uruchom wszędzie”. Rozpowszechnianie aplikacji w sklepach z aplikacjami wymaga podpisywania kodu, czyli technologii zabezpieczeń służącej do potwierdzania własności aplikacji. Pakowanie aplikacji wymaga użycia narzędzi takich jak electron-forge oraz zastanowienia się, gdzie przechowywać pakiety z aktualizacjami aplikacji. Sprawy się komplikują stosunkowo szybko, zwłaszcza gdy celem jest obsługa na wielu platformach. Pamiętaj, że zdecydowanie można tworzyć wspaniałe aplikacje Electron, jeśli włożysz w to odpowiedni wysiłek i poświęcisz temu czas. W przypadku Excalidraw Desktop nie udało się nam tego osiągnąć.
Gdzie kończy się Excalidraw na komputery
Do tej pory Excalidraw na komputerze to w podstawie aplikacja internetowa Excalidraw w pakiecie jako plik .asar z dodatkowym oknem Informacje o Excalidraw. Aplikacja wygląda i działa prawie tak samo jak jej wersja internetowa.
W systemie macOS u góry aplikacji znajduje się teraz menu na poziomie systemu, ale ponieważ żadne z jego elementów (poza opcjami Zamknij okno i Informacje o Excalidraw) nie jest połączone z niczym, menu w obecnej postaci jest dość bezużyteczne. Wszystkie czynności można oczywiście wykonywać za pomocą zwykłych pasków narzędzi Excalidraw i menu kontekstowych.
Używamy electron-builder, który obsługuje kojarzenie typów plików.
Po dwukrotnym kliknięciu pliku .excalidraw powinna otworzyć się aplikacja Excalidraw na komputer. Odpowiedni fragment pliku electron-builder.json wygląda tak:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
W praktyce nie zawsze działa to tak, jak powinno, ponieważ w zależności od typu instalacji (dla bieżącego użytkownika lub dla wszystkich użytkowników) aplikacje w Windows 10 nie mają uprawnień do kojarzenia typu pliku z samymi sobą.
Te niedociągnięcia i zaległe prace nad stworzeniem prawdziwej aplikacji na wszystkich platformach (które, jak już wspominaliśmy, przy odpowiednim nakładzie pracy są możliwe) skłoniły nas do ponownego rozważenia inwestycji w Excalidraw na komputer. Jednak ważniejszym argumentem było dla nas to, że w naszym przypadku nie potrzebujemy wszystkich funkcji oferowanych przez Electron. Rozwijający się i stale poszerzający się zestaw możliwości internetu służy nam równie dobrze, a czasem nawet lepiej.
Jak internet służy nam dzisiaj i w przyszłości
Nawet w 2020 r. jQuery jest nadal niesamowicie popularne. Dla wielu programistów stało się to nawykiem, mimo że może im nie być potrzebna jQuery. W przypadku Electrona istnieje podobny materiał, który trafnie nosi nazwę Electron – czy na pewno Ci go trzeba?. Wyjaśnię, dlaczego naszym zdaniem nie potrzebujemy Electrona.
Instalowana progresywna aplikacja internetowa
Obecnie Excalidraw to instalowalna progresywna aplikacja internetowa z skryptem service worker i pliku manifestu aplikacji internetowej. Wszystkie zasoby są przechowywane w 2 miejscach: jedno to czcionki i CSS związane z czcionkami, a drugie to wszystko inne.
Oznacza to, że aplikacja może działać w trybie offline i nie wymaga połączenia z internetem. Przeglądarki oparte na Chromium na komputerach i urządzeniach mobilnych wyświetlają użytkownikowi prośbę o zainstalowanie aplikacji. Na poniższym zrzucie ekranu widać prośbę o zainstalowanie.
Excalidraw jest skonfigurowane tak, aby działać jako samodzielna aplikacja, więc po zainstalowaniu otrzymasz aplikację, która działa w swoim własnym oknie. Jest ona w pełni zintegrowana z interfejsem wielozadaniowości systemu operacyjnego i ma własną ikonę na ekranie głównym, w Docku lub na pasku aplikacji (w zależności od platformy).
Dostęp do systemu plików
Excalidraw używa uprawnienia browser-fs-access do uzyskiwania dostępu do systemu plików systemu operacyjnego. W obsługiwanych przeglądarkach umożliwia to prawdziwy przepływ pracy: otwórz → edytuj → zapisz oraz rzeczywiste zapisywanie z zastąpieniem i „zapisz jako”, z przejrzystym rozwiązaniem alternatywnym w przypadku innych przeglądarek. Więcej informacji o tej funkcji znajdziesz w poście na blogu Czytanie i zapisywanie plików i katalogów za pomocą biblioteki browser-fs-access.
Obsługa przeciągania i upuszczania
Podobnie jak w przypadku aplikacji platformowych, pliki można przeciągać i upuszczać w oknie Excalidraw. W przeglądarce obsługującej interfejs API dostępu do systemu plików można natychmiast edytować przeciągnięty plik i zapisać zmiany w oryginalnym pliku. Jest to tak intuicyjne, że czasem zapominamy, że mamy do czynienia z aplikacją internetową.
Dostęp do schowka
Excalidraw dobrze współpracuje z buforem systemowym. Całkowite rysunki Excalidraw lub poszczególne obiekty można kopiować i wklejać w formatach image/png i image/svg+xml, co umożliwia łatwą integrację z innymi narzędziami na konkretne platformy, takimi jak Inkscape, lub narzędziami internetowymi, takimi jak SVGOMG.
Obsługa plików
Excalidraw obsługuje już eksperymentalny interfejs File Handling API, co oznacza, że pliki .excalidraw można otwierać w menedżerze plików systemu operacyjnego, a także bezpośrednio w aplikacji Excalidraw, ponieważ Excalidraw rejestruje się jako moduł obsługi plików .excalidraw w systemie operacyjnym.
Deklaratywna rejestracja linków
Rysunki w Excalidraw można udostępniać za pomocą linku. Oto przykład. W przyszłości, jeśli użytkownicy będą mieć zainstalowaną aplikację Excalidraw jako PWA, takie linki nie będą się otwierać w karcie przeglądarki, ale w nowym oknie. Do czasu wdrożenia ta funkcja będzie działać dzięki deklaratywnemu przechwyceniu linku, który w momencie pisania tego artykułu jest nowatorską propozycją funkcji nowej platformy internetowej.
Podsumowanie
Internet przebył długą drogę. W przeglądarkach pojawia się coraz więcej funkcji, które jeszcze kilka lat temu były nie do pomyślenia w internecie i wyłącznie w przypadku aplikacji na konkretne platformy. Excalidraw jest na czele możliwości przeglądarki, ale zdajemy sobie sprawę, że nie wszystkie przeglądarki na wszystkich platformach obsługują wszystkie używane przez nas funkcje. Dzięki strategii stopniowego ulepszania możemy korzystać z najnowszych i najlepszych funkcji, gdy tylko jest to możliwe, bez pozostawiania nikogo w tyle. Najlepiej wyświetla się w dowolnej przeglądarce.
Electron dobrze nam służył, ale w 2020 roku i później możemy się bez niego obejść. A co do celu @vjeux: Sklep Play na Androida obsługuje teraz PWAs w formacie kontenera o nazwie Trusted Web Activity, a Sklep Microsoft Store również obsługuje PWAs. W niedalekiej przyszłości możesz spodziewać się Excalidraw w tych sklepach. W tym czasie możesz instalować i używać Exceedraw w przeglądarce.
Podziękowania
Ten artykuł został sprawdzony przez @lipis, @dwelle i Joe Medley.