Pelajari alasan project Excalidraw memutuskan untuk menghentikan penggunaan wrapper Electron-nya demi mendukung web .
Pada project Excalidraw, kami telah memutuskan untuk menghentikan penggunaan Excalidraw Desktop, Wrapper Electron untuk Excalidraw, yang mendukung versi web yang Anda dapat—dan selalu bisa—temukan di excalidraw.com. Setelah melakukan analisis yang cermat, kita telah memutuskan bahwa Progressive Web App (PWA) adalah masa depan yang ingin kami bangun pada saat yang sama. Baca terus untuk mengetahui alasannya.
Bagaimana Excalidraw Desktop terbentuk
Segera setelah @vjeux membuat versi awal Excalidraw di Januari 2020 dan membuat blog tentang hal itu, ia mengusulkan hal berikut di Masalah #561:
Akan sangat baik untuk menggabungkan Excalidraw dalam Electron (atau yang setara) dan memublikasikannya sebagai [khusus platform] aplikasi ke berbagai {i>app store<i}.
Reaksi langsung dari @voluntadpear adalah untuk menyarankan:
Bagaimana dengan menjadikannya PWA? Saat ini, Android mendukung penambahan aplikasi tersebut 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 :)
Upaya konversi versi Excalidraw menjadi PWA dimulai dengan @voluntadpear dan setelahnya, @lipis secara mandiri memajukan dan membuat repo terpisah untuk Excalidraw Desktop.
Sampai hari ini, sasaran awal yang ditetapkan oleh @vjeux, yaitu untuk mengirimkan Excalidraw ke berbagai app store, belum dijangkau. Jujur, belum ada yang memulai proses pengiriman ke toko mana pun. Mengapa demikian? Sebelum saya menjawab, mari melihat Electron, platformnya.
Apa itu Elektron?
Nilai jual Elektron yang unik adalah kemampuan ini memungkinkan Anda "membangun aplikasi desktop lintas platform dengan JavaScript, HTML, dan CSS". Aplikasi yang dibangun dengan Elektron "kompatibel dengan Mac, Windows, dan Linux", yaitu, "Aplikasi Elektron dibuat dan berjalan di tiga platform". Menurut beranda, bagian sulit yang dibuat dengan mudah oleh Elektron adalah update otomatis, menu dan notifikasi tingkat sistem, pelaporan error, proses debug dan pembuatan profil, serta Penginstal Windows. Ternyata, beberapa fitur yang dijanjikan memerlukan gambaran kecil yang rinci.
Misalnya, update otomatis " [saat ini] hanya [didukung] di macOS dan Windows. Ada tidak ada dukungan bawaan untuk {i>auto-updater<i} di Linux, jadi disarankan untuk menggunakan pengelola paket untuk mengupdate aplikasi".
Developer dapat membuat menu tingkat sistem dengan memanggil
Menu.setApplicationMenu(menu). Pada Windows dan Di Linux, menu akan diatur sebagai menu atas setiap jendela, sedangkan di macOS ada banyak menu standar yang ditentukan oleh sistem, seperti Layanan Google Spreadsheet. Untuk menjadikan menu seseorang sebagai menu standar, developer harus menyetelrolemenu mereka, dan Elektron akan mengenalinya dan membuatnya menjadi menu standar. Ini berarti bahwa banyak kode terkait menu akan menggunakan pemeriksaan platform berikut:const isMac = process.platform === 'darwin'.Windows {i>Installer<i} dapat dibuat dengan windows-installer. README project menyoroti bahwa "untuk aplikasi produksi, Anda perlu menandatangani permohonan. milik Internet Explorer Filter SmartScreen akan memblokir aplikasi Anda agar tidak diunduh, dan banyak vendor antivirus menganggap aplikasi Anda sebagai malware, kecuali jika Anda mendapatkan sertifikat yang valid" [sic].
Hanya dengan melihat ketiga contoh ini, sudah jelas bahwa Elektron masih jauh dari kata “tulis sekali, jalankan di mana saja". Untuk mendistribusikan aplikasi di {i>app store<i} Anda membutuhkan penandatanganan kode, sebuah teknologi keamanan untuk menyertifikasi kepemilikan aplikasi. Mengemas aplikasi membutuhkan penggunaan alat seperti forge elektronik dan memikirkan tempat untuk paket {i>host<i} untuk pembaruan aplikasi. Ini menjadi kompleks dengan relatif cepat, terutama ketika tujuan adalah dukungan lintas platform. Saya ingin mencatat bahwa sebenarnya dapat digunakan untuk membuat Aplikasi elektron dengan upaya dan dedikasi yang cukup. Untuk Excalidraw Desktop, kami tidak ada di sana.
Bagian terakhir Excalidraw Desktop
Sejauh ini Excalidraw Desktop pada dasarnya adalah aplikasi web Excalidraw yang dipaketkan sebagai
File .asar dengan jendela About Excalidraw tambahan. Tampilan
dan nuansa aplikasi hampir sama dengan versi webnya.
Di macOS, sekarang ada menu level sistem di bagian atas aplikasi, tetapi karena tidak ada menu selain Tutup Jendela dan Tentang Excalidraw—terhubung dengan apa pun, menu adalah, dalam keadaannya saat ini, sangat tidak berguna. Sementara itu, semua tindakan tentu saja dapat dilakukan melalui {i>toolbar<i} Excalidraw reguler dan menu konteks.
Kami menggunakan alat pembuat elektronik, yang mendukung
pengaitan jenis file.
Dengan mengklik dua kali file .excalidraw, idealnya aplikasi Excalidraw Desktop akan terbuka. Tujuan
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, pada praktiknya, ini tidak selalu berfungsi sebagaimana mestinya, karena, tergantung pada (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 masih harus dilakukan untuk membuat pengalaman benar-benar layaknya aplikasi di semua platform (yang, sekali lagi, dengan upaya yang cukup dapat diwujudkan) merupakan argumen yang kuat bagi kami untuk mempertimbangkan kembali investasi di Excalidraw Desktop. Argumen yang lebih besar bagi kami adalah bahwa kami meramalkan bahwa untuk kasus penggunaan kita, kita tidak memerlukan semua fitur yang ditawarkan Electron. Generasi yang terus tumbuh dan terus berkembang kemampuan web melayani kita dengan sama baiknya, bahkan mungkin lebih baik.
Cara web melayani kita saat ini dan di masa depan
Bahkan pada tahun 2020, jQuery masih sangat populer. Untuk banyak pengembang telah menjadi kebiasaan untuk menggunakannya, meskipun sekarang mereka mungkin tidak memerlukan jQuery. Ada sumber daya serupa untuk Elektron, tepat disebut You Might Not Need Electron. Biarkan saya secara garis besar mengapa kita berpikir kita 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. Ia menyimpan semua sumber dayanya dalam {i>cache<i} dalam dua {i>cache<i}, satu untuk font dan CSS terkait font, dan satu untuk lainnya.
Artinya, aplikasi dapat sepenuhnya offline dan dapat berjalan tanpa koneksi jaringan. Browser berbasis Chromium di desktop dan perangkat seluler akan meminta pengguna untuk menginstal aplikasi. Anda dapat melihat petunjuk penginstalan pada screenshot di bawah.
Excalidraw dikonfigurasi untuk dijalankan sebagai aplikasi mandiri, sehingga saat Anda menginstalnya, Anda akan mendapatkan aplikasi yang berjalan di jendelanya sendiri. Alat ini sepenuhnya terintegrasi dalam UI {i>multitasking<i} sistem operasi dan mendapatkan ikon aplikasinya sendiri di layar utama, Dock, atau taskbar; tergantung pada {i>platform<i} tempat Anda menginstal anotasi.
Akses sistem file
Excalidraw menggunakan browser-fs-access untuk yang mengakses sistem file dari sistem operasi. Pada browser pendukung, hal ini memungkinkan open→edit→save alur kerja dan aktual yang disimpan secara berlebihan dan "save as", dengan fallback transparan untuk browser lain. Anda dapat mempelajari fitur ini lebih lanjut di postingan blog saya Membaca dan menulis file serta direktori dengan library browser-fs-access.
Dukungan tarik lalu lepas
File dapat ditarik lalu dilepas ke jendela Excalidraw seperti di aplikasi khusus platform. Pada browser yang mendukung File System Access API, file dapat segera diedit dan modifikasi disimpan ke file aslinya. Hal ini sangat intuitif sehingga Anda terkadang lupa sedang berurusan dengan aplikasi web.
Akses papan klip
Excalidraw berfungsi baik dengan papan klip sistem operasi. Seluruh gambar Excalidraw atau hanya
setiap objek dapat disalin dan ditempelkan dalam format image/png dan image/svg+xml, yang memungkinkan
integrasi yang mudah dengan alat khusus platform lainnya seperti Inkscape atau solusi berbasis web
alat seperti SVGOMG.
Proses penanganan file
Excalidraw sudah mendukung File Handling API eksperimental,
yang berarti file .excalidraw dapat diklik dua kali
di {i>file manager<i} sistem operasi dan
buka langsung di aplikasi Excalidraw, karena Excalidraw mendaftar sebagai pengendali file untuk .excalidraw
dalam sistem operasi.
Pengambilan link deklaratif
Gambar Excalidraw dapat dibagikan dengan link. Berikut adalah contoh. Di masa mendatang, jika pengguna menginstal Excalidraw sebagai PWA, link tersebut tidak akan terbuka di tab browser, tetapi meluncurkan jendela mandiri baru. Penerapan tertunda, proses ini akan berfungsi berkat pengambilan link deklaratif, sebuah proposal yang masih aktual untuk fitur platform web baru pada saat penulisan ini.
Kesimpulan
Web telah berkembang pesat, dengan semakin banyak fitur yang mendarat di browser yang hanya memerlukan beberapa bertahun-tahun atau bahkan berbulan-bulan yang lalu adalah hal yang terpikirkan di web dan eksklusif untuk aplikasi khusus platform. Excalidraw berada di garis depan dari apa yang mungkin dilakukan di browser, sekaligus mengakui bahwa semua browser di semua platform mendukung setiap fitur yang kita gunakan. Dengan bertaruh pada progresif ini, kami dapat menikmati yang terbaru dan terbaik sebisa mungkin, tetapi tanpa meninggalkan siapa pun tertinggal. Paling sering dilihat di semua browser.
Elektron telah melayani kita dengan baik, tetapi pada tahun 2020 dan seterusnya, kita dapat hidup tanpanya. Oh, dan untuk itu @vjeux: karena Android Play Store kini menerima PWA dalam format penampung yang disebut Aktivitas Web Tepercaya dan sejak Microsoft Store mendukung PWA, juga, Anda dapat mengharapkan Excalidraw di toko-toko ini dalam waktu yang tidak terlalu lama. Sementara itu, Anda dapat selalu gunakan dan instal Excalidraw di dalam dan dari browser.
Ucapan terima kasih
Artikel ini diulas oleh @lipis, @dwelle, dan Joe Medley.