Menghentikan penggunaan Excalidraw Electron dan mendukung versi web

Pelajari alasan project Excalidraw memutuskan untuk menghentikan penggunaan wrapper Electron mereka dan beralih ke versi web.

Pada project Excalidraw, kami telah memutuskan untuk menghentikan penggunaan Excalidraw Desktop, wrapper Electron untuk Excalidraw, dan beralih ke versi web yang dapat Anda—dan selalu dapat—temukan di excalidraw.com. Setelah analisis yang cermat, kami telah memutuskan bahwa Progressive Web App (PWA) adalah masa depan yang ingin kami bangun. Baca terus untuk mengetahui alasannya.

Asal-usul Excalidraw Desktop

Segera setelah @vjeux membuat versi awal Excalidraw pada Januari 2020 dan mempostingnya di blog, ia mengusulkan hal berikut di Masalah #561:

Akan sangat bagus jika Anda menggabungkan Excalidraw dalam Electron (atau yang setara) dan memublikasikannya sebagai aplikasi [khusus platform] ke berbagai app store.

Reaksi langsung dari @voluntadpear adalah menyarankan:

Bagaimana jika membuatnya menjadi PWA? Android saat ini mendukung penambahannya ke Play Store sebagai Aktivitas Web Tepercaya dan semoga iOS akan segera melakukan hal yang sama. Di Desktop, Chrome memungkinkan Anda mendownload pintasan desktop ke PWA.

Keputusan yang diambil @vjeux pada akhirnya cukup sederhana:

Kita harus melakukan keduanya :)

Saat pekerjaan untuk mengonversi versi Excalidraw menjadi PWA dimulai oleh @voluntadpear dan kemudian yang lainnya, @lipis secara independen melanjutkan dan membuat repo terpisah untuk Excalidraw Desktop.

Hingga saat ini, sasaran awal yang ditetapkan oleh @vjeux, yaitu mengirimkan Excalidraw ke berbagai app store, belum tercapai. Sejujurnya, belum ada yang memulai proses pengiriman ke toko mana pun. Namun, mengapa demikian? Sebelum menjawab, mari kita lihat Electron, platform-nya.

Apa yang dimaksud dengan Electron?

Keunggulan Electron adalah memungkinkan Anda "mem-build aplikasi desktop lintas platform dengan JavaScript, HTML, dan CSS". Aplikasi yang dibuat dengan Electron "kompatibel dengan Mac, Windows, dan Linux", yaitu, "Aplikasi Electron dibuat dan dijalankan di tiga platform". Menurut halaman beranda, bagian sulit yang dipermudah oleh Electron adalah update otomatis, menu dan notifikasi tingkat sistem, pelaporan error, proses debug dan pembuatan profil, serta penginstal Windows. Ternyata, beberapa fitur yang dijanjikan perlu dilihat secara mendetail.

  • Misalnya, update otomatis "[saat ini] hanya [didukung] di macOS dan Windows. Tidak ada dukungan bawaan untuk update otomatis di Linux, jadi sebaiknya gunakan pengelola paket distribusi untuk mengupdate aplikasi Anda".

  • Developer dapat membuat menu tingkat sistem dengan memanggil Menu.setApplicationMenu(menu). Di Windows dan Linux, menu akan ditetapkan sebagai menu atas setiap jendela, sedangkan di macOS ada banyak menu standar yang ditentukan sistem, seperti menu Layanan. Untuk menjadikan menu sebagai menu standar, developer harus menetapkan role menu mereka dengan benar, dan Electron akan mengenalinya dan menjadikannya menu standar. Artinya, banyak kode terkait menu akan menggunakan pemeriksaan platform berikut: const isMac = process.platform === 'darwin'.

  • Penginstal Windows dapat dibuat dengan windows-installer. README project menunjukkan bahwa "untuk aplikasi produksi, Anda harus menandatangani aplikasi. Filter SmartScreen Internet Explorer akan memblokir aplikasi Anda agar tidak didownload, dan banyak vendor anti-virus akan menganggap aplikasi Anda sebagai malware kecuali jika Anda mendapatkan sertifikat yang valid" [sic].

