Excalidraw projesinin, Electron sarmalayıcısının desteğini sonlandırmaya karar vererek web sürümüne geçmesinin nedenini öğrenin.
Excalidraw projesinde, Excalidraw için Electron sarmalayıcısı olan Excalidraw Desktop'un desteğini sonlandırmaya karar verdik. Bunun yerine, excalidraw.com adresinde bulabileceğiniz ve her zaman bulabileceğiniz web sürümünü kullanmaya karar verdik. Dikkatli bir analizin ardından, Progresif Web Uygulaması'nın (PWA) üzerine inşa etmek istediğimiz gelecek olduğuna karar verdik. Nedenini öğrenmek için okumaya devam edin.
Excalidraw Desktop'un ortaya çıkışı
@vjeux, Ocak 2020'de Excalidraw'ın ilk sürümünü oluşturup bununla ilgili bir blog yayını yaptıktan kısa bir süre sonra sayı 561'de şunları önerdi:
Excalidraw'ı Electron (veya eşdeğeri) içinde sarmalamak ve çeşitli uygulama mağazalarında [platforma özel] bir uygulama olarak yayınlamak harika olur.
@voluntadpear, hemen şu öneride bulundu:
Bunun yerine PWA yapmayı deneyebilir miyiz? Android şu anda bu etkinliklerin Play Store'a Güvenilir Web Etkinlikleri olarak eklenmesini desteklemektedir. iOS'te de yakında bu desteğin sunulacağını umuyoruz. Chrome, masaüstünde PWA'ların masaüstü kısayolunu indirmenize olanak tanır.
@vjeux, sonunda basit bir karar verdi:
İkisini de yapmalıyız :)
Excalidraw sürümünü PWA'ya dönüştürme çalışmaları @voluntadpear tarafından başlatılmış ve daha sonra başkaları tarafından devam ettirilmişti. Bu sırada @lipis, Excalidraw masaüstü sürümü için bağımsız olarak ayrı bir depo oluşturdu.
@vjeux tarafından belirlenen ilk hedefe (Excalidraw'ı çeşitli uygulama mağazalarına göndermek) bugüne kadar henüz ulaşılamamıştır. Dürüst olmak gerekirse, hiç kimse mağazalara gönderim sürecini başlatmadı. Bunun nedeni nedir? Yanıt vermeden önce platform olan Electron'a göz atalım.
Electron nedir?
Electron'un benzersiz satış noktası, "JavaScript, HTML ve CSS ile platformlar arası masaüstü uygulamaları oluşturmanıza" olanak tanımasıdır. Electron ile oluşturulan uygulamalar "Mac, Windows ve Linux ile uyumludur", yani "Electron uygulamaları üç platformda oluşturulur ve çalıştırılır". Ana sayfaya göre, Electron'un kolaylaştırdığı zor işlemler şunlardır: otomatik güncellemeler, sistem düzeyinde menüler ve bildirimler, kilitlenme raporları, hata ayıklama ve profil oluşturma ve Windows yükleyicileri. Söz verilen özelliklerden bazılarının küçük yazıları ayrıntılı bir şekilde incelemeyi gerektirdiği ortaya çıktı.
Örneğin, otomatik güncellemeler "[şu anda] yalnızca macOS ve Windows'ta [desteklenmektedir]. Linux'da otomatik güncelleyici için yerleşik destek yoktur. Bu nedenle, uygulamanızı güncellemek için dağıtımın paket yöneticisini kullanmanız önerilir".
Geliştiriciler
Menu.setApplicationMenu(menu)çağrısı yaparak sistem düzeyinde menüler oluşturabilir. Windows ve Linux'ta menü, her pencerenin üst menüsü olarak ayarlanır. macOS'te ise Hizmetler menüsü gibi sistem tarafından tanımlanmış birçok standart menü bulunur. Menüleri standart menü haline getirmek için geliştiricilerin menülerininroledeğerini uygun şekilde ayarlamaları gerekir. Electron, bu menüleri tanır ve standart menü haline getirir. Bu, menüyle ilgili birçok kodun aşağıdaki platform kontrolünü kullanacağı anlamına gelir:const isMac = process.platform === 'darwin'.Windows yükleyicileri windows-installer ile oluşturulabilir. Projenin README dosyasında "üretim uygulaması için uygulamanızı imzalamanız gerektiği" belirtiliyor. Internet Explorer'ın SmartScreen filtresi, uygulamanızın indirilmesini engeller ve geçerli bir sertifika almadığınız sürece birçok antivirüs tedarikçisi uygulamanızı kötü amaçlı yazılım olarak değerlendirir" [sic].
Yalnızca bu üç örneğe bakarak Electron'un "bir kez yaz, her yerde çalıştır" yaklaşımından uzak olduğu açıkça görülüyor. Uygulamaların uygulama mağazalarında dağıtılması için uygulama sahipliğini onaylayan bir güvenlik teknolojisi olan kod imzalama gerekir. Uygulamaları paketlemek için electron-forge gibi araçları kullanmanız ve uygulama güncellemeleri için paketleri nerede barındıracağınızı düşünmeniz gerekir. Özellikle amaç gerçekten platformlar arası destek olduğunda bu süreç oldukça hızlı bir şekilde karmaşık hale gelir. Yeterli çaba ve özveri göstererek etkileyici Electron uygulamaları oluşturmanın kesinlikle mümkün olduğunu belirtmek isterim. Excalidraw Desktop için orada değildik.
Excalidraw Desktop'un kaldığı yerden devam edin
Excalidraw Desktop şu anda temel olarak Excalidraw web uygulamasının Excalidraw hakkında penceresi eklenmiş bir .asar dosyası olarak paketlenmiş halidir. Uygulamanın görünümü ve işlevi, web sürümüyle neredeyse aynıdır.
macOS'te artık uygulamanın üst kısmında sistem düzeyinde bir menü var. Ancak Pencereyi Kapat ve Excalidraw Hakkında dışındaki menü işlemlerinin hiçbiri herhangi bir işleme bağlı olmadığından menü şu anki durumunda oldukça işe yaramaz. Bu sırada, tüm işlemler normal Excalidraw araç çubukları ve bağlam menüsü üzerinden de yapılabilir.
Dosya türü ilişkilendirmelerini destekleyen electron-builder'ı kullanıyoruz.
.excalidraw dosyasını çift tıkladığınızda ideal olarak Excalidraw masaüstü uygulaması açılır. electron-builder.json dosyamızın ilgili kısmı aşağıdaki gibi görünür:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Yükleme türüne (mevcut kullanıcı için, tüm kullanıcılar için) bağlı olarak Windows 10'daki uygulamaların bir dosya türünü kendileriyle ilişkilendirme hakları olmadığından, bu işlem maalesef her zaman istenen şekilde çalışmaz.
Bu eksiklikler ve deneyimi tüm platformlarda gerçekten uygulama benzeri hale getirmek için yapılması gereken çalışmalar (yeterli çaba gösterildiğinde mümkün olan bir çalışma) Excalidraw Desktop'a yaptığımız yatırımı yeniden değerlendirmemiz için güçlü bir nedendi. Ancak bizim için daha önemli olan, kendi kullanım alanımızda Electron'un sunduğu tüm özelliklere ihtiyacımız olmadığını öngörmemizdi. Web'in büyüyen ve büyümeye devam eden özellikleri, bize daha iyi olmasa da eşit derecede iyi hizmet veriyor.
Web'in günümüzde ve gelecekte bize sunduğu hizmetler
2020'de bile jQuery inanılmaz derecede popüler. Günümüzde jQuery'ye ihtiyaç duymalarına rağmen birçok geliştirici için jQuery'yi kullanmak alışkanlık haline gelmiştir. Electron için Electron'a İhtiyacınız Olmayabilir başlıklı benzer bir kaynak vardır. Electron'a neden ihtiyacımız olmadığını açıklamak isterim.
Yüklenebilir Progresif Web Uygulaması
Excalidraw, günümüzde hizmet çalışanı ve web uygulaması manifest dosyası içeren yüklenebilir bir Progresif Web Uygulaması'dır. Tüm kaynaklarını iki önbelleğe ayırır: biri yazı tipleri ve yazı tipleriyle ilgili CSS için, diğeri ise diğer her şey için.
Bu, uygulamanın tamamen çevrimdışı çalışabildiği ve ağ bağlantısı olmadan çalışabileceği anlamına gelir. Hem masaüstü hem de mobil cihazlardaki Chromium tabanlı tarayıcılar, kullanıcıdan uygulamayı yüklemesini ister. Aşağıdaki ekran görüntüsünde yükleme istemini görebilirsiniz.
Excalidraw, bağımsız bir uygulama olarak çalışacak şekilde yapılandırılmıştır. Bu nedenle, yüklediğinizde kendi penceresinde çalışan bir uygulama elde edersiniz. İşletim sisteminin çoklu görev kullanıcı arayüzüne tamamen entegredir ve yüklediğiniz platforma bağlı olarak ana ekranda, Dock'ta veya görev çubuğunda kendi uygulama simgesini alır.
Dosya sistemi erişimi
Excalidraw, işletim sisteminin dosya sistemine erişmek için browser-fs-access iznini kullanır. Bu, desteklenen tarayıcılarda gerçek bir açma→düzenleme→kaydetme iş akışı ve gerçek bir aşırı kaydetme ve "farklı kaydetme" özelliği sağlar. Diğer tarayıcılar için şeffaf bir yedekleme seçeneği de sunulur. Bu özellik hakkında daha fazla bilgi için browser-fs-access kitaplığıyla dosya ve dizin okuma ve yazma başlıklı blog yayınımı inceleyebilirsiniz.
Sürükle ve bırak desteği
Dosyalar, platforma özel uygulamalarda olduğu gibi Excalidraw penceresine sürüklenip bırakılabilir. Dosya Sistemi Erişimi API'sini destekleyen bir tarayıcıda, bırakılan dosya hemen düzenlenebilir ve değişiklikler orijinal dosyaya kaydedilebilir. Bu arayüz o kadar sezgiseldir ki bazen bir web uygulamasıyla uğraştığınızı unutabilirsiniz.
Pano erişimi
Excalidraw, işletim sisteminin panosuyla iyi çalışır. Excalidraw çizimlerinin tamamı veya tek tek nesneler image/png ve image/svg+xml biçimlerinde kopyalanıp yapıştırılabilir. Bu sayede Inkscape gibi platforma özgü diğer araçlar veya SVGOMG gibi web tabanlı araçlarla kolayca entegrasyon sağlanabilir.
Dosya işleme
Excalidraw, deneysel File Handling API'yi zaten destekliyor. Bu, Excalidraw'ın işletim sistemindeki .excalidraw dosyaları için dosya işleyici olarak kaydettiği için .excalidraw dosyalarının işletim sisteminin dosya yöneticisinde çift tıklanıp doğrudan Excalidraw uygulamasında açılabileceği anlamına gelir.
Bildirimsel bağlantı yakalama
Excalidraw çizimleri bağlantıyla paylaşılabilir. Aşağıda bir örnek verilmiştir. Gelecekte, kullanıcıların Excalidraw'ı PWA olarak yüklemesi durumunda bu tür bağlantılar tarayıcı sekmesinde değil, yeni bir bağımsız pencerede açılır. Bu özellik, henüz kullanıma sunulmamış olsa da belirtilen bağlantı yakalama sayesinde çalışacaktır. Bu özellik, şu anda yeni bir web platformu özelliği için en son tekliftir.
Sonuç
Web, yalnızca birkaç yıl hatta birkaç ay önce web'de düşünülemez olan ve platforma özel uygulamalara özel olan daha fazla özelliğin tarayıcıya eklenmesiyle uzun bir yol kat etti. Excalidraw, tarayıcıda mümkün olanın en önünde yer alır. Bununla birlikte, tüm platformlardaki tüm tarayıcıların kullandığımız her özelliği desteklemediğini kabul ederiz. Kademeli iyileştirme stratejisine odaklanarak, mümkün olduğunda en yeni ve en iyi özellikleri sunuyoruz ancak kimseyi geride bırakmıyoruz. En iyi görüntüleme deneyimi için herhangi bir tarayıcı kullanın.
Electron bize iyi hizmet etti ancak 2020 ve sonrasında onsuz yaşayabiliriz. @vjeux'un hedefi için de bir not: Android Play Store artık Güvenilir Web Etkinliği adlı bir kapsayıcı biçiminde PWA'ları kabul ettiğinden ve Microsoft Store da PWA'ları desteklediğinden, Excalidraw'ı yakın gelecekte bu mağazalarda görebilirsiniz. Bu süre zarfında Excalidraw'ı tarayıcıda ve tarayıcıdan dilediğiniz zaman kullanabilir ve yükleyebilirsiniz.
Teşekkür ederiz
Bu makale @lipis, @dwelle ve Joe Medley tarafından incelendi.