Pelajari alasan project Excalidraw memutuskan untuk menghentikan penggunaan wrapper Electron-nya demi versi web.
Pada project Excalidraw, kami telah memutuskan untuk menghentikan Excalidraw Desktop, wrapper Electron untuk Excalidraw, demi mendukung versi web yang dapat—dan selalu bisa—Anda temukan di excalidraw.com. Setelah melakukan analisis dengan cermat, kami memutuskan bahwa Progressive Web App (PWA) adalah masa depan yang ingin kami bangun. Baca terus untuk mengetahui alasannya.
Bagaimana Excalidraw Desktop muncul
Segera setelah @vjeux membuat versi awal Excalidraw pada Januari 2020 dan membuat blog tentangnya, ia mengusulkan hal berikut di Masalah #561:
Sebaiknya gabungkan Excalidraw di dalam Electron (atau yang setara) dan publikasikan sebagai aplikasi [khusus platform] ke berbagai app store.
Reaksi langsung oleh @voluntadpear adalah menyarankan:
Bagaimana dengan menjadikannya sebagai PWA? Android saat ini mendukung penambahannya ke Play Store sebagai Aktivitas Web Tepercaya, dan semoga iOS juga 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 :)
Meskipun upaya untuk mengonversi versi Excalidraw menjadi PWA dimulai oleh @voluntadpear dan yang lainnya, @lipis secara independen melangkah ke depan 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. Mengapa begitu? Sebelum saya menjawab, mari kita lihat Electron, platform.
Apa itu Elektron?
Nilai jual unik Electron adalah memungkinkan Anda "mem-build aplikasi desktop lintas platform dengan JavaScript, HTML, dan CSS". Aplikasi yang dibangun dengan Electron "kompatibel dengan Mac, Windows, dan Linux", yaitu, "Electron apps build and run on 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 memerlukan tampilan mendetail pada cetakan kecilnya.
Misalnya, update otomatis "[saat ini] hanya [didukung] di macOS dan Windows. Tidak ada dukungan bawaan untuk updater otomatis di Linux, sehingga 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 seseorang sebagai menu standar, developer harus menyetelrolemenunya sebagaimana mestinya, dan Electron akan mengenalinya serta membuatnya menjadi menu standar. Ini berarti banyak kode terkait menu akan menggunakan pemeriksaan platform berikut:const isMac = process.platform === 'darwin'.Windows Installer dapat dilakukan dengan windows-installer. README project menandai bahwa "untuk aplikasi produksi, Anda perlu 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].
Dengan melihat tiga contoh ini, jelas bahwa Elektron jauh dari "tulis sekali, jalankan di mana saja". Pendistribusian aplikasi di app store memerlukan penandatanganan kode, yaitu teknologi keamanan untuk mensertifikasi kepemilikan aplikasi. Pengemasan aplikasi memerlukan penggunaan alat seperti electron-forge dan memikirkan tempat untuk menghosting paket untuk update aplikasi. Fungsi ini menjadi kompleks dalam waktu yang relatif cepat, terutama jika tujuannya benar-benar merupakan dukungan lintas platform. Saya ingin memberi tahu bahwa membuat aplikasi Elektron yang menakjubkan benar-benar dapat dilakukan dengan upaya dan dedikasi yang cukup. Untuk Excalidraw Desktop, kami tidak ada di sana.
Bagian terakhir Desktop Excalidraw
Excalidraw Desktop sejauh ini pada dasarnya adalah aplikasi web Excalidraw yang dipaketkan sebagai
file .asar dengan jendela About Excalidraw tambahan. Tampilan
dan nuansa aplikasi ini hampir sama dengan versi webnya.
Di macOS, sekarang 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 keadaannya saat ini, sangat tidak berguna. Sementara itu, semua tindakan tentu saja dapat dilakukan melalui toolbar Excalidraw reguler dan menu konteks.
Kami menggunakan electron-builder, yang mendukung
asosiasi jenis file.
Dengan mengklik dua kali file .excalidraw, idealnya aplikasi Excalidraw Desktop 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 sebagaimana mestinya, karena, bergantung pada jenis penginstalan (untuk pengguna saat ini, untuk semua pengguna), aplikasi di Windows 10 tidak memiliki hak untuk mengaitkan jenis file ke aplikasi itu sendiri.
Kelemahan ini dan masih menunggu keputusan untuk membuat pengalaman yang benar-benar layaknya aplikasi di semua platform (yang sekali lagi, dengan upaya yang cukup memungkinkan) menjadi argumen kuat bagi kami untuk mempertimbangkan kembali investasi kami di Excalidraw Desktop. Namun, argumen yang lebih besar bagi kami adalah bahwa kami memperkirakan bahwa untuk kasus penggunaan kami, kami tidak memerlukan semua fitur yang ditawarkan Electron. Serangkaian kemampuan web yang terus berkembang dan terus berkembang memberi kita manfaat yang sama, bahkan lebih baik lagi.
Bagaimana web melayani kita saat ini dan di masa depan
Bahkan pada tahun 2020, jQuery masih sangat populer. Bagi banyak developer, hal ini sudah menjadi kebiasaan untuk menggunakannya, meskipun saat ini mereka mungkin tidak memerlukan jQuery. Ada resource serupa untuk Electron, yang tepat disebut You Might Not Need Electron. Izinkan saya menguraikan mengapa kita merasa tidak memerlukan Elektron.
Progressive Web App yang Dapat Diinstal
Excalidraw saat ini adalah Progressive Web App yang dapat diinstal dengan pekerja layanan dan manifes aplikasi web. Semua resourcenya di-cache dalam dua cache, satu untuk font dan CSS terkait font, dan satu untuk lainnya.
Artinya, aplikasi sepenuhnya mampu offline dan dapat berjalan tanpa koneksi jaringan. Browser berbasis Chromium di desktop dan perangkat seluler meminta pengguna menginstal aplikasi. Anda dapat melihat permintaan penginstalan pada screenshot di bawah.
Excalidraw dikonfigurasi untuk dijalankan sebagai aplikasi mandiri sehingga saat menginstalnya, Anda akan mendapatkan aplikasi yang berjalan di jendelanya sendiri. Alat ini terintegrasi sepenuhnya dalam UI multitasking sistem operasi dan mendapatkan ikon aplikasinya sendiri di layar utama, Dok, atau taskbar; bergantung pada platform tempat Anda menginstalnya.
Akses sistem file
Excalidraw menggunakan browser-fs-access untuk mengakses sistem file sistem operasi. Untuk mendukung browser, hal ini memungkinkan alur kerja terbuka→edit→save yang sebenarnya serta penyimpanan berlebihan dan "simpan sebagai" yang sebenarnya, dengan penggantian transparan untuk browser lain. Anda dapat mempelajari fitur ini lebih lanjut di postingan blog saya yang berjudul Membaca dan menulis file serta direktori dengan library browser-fs-access.
Dukungan tarik lalu lepas
File dapat ditarik dan dilepas ke jendela Excalidraw seperti pada aplikasi khusus platform. Pada browser yang mendukung File System Access API, file yang dilepas dapat langsung diedit dan perubahannya akan disimpan ke file aslinya. Hal ini sangat intuitif sehingga terkadang Anda lupa bahwa Anda sedang menangani aplikasi web.
Akses papan klip
Excalidraw berfungsi dengan baik dengan papan klip sistem operasi. Seluruh gambar Excalidraw atau hanya
objek individual dapat disalin dan ditempelkan dalam format image/png dan image/svg+xml, sehingga
mudah diintegrasikan 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 file manager sistem operasi dan
dibuka langsung di aplikasi Excalidraw, karena Excalidraw terdaftar sebagai pengendali file untuk file .excalidraw
dalam sistem operasi.
Pembuatan link deklaratif
Gambar excalidraw dapat dibagikan melalui link. Berikut contohnya. Di masa mendatang, jika pengguna menginstal Excalidraw sebagai PWA, link tersebut tidak akan terbuka di tab browser, tetapi akan meluncurkan jendela mandiri baru. Jika menunggu penerapan, fitur ini akan berfungsi berkat pengambilan link deklaratif, yang pada saat penulisan proposal terbaru untuk fitur platform web baru.
Kesimpulan
Web telah berkembang pesat dengan semakin banyak fitur yang masuk ke browser yang hanya beberapa tahun atau bahkan beberapa bulan lalu tidak terpikirkan di web dan eksklusif untuk aplikasi khusus platform. Excalidraw adalah yang terdepan dalam hal yang mungkin dilakukan di browser, sekaligus mengakui bahwa tidak semua browser di semua platform mendukung setiap fitur yang kami gunakan. Dengan bertaruh pada strategi peningkatan progresif, kami menikmati yang terbaru dan terbaik sebisa mungkin, tetapi tanpa mengabaikan siapa pun. Paling sering ditonton di browser apa pun.
Elektron telah membantu kita dengan baik, tetapi pada tahun 2020 dan seterusnya, kita dapat hidup tanpanya. Oh, dan untuk tujuan @vjeux: karena Android Play Store sekarang menerima PWA dalam format container yang disebut Trusted Web Activity, dan karena Microsoft Store mendukung PWA, Anda juga dapat mengharapkan Excalidraw di toko-toko ini dalam waktu dekat. Sementara itu, Anda dapat selalu menggunakan dan menginstal Excalidraw dari dan ke browser.
Ucapan terima kasih
Artikel ini ditinjau oleh @lipis, @dwelle, dan Joe Medley.