Hanya dengan melihat tiga contoh ini, jelas bahwa Electron jauh dari "tulis sekali, jalankan di mana saja". Mendistribusikan aplikasi di app store memerlukan penandatanganan kode, teknologi keamanan untuk mendapatkan sertifikasi kepemilikan aplikasi. Untuk mengemas aplikasi, Anda harus menggunakan alat seperti electron-forge dan memikirkan tempat menghosting paket untuk update aplikasi. Hal ini menjadi rumit dengan relatif cepat, terutama jika tujuannya benar-benar adalah dukungan lintas platform. Saya ingin menyampaikan bahwa Anda pasti dapat membuat aplikasi Electron yang menakjubkan dengan upaya dan dedikasi yang cukup. Untuk Excalidraw Desktop, kami tidak ada di sana.

Lanjutkan dari bagian terakhir Excalidraw Desktop

Excalidraw Desktop sejauh ini pada dasarnya adalah aplikasi web Excalidraw yang dipaketkan sebagai file .asar dengan jendela Tentang Excalidraw yang ditambahkan. Tampilan dan nuansa aplikasi hampir sama dengan versi web.

Aplikasi Desktop Excalidraw yang berjalan di wrapper Electron.
Excalidraw Desktop hampir tidak dapat dibedakan dengan versi web
Jendela 'Tentang' Excalidraw Desktop yang menampilkan versi wrapper Electron dan aplikasi web.
Menu Tentang Excalibur yang memberikan insight tentang versi

Di macOS, kini ada menu tingkat sistem di bagian atas aplikasi, tetapi karena tidak ada tindakan menu —selain Close Window dan About Excalidraw—yang terhubung ke apa pun, menu dalam keadaan saat ini, cukup tidak berguna. Sementara itu, semua tindakan tentu saja dapat dilakukan melalui toolbar Excalidraw reguler dan menu konteks.

Panel menu Desktop Excalidraw di macOS dengan item menu 'File', 'Close Window' dipilih.
Panel menu Excalidraw Desktop di macOS

Kami menggunakan electron-builder, yang mendukung asosiasi jenis file. Dengan mengklik dua kali file .excalidraw, idealnya aplikasi Desktop Excalidraw akan terbuka. Cuplikan yang relevan dari file electron-builder.json kita terlihat seperti ini:

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

Sayangnya, dalam praktiknya, hal ini tidak selalu berfungsi seperti yang diinginkan, karena, bergantung pada jenis penginstalan (untuk pengguna saat ini, untuk semua pengguna), aplikasi di Windows 10 tidak memiliki hak untuk mengaitkan jenis file dengan dirinya sendiri.

Kekurangan ini dan pekerjaan yang tertunda untuk membuat pengalaman benar-benar seperti aplikasi di semua platform (yang, sekali lagi, dengan upaya yang cukup mungkin) adalah argumen kuat bagi kami untuk mempertimbangkan kembali investasi kami di Excalidraw Desktop. Namun, argumen yang lebih besar bagi kami adalah kami memperkirakan bahwa untuk kasus penggunaan kami, kami tidak memerlukan semua fitur yang ditawarkan Electron. Kumpulan kemampuan web yang berkembang dan terus berkembang memberikan layanan yang sama baiknya, jika tidak lebih baik.

Cara web melayani kita saat ini dan di masa mendatang

Bahkan pada tahun 2020, jQuery masih sangat populer. Bagi banyak developer, penggunaan jQuery telah menjadi kebiasaan, meskipun saat ini mereka mungkin tidak memerlukan jQuery. Ada referensi serupa untuk Electron, yang tepat disebut Anda Mungkin Tidak Perlu Electron. Izinkan saya menguraikan alasan kami tidak memerlukan Electron.

Progressive Web App yang Dapat Diinstal

Saat ini, Excalidraw adalah Progressive Web App yang dapat diinstal dengan pekerja layanan dan manifes aplikasi web. Font cache semua resource-nya dalam dua cache, satu untuk font dan CSS terkait font, dan satu lagi untuk semua yang lain.

Tab Aplikasi Chrome DevTools menampilkan dua cache Excalidraw.
Konten cache Exaclidraw

Artinya, aplikasi sepenuhnya dapat digunakan secara offline dan dapat berjalan tanpa koneksi jaringan. Browser berbasis Chromium di desktop dan seluler meminta pengguna untuk menginstal aplikasi. Anda dapat melihat perintah penginstalan di screenshot di bawah.

