Pelajari alasan project Excalidraw memutuskan untuk menghentikan wrapper Electron mereka dan memilih 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 temukan—dan selalu dapat ditemukan—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 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 hari ini, sasaran awal yang ditetapkan oleh @vjeux, yaitu, untuk 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 itu Elektron?
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 dibuat dengan mudah oleh Electron adalah update otomatis, menu dan notifikasi tingkat sistem, pelaporan error, proses debug dan pembuatan profil, serta installer Windows. Ternyata, beberapa fitur yang dijanjikan perlu mempertimbangkan cetakan kecilnya.
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 Services. Untuk menjadikan menu sebagai menu standar, developer harus menetapkanrolemenu 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 antivirus 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.
Tempat Excalidraw Desktop berhenti
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 identik dengan versi web.
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.
Kita menggunakan electron-builder, yang mendukung
asosiasi jenis file.
Dengan mengklik dua kali file .excalidraw, idealnya aplikasi Desktop Excalidraw akan terbuka. Kutipan
yang relevan dari file electron-builder.json akan 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, kita tidak memerlukan semua fitur yang ditawarkan Electron. Rangkaian kemampuan web yang berkembang dan terus berkembang juga sangat baik bagi kami, bahkan lebih baik lagi.
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.
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 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.
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 dilepas 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.
Penanganan file
Excalidraw sudah mendukung File Handling API eksperimental,
yang berarti file .excalidraw dapat diklik dua kali di pengelola file sistem operasi dan
dibuka langsung di aplikasi Excalidraw, karena Excalidraw terdaftar sebagai pengendali file untuk file
.excalidraw dalam sistem operasi.
Pengambilan link deklaratif
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 pengambilan 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, sekaligus 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.