Excalidraw projesinin neden Elektron sarmalayıcısını kullanımdan kaldırarak web sürümüne geçmeye karar vermesinin nedenini öğrenin.
Excalidraw projesinde, Excalidraw için bir Electron sarmalayıcısı olan Excalidraw Masaüstü'nü kullanımdan kaldırmaya karar verdik. Bunun yerine, excalidraw.com'da bulabileceğiniz ve her zaman bulabileceğiniz web sürümünü kullanıma sunduk. Dikkatli bir analizden sonra, gelecek olarak Progresif Web Uygulaması'nı (PWA) geliştirmek istediğimize karar verdik. Nedenini öğrenmek için okumaya devam edin.
Excalidraw Masaüstü nasıl ortaya çıktı?
@vjeux, Ocak 2020'de Excalidraw'un ilk sürümünü oluşturduktan ve bu konuda bir blog yayınladıktan kısa bir süre sonra 561 numaralı sorunda şu öneride bulundu:
Excalidraw'un Electron'un (veya eşdeğerinin) içinde sarmalanmasını ve çeşitli uygulama mağazalarında [platforma özgü] bir uygulama olarak yayınlanmasını isterdik.
@voluntadpear tarafından gönderilen ilk tepki, şu öneride bulunuldu:
Peki onu PWA (Progresif Web Uygulaması) yapmaya ne dersiniz? Android şu anda bunları Play Store'a Güvenilir Web Etkinlikleri olarak eklemeyi desteklemektedir ve iOS'un da yakında aynısını yapacağını umuyoruz. Masaüstünde Chrome, PWA'ya (Progresif Web Uygulaması) masaüstü kısayolu indirmenize olanak tanır.
Sonunda @vjeux adlı kullanıcının verdiği karar çok basitti:
İkisini de yapmalıyız :)
Excalidraw'un sürümünü PWA'ya dönüştürme çalışmalarına @voluntadpear ve daha sonra başkaları tarafından başlanırken @lipis bağımsız olarak önce gider ve Excalidraw Masaüstü için ayrı bir depo oluşturdu.
Bugüne kadar @vjeux tarafından belirlenen, yani Excalidraw'u çeşitli uygulama mağazalarına göndermek olan ilk hedefe henüz ulaşılmamıştır. Dürüst olmak gerekirse, hiç kimse mağazalara gönderim sürecini başlatmamış bile. Peki bunun nedeni nedir? Yanıt vermeden önce, platform olan Electron'a bakalım.
Elektron nedir?
Electron'un benzersiz satış özelliği, "JavaScript, HTML ve CSS ile platformlar arası masaüstü uygulamaları geliştirmenize" olanak tanımasıdır. Electron ile oluşturulan uygulamalar "Mac, Windows ve Linux ile uyumludur", yani "Electron uygulamaları üç platformda geliştirilir ve çalışır". Ana sayfaya göre, Electron'un kolaylaştırdığı zor parçalar otomatik güncellemeler, sistem düzeyinde menüler ve bildirimler, çökme raporu, hata ayıklama ve profil oluşturma ile Windows yükleyicileri. Vadettiğimiz özelliklerden bazılarının küçük pratiğe ayrıntılı bir şekilde incelenmesi gerekiyor.
Örneğin, otomatik güncellemeler " macOS ve Windows'da [şu anda] yalnızca [destekleniyor]. Linux'ta 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)yöntemini çağırarak sistem düzeyinde menü oluşturabilirler. Windows ve Linux'ta menü, her pencerenin en üst menüsü olarak ayarlanır. macOS'te ise Hizmetler menüsü gibi sistem tanımlı birçok standart menü vardır. Bir menünün standart bir menü olması için, geliştiricilerin kendi menülerininroledeğerini de buna göre ayarlaması gerekir. Electron, bu menüleri tanıyıp standart menülere dönüştürecektir. Bu, menüyle ilgili birçok kodun şu platform kontrolünü kullanacağı anlamına gelir:const isMac = process.platform === 'darwin'.Windows yükleyicileri windows-installer ile yapılabilir. Projenin BENİOKU işlevi, "üretim uygulaması için uygulamanızı imzalamanız gerektiğini" Internet Explorer'ın SmartScreen filtresi uygulamanızın indirilmesini engeller. Birçok antivirüs tedarikçi firması, geçerli bir sertifika almadığınız sürece uygulamanızı kötü amaçlı yazılım olarak kabul eder." [sic].
Yalnızca bu üç örneğe baktığımızda, Electron'un "bir kez yaz, her yerde çalıştır" yaklaşımından çok uzak olduğu anlaşılıyor. Bir uygulamanın uygulama mağazalarında dağıtılması için uygulama sahipliğini onaylayan bir güvenlik teknolojisi olan kod imzalama gerekir. Bir uygulamayı paketlemek için electron-forge gibi araçları kullanmanız ve uygulama güncellemeleri için paketlerin nerede barındırılacağını düşünmeniz gerekir. Bu süreç nispeten hızlı bir şekilde karmaşıklaşıyor, özellikle de hedef gerçekten platformlar arası destek olduğunda. Yeterli çaba ve özveriyle etkileyici Electron uygulamaları oluşturmanın kesinlikle mümkün olduğunu belirtmek isterim. Excalidraw Masaüstü için orada değildik.
Excalidraw Masaüstü'nün bıraktığı yer
Excalidraw Masaüstü şu ana kadar, ek olarak Excalidraw penceresiyle birlikte bir .asar dosyası olarak paketlenmiş Excalidraw web uygulamasıdır. Uygulamanın görünümü ve tarzı, web sürümüyle neredeyse aynıdır.
macOS'te, uygulamanın üst kısmında artık sistem düzeyinde bir menü bulunuyor ancak Kapat Penceresi ve Excalidraw Hakkında dışındaki hiçbir menü işlemi herhangi bir şeye bağlı olmadığından, menü şu anki haliyle pek işe yaramaz. Bu arada, tüm işlemler normal Excalidraw araç çubukları ve içerik menüsü aracılığıyla gerçekleştirilebilir.
Dosya türü ilişkilendirmelerini destekleyen elektron oluşturucu kullanıyoruz.
Bir .excalidraw dosyasını çift tıkladığınızda, ideal olarak Excalidraw Masaüstü uygulaması açılır. electron-builder.json dosyamızla ilgili alıntı şöyle görünür:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Windows 10'daki uygulamalar, yükleme türüne (mevcut kullanıcı için, tüm kullanıcılar için) bağlı olarak, dosya türünü kendileriyle ilişkilendirme hakkına sahip olmadığından, pratikte her zaman bu yönteme sahip değildir.
Bu eksiklikler ve deneyimi tüm platformlarda gerçekten uygulama benzeri hale getirmek için yapılması gereken çalışmalar (yine yeterince çaba mümkündür), Excalidraw Masaüstü'ne yaptığımız yatırımı yeniden değerlendirmemiz için güçlü bir argümandı. Ancak bizim için en önemli argüman, kullanım alanımız için Electron'un sunduğu tüm özelliklere ihtiyaç duymadığımızı öngörüyoruz. Web'in gitgide büyüyen ve büyümekte olan yetenekleri bizim için eşit derecede iyi, hatta belki daha iyi hizmet veriyor.
Web bugün ve gelecekte bize nasıl hizmet verir?
jQuery, 2020'de bile inanılmaz derecede popüler olmaya devam ediyor. Bugün jQuery'ye ihtiyaç duymayacaklarına rağmen birçok geliştirici için bu kullanımı alışkanlık hâline getirdi. Electron için de uygun bir şekilde You Might Not need Electron adında benzer bir kaynak vardır. Neden Electron'a ihtiyacımız olmadığını düşündüğümüzü özetleyelim.
Yüklenebilir Progresif Web Uygulaması
Şu anda Excalidraw, bir hizmet çalışanı ve bir web uygulaması manifesti ile yüklenebilir bir Progresif Web Uygulamasıdır. Tüm kaynaklarını biri yazı tipleri ve yazı tipiyle ilgili CSS, diğeri de diğer her şey için olmak üzere iki önbellekte önbelleğe alır.
Bu, uygulamanın tamamen çevrimdışı olarak çalışabileceği ve ağ bağlantısı olmadan çalışabileceği anlamına gelir. Hem masaüstündeki 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. Dolayısıyla, uygulamayı yüklediğinizde kendi penceresinde çalışan bir uygulamaya sahip olursunuz. İşletim sisteminin çoklu görev kullanıcı arayüzüne tamamen entegre edilmiştir ve uygulamayı yüklediğiniz platforma bağlı olarak ana ekranda, yuvada veya görev çubuğunda kendi uygulama simgesine sahip olur.
Dosya sistemi erişimi
Excalidraw, işletim sisteminin dosya sistemine erişmek için browser-fs-access kullanır. Desteklenen tarayıcılarda bu, gerçek bir açılış→edit→kaydet iş akışı, gerçek fazla kaydetme ve "farklı kaydet" ile diğer tarayıcılar için şeffaf bir yedek sağlar. Bu özellikle ilgili daha fazla bilgiyi blog yayınımda bulabilirsiniz: Tarayıcı-fs-access kitaplığı ile dosya ve dizin okuma ve yazma.
Sürükleyip bırakma desteği
Dosyalar, platforma özgü uygulamalarda olduğu gibi Excalidraw penceresine sürüklenip bırakılabilir. File System Access API'yi destekleyen bir tarayıcıda, bırakılan dosya hemen düzenlenebilir ve değişiklikler orijinal dosyaya kaydedilebilir. Bu o kadar pratiktir ki bazen bir web uygulamasıyla uğraştığınızı unutursunuz.
Pano erişimi
Excalidraw, işletim sisteminin panosuyla uyumlu bir şekilde çalışır. Excalidraw çizimlerinin tamamı veya yalnızca bağımsız 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 halihazırda deneysel File Handling API'yi desteklemektedir. Bu, Excalidraw işletim sistemindeki .excalidraw dosyaları için dosya işleyici olarak kaydolduğundan, .excalidraw dosyalarının işletim sisteminin dosya yöneticisinde çift tıklanabileceği ve doğrudan Excalidraw uygulamasında açılabileceği anlamına gelir.
Bildirim temelli bağlantı yakalama
Excalidraw çizimleri bağlantıyla paylaşılabilir. Burada bir örnek görebilirsiniz. Gelecekte, kullanıcılar Excalidraw'u PWA olarak yüklerse bu bağlantılar bir tarayıcı sekmesinde açılmaz, ancak yeni bir bağımsız pencere açar. Uygulanmayı bekleyen bu özellik, bildirici bağlantı yakalama sayesinde çalışır. Bu, metin yazıldığı sırada yeni bir web platformu özelliği için yeni bir özellik teklifidir.
Sonuç
Web çok yol kat etti. Yalnızca birkaç yıl, hatta ay önce web'de düşünülemeyen ve platforma özgü uygulamalara özgü olan tarayıcılara gittikçe daha fazla özellik eklendi. Excalidraw, tarayıcıda nelerin mümkün olduğunun en önemli adımını oluşturur. Bununla birlikte, kullandığımız her bir özelliği tüm platformlardaki tüm tarayıcıların desteklemediğini kabul eder. Progresif geliştirme stratejisine bahis yaparak, mümkün olan her yerde en yeni ve en iyi içeriklerin keyfini çıkarırız, ancak kimseyi geride bırakmaz. Herhangi bir tarayıcıda en iyi şekilde görüntülenir.
Electron bize çok iyi hizmet etti ancak 2020'de ve sonrasında onsuz yaşayabiliriz. Bu da @vjeux hedefi için: Android Play Store artık PWA'ları Trusted Web Activity (Güvenilir Web Etkinliği) adlı kapsayıcı biçiminde kabul ettiğinden ve Microsoft Store PWA'ları desteklediğinden çok yakında Excalidraw'u bu mağazalarda da bekleyebilirsiniz. Bu süre zarfında, Excalidraw'u tarayıcıda ve tarayıcıdan her zaman kullanabilir ve yükleyebilirsiniz.
Teşekkür
Bu makale @lipis, @dwelle ve Joe Medley tarafından incelendi.