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şturduktan ve bu konu hakkında bir blog yayınladıktan kısa bir süre sonra Sorun 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. Masaüstünde Chrome, PWA'ya masaüstü kısayolu 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 bağımsız olarak devam etti ve Excalidraw masaüstü için ayrı bir depo oluşturdu.
@vjeux tarafından, yani Excalidraw'ı çeşitli uygulama mağazalarına gönderme hedefine henüz ulaşılmadı. Dürüst olmak gerekirse henüz hiç kimse mağazaların hiçbirine 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ı olarak incelemeyi gerektirdiği ortaya çıktı.
Örneğin, otomatik güncellemeler "[şu anda] yalnızca macOS ve Windows'ta [desteklenmektedir]. Linux'ta otomatik güncelleyici için yerleşik bir destek bulunmadığından uygulamanızı güncellemek için dağıtımın paket yöneticisini kullanmanız önerilir".
Geliştiriciler
Menu.setApplicationMenu(menu)numaralı telefonu arayarak sistem düzeyinde menüler oluşturabilirler. Windows ve Linux'da 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].
Sadece bu üç örneğe baktığımızda, Electron'un "bir kez yaz, her yerde çalıştır"dan çok uzak olduğu açıktır. 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 hedef gerçekten platformlar arası destek olduğunda, nispeten hızlı bir şekilde karmaşık hale gelir. Yeterli çaba ve özveri ile 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 tarzı 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ırız.
.excalidraw dosyasını çift tıkladığınızda ideal olarak Excalidraw masaüstü uygulaması açılır. electron-builder.json dosyamızın ilgili bölümü şu şekilde 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 becerileri, bize eşit derecede iyi, hatta daha iyisini hizmet etmemektedir.
Web'in bugün ve gelecekte bize nasıl hizmet edeceği
2020'de bile jQuery inanılmaz derecede popüler olmaya devam ediyor. Günümüzde jQuery'ye ihtiyaç duymasalar bile, birçok geliştirici bu özelliği kullanmayı alışkanlık haline getirdi. Electron için de uygun bir şekilde You Might Not İstemeyebilir olan benzer bir kaynak vardır. Electron'a neden ihtiyacımız olmadığını açıklamak isterim.
Yüklenebilir Progresif Web Uygulaması
Günümüzde Excalidraw, service Worker ve web uygulaması manifest içeren yüklenebilir bir Progresif Web Uygulamasıdır. Tüm kaynaklarını iki önbelleğe kaydeder. Biri yazı tipleri ve yazı tipleriyle ilgili CSS için, diğeri ise diğer her şey içindir.
Bu, uygulamanın tamamen çevrimdışı kullanabildiği ve bir 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'i 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 bilgiye browser-fs-access kitaplığıyla dosya ve dizin okuma ve yazma başlıklı blog yayınımızdan ulaşabilirsiniz.
Sürükleyip bırakma 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 sadece tek tek nesneler image/png ve image/svg+xml biçimlerinde kopyalanıp yapıştırılabilir. Böylece, Inkscape gibi platforma özgü diğer araçlarla veya SVGOMG gibi web tabanlı araçlarla kolay entegrasyon sağlanır.
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ılara eklenmesiyle uzun bir yol kat etti. Excalidraw, tarayıcıda yapabileceklerimizin en başında yer alıyor. Bununla birlikte, tüm platformlardaki tüm tarayıcıların, kullandığımız her özelliği desteklemediğini kabul ediyoruz. 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
Bu makale @lipis, @dwelle ve Joe Medley tarafından incelendi.