Excalidraw meminta pengguna untuk menginstal aplikasi di Chrome di macOS.
Dialog penginstalan Excalidraw di Chrome

Excalidraw dikonfigurasi untuk berjalan sebagai aplikasi mandiri, sehingga saat menginstalnya, Anda akan mendapatkan aplikasi yang berjalan di jendelanya sendiri. Aplikasi ini terintegrasi sepenuhnya dalam UI multitasking sistem operasi dan mendapatkan ikon aplikasinya sendiri di layar utama, Dock, atau taskbar; bergantung pada platform tempat Anda menginstalnya.

Excalidraw berjalan di jendelanya sendiri.
PWA Excalidraw di jendela mandiri
Ikon Excalidraw di Dock macOS.
Ikon Excalidraw di Dock macOS

Akses sistem file

Excalidraw menggunakan browser-fs-access untuk mengakses sistem file sistem operasi. Pada browser yang mendukung, hal ini memungkinkan alur kerja buka→edit→simpan yang sebenarnya dan penyimpanan berlebih dan "simpan sebagai" yang sebenarnya, dengan penggantian transparan untuk browser lain. Anda dapat mempelajari lebih lanjut fitur ini di postingan blog saya Membaca dan menulis file dan direktori dengan library browser-fs-access.

Dukungan tarik lalu lepas

File dapat ditarik lalu dilepaskan ke jendela Excalidraw seperti pada aplikasi khusus platform. Di browser yang mendukung File System Access API, file yang dilepas dapat langsung diedit dan modifikasi disimpan ke file asli. Hal ini sangat intuitif sehingga Anda terkadang lupa bahwa Anda sedang menggunakan aplikasi web.

Akses papan klip

Excalidraw berfungsi dengan baik dengan papan klip sistem operasi. Seluruh gambar Excalidraw atau juga objek individual dapat disalin dan ditempel dalam format image/png dan image/svg+xml, sehingga memungkinkan integrasi yang mudah dengan alat khusus platform lainnya seperti Inkscape atau alat berbasis web seperti SVGOMG.

Menu konteks Excalidraw yang menampilkan item menu 'salin ke papan klip sebagai SVG' dan 'salin ke papan klip sebagai PNG'.
Menu konteks Excalidraw yang menawarkan tindakan papan klip

Penanganan file

Excalidraw sudah mendukung File Handling API eksperimental, yang berarti file .excalidraw dapat diklik dua kali di pengelola file sistem operasi dan terbuka langsung di aplikasi Excalidraw, karena Excalidraw terdaftar sebagai pengendali file untuk file .excalidraw di sistem operasi.

Gambar Excalidraw dapat dibagikan melalui link. Berikut adalah contohnya. Di masa mendatang, jika pengguna menginstal Excalidraw sebagai PWA, link tersebut tidak akan terbuka di tab browser, tetapi akan meluncurkan jendela mandiri baru. Tindakan ini akan berfungsi setelah penerapannya, berkat penangkapan link deklaratif, yang pada saat penulisan ini merupakan proposal terbaru untuk fitur platform web baru.

Kesimpulan

Web telah berkembang pesat, dengan semakin banyak fitur yang muncul di browser yang hanya beberapa tahun atau bahkan beberapa bulan yang lalu tidak terpikirkan di web dan eksklusif untuk aplikasi khusus platform. Excalidraw berada di garis depan dari apa yang mungkin dilakukan di browser, sambil mengakui bahwa tidak semua browser di semua platform mendukung setiap fitur yang kita gunakan. Dengan mengandalkan strategi peningkatan progresif, kami dapat menikmati yang terbaru dan terbaik jika memungkinkan, tetapi tanpa mengabaikan siapa pun. Sebaiknya lihat di browser apa pun.

Electron telah melayani kita dengan baik, tetapi pada tahun 2020 dan seterusnya, kita dapat hidup tanpanya. Oh, dan untuk tujuan @vjeux: karena Android Play Store kini menerima PWA dalam format penampung yang disebut Trusted Web Activity dan karena Microsoft Store juga mendukung PWA, Anda dapat mengharapkan Excalidraw di toko ini dalam waktu dekat. Sementara itu, Anda dapat selalu menggunakan dan menginstal Excalidraw di dan dari browser.

Ucapan terima kasih

Artikel ini ditinjau oleh @lipis, @dwelle, dan Joe Medley.