Üzerinde Excalidraw projesikullanımdan kaldırmaya karar verdik Excalidraw MasaüstüBİR Elektron adresinde bulabileceğiniz ve her zaman bulabileceğiniz web sürümü lehine Excalidraw için sarıcı. excalidraw.com. Dikkatli bir analizden sonra, üzerine inşa etmek istediğimiz geleceğin Progressive Web App (PWA) olduğuna karar verdik. Nedenini öğrenmek için okumaya devam edin.
Excalidraw Desktop nasıl ortaya çıktı? #
Az sonra @vjeux Ocak 2020’de Excalidraw’ın ilk sürümünü oluşturdu ve bunun hakkında blog yazdıiçinde şunları önerdi: Sayı #561:
Excalidraw’ı Electron (veya eşdeğeri) içine sarmak ve bir sürüm olarak yayınlamak harika olurdu. [platform-specific] çeşitli uygulama mağazalarına uygulama.
tarafından anında tepki @voluntadpear önermekti:
Bunun yerine onu bir PWA yapmaya ne dersiniz? Android şu anda bunları Play Store’a Güvenilir Web Etkinlikleri olarak eklemeyi desteklemektedir ve umarız iOS da yakında aynısını yapacaktır. Masaüstünde Chrome, bir PWA’ya masaüstü kısayolu indirmenize izin verir.
Karar ki @vjeux Sonunda alınan basitti:
ikisinide yapmalıyız 🙂
Excalidraw sürümünün PWA’ya dönüştürülmesi için çalışmalar başlatılırken, @voluntadpear ve daha sonra diğerleri, @lipis bağımsız devam etti ve yarattı ayrı depo Excalidraw Masaüstü için.
Bugüne kadar, tarafından belirlenen ilk hedef @vjeux, yani Excalidraw’ı çeşitli uygulama mağazalarına göndermek için henüz ulaşılmadı. Dürüst olmak gerekirse, hiç kimse herhangi bir mağazaya teslim sürecini bile başlatmadı. Ama bu neden? Cevap vermeden önce platform Electron’a bakalım.
Elektron Nedir? #
benzersiz satış noktası Elektron yapmanıza izin vermesidir “JavaScript, HTML ve CSS ile platformlar arası masaüstü uygulamaları oluşturun”. Electron ile oluşturulan uygulamalar “Mac, Windows ve Linux ile uyumlu”yani, “Elektron uygulamaları üç platformda kurulur ve çalışır”. Ana sayfaya göre, Electron’un kolaylaştırdığı zor kısımlar: otomatik güncellemeler, sistem düzeyinde menüler ve bildirimler, kilitlenme raporlaması, hata ayıklama ve profil oluşturmaVe Windows yükleyicileri. Görünüşe göre, vaat edilen özelliklerden bazılarının küçük yazılara ayrıntılı bir şekilde bakması gerekiyor.
-
Örneğin, otomatik güncellemeler “var [currently] sadece [supported] macOS ve Windows’ta. Linux’ta otomatik güncelleme için yerleşik bir destek yoktur, bu nedenle uygulamanızı güncellemek için dağıtımın paket yöneticisini kullanmanız önerilir”.
-
Geliştiriciler, arayarak sistem düzeyinde menüler oluşturabilir
Menu.setApplicationMenu(menu). Windows ve Linux’ta menü, her pencerenin üst menüsü olarak ayarlanırken, macOS’ta aşağıdakiler gibi birçok sistem tanımlı standart menü vardır: Hizmetler Menü. Menülerini standart bir menü yapmak için, geliştiriciler menülerini ayarlamalıdır.rolebuna göre Electron bunları tanıyacak ve standart menüler haline getirecektir. 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 ile yapılabilir windows yükleyici. Projenin README’si şunu vurgulamaktadır: “bir üretim uygulaması için uygulamanızı imzalamanız gerekir. Internet Explorer’ın SmartScreen filtresi, uygulamanızın indirilmesini engeller ve birçok anti-virüs satıcısı, geçerli bir sertifika almadığınız sürece uygulamanızı kötü amaçlı yazılım olarak kabul eder” [sic].
Sadece bu üç örneğe bakıldığında, Electron’un “bir kez yaz, her yerde koş” olmaktan çok uzak olduğu açıktır. Bir uygulamanın uygulama mağazalarında dağıtılması şunları gerektirir: kod imzalama, uygulama sahipliğini onaylamak için bir güvenlik teknolojisi. Bir uygulamayı paketlemek, aşağıdaki gibi araçların kullanılmasını gerektirir: elektron dövme ve uygulama güncellemeleri için paketleri nerede barındıracağınızı düşünmek. Özellikle amaç gerçekten platformlar arası destek olduğunda, nispeten hızlı bir şekilde karmaşık hale gelir. olduğunu not etmek istiyorum kesinlikle yeterli çaba ve özveri ile çarpıcı Electron uygulamaları oluşturmak mümkün. Excalidraw Desktop için orada değildik.
Excalidraw Desktop’ın kaldığı yer #
Excalidraw Desktop şu ana kadar temel olarak Excalidraw web uygulaması olarak paketlenmiştir. .asar eklenen dosya Excalidraw Hakkında pencere. Uygulamanın görünümü ve hissi, 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 menü eylemlerinin hiçbiri — dışında Pencereyi kapat Ve Excalidraw Hakkında— herhangi bir şeye bağlıysanız, menü şu anki durumunda oldukça işe yaramaz. Bu arada, tüm eylemler elbette normal Excalidraw araç çubukları ve içerik menüsü aracılığıyla gerçekleştirilebilir.
Kullanırız elektron oluşturucudestekleyen dosya türü ilişkilendirmeleri. Bir çift tıklayarak .excalidraw dosyası, ideal olarak Excalidraw Desktop uygulaması açılmalıdır. İlgili alıntımız electron-builder.json dosya şöyle görünür:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Ne yazık ki, pratikte bu her zaman amaçlandığı gibi çalışmaz, çünkü kurulum türüne bağlı olarak (geçerli kullanıcı için, tüm kullanıcılar için), Windows 10’daki uygulamaların kendileriyle bir dosya türü ilişkilendirme hakları yoktur.
Bu eksiklikler ve deneyimi gerçekten uygulama benzeri hale getirmek için bekleyen çalışmalar Tümü platformlar (yine, yeterli çabayla dır-dir mümkün), Excalidraw Desktop’a yaptığımız yatırımı yeniden gözden geçirmemiz için güçlü bir argümandı. Bizim için daha büyük argüman, yine de, bunun için öngörmemizdi. bizim kullanım durumunda, Electron’un sunduğu tüm özelliklere ihtiyacımız yok. Web’in büyüyen ve büyümeye devam eden yetenekleri, bize daha iyi olmasa da eşit derecede iyi hizmet ediyor.
Web bugün ve gelecekte bize nasıl hizmet ediyor? #
2020’de bile, jQuery hala inanılmaz popüler. Birçok geliştirici için, bugün kullanmalarına rağmen, onu kullanmak bir alışkanlık haline geldi. jQuery’ye ihtiyaç duymayabilir. Uygun bir şekilde adlandırılan Electron için benzer bir kaynak var. Elektrona İhtiyacınız Olmayabilir. Neden Electron’a ihtiyacımız olmadığını düşündüğümüzü özetlememe izin verin.
Yüklenebilir Aşamalı Web Uygulaması #
Excalidraw bugün kurulabilir bir Aşamalı Web Uygulamasıdır. hizmet çalışanı ve bir web uygulaması bildirimi. Tüm kaynaklarını, biri yazı tipleri ve yazı tipiyle ilgili CSS için, diğeri de diğer her şey için olmak üzere iki önbellekte önbelleğe alır.
Bu, uygulamanın tamamen çevrimdışı çalışabileceği ve bir ağ bağlantısı olmadan çalışabileceği anlamına gelir. Hem masaüstü hem de mobil cihazdaki Chromium tabanlı tarayıcılar, kullanıcıdan uygulamayı yüklemesini ister. Kurulum istemini aşağıdaki ekran görüntüsünde görebilirsiniz.
Excalidraw bağımsız bir uygulama olarak çalışacak şekilde yapılandırılmıştır, bu nedenle onu yüklediğinizde kendi penceresinde çalışan bir uygulama elde edersiniz. İşletim sisteminin çoklu görev kullanıcı arayüzüne tamamen entegredir ve ana ekranda, Dock’ta veya görev çubuğunda kendi uygulama simgesini alır; yüklediğiniz platforma bağlı olarak.
Dosya sistemi erişimi #
Excalidraw kullanımları tarayıcı-fs-erişimi işletim sisteminin dosya sistemine erişmek için. Desteklenen tarayıcılarda bu, gerçek bir açık → düzenle → kaydet iş akışına ve gerçek fazla kaydetmeye ve diğer tarayıcılar için şeffaf bir geri dönüşle “farklı kaydet”e izin verir. Bu özellik hakkında daha fazla bilgiyi blog yazımda öğrenebilirsiniz. Browser-fs-access kitaplığı ile dosya ve dizin okuma ve yazma.
Sürükle ve bırak desteği #
Dosyalar, tıpkı platforma özel uygulamalarda olduğu gibi Excalidraw penceresine sürüklenip bırakılabilir. Dosya Sistemi Erişim API’sini destekleyen bir tarayıcıda, bırakılan bir dosya hemen düzenlenebilir ve değişiklikler orijinal dosyaya kaydedilebilir. Bu o kadar sezgisel ki bazen bir web uygulamasıyla uğraştığınızı unutuyorsunuz.
Pano erişimi #
Excalidraw, işletim sisteminin panosuyla iyi çalışır. Tüm Excalidraw çizimleri veya ayrıca yalnızca tek tek nesneler kopyalanıp yapıştırılabilir. image/png Ve image/svg+xml gibi diğer platforma özgü araçlarla kolay entegrasyona izin veren biçimler Inkscape veya web tabanlı araçlar gibi SVGOMG.
Dosya yönetimi #
Excalidraw zaten deneysel Dosya İşleme API’sini desteklemektedir, yani .excalidraw dosyalar, işletim sisteminin dosya yöneticisinde çift tıklanabilir ve doğrudan Excalidraw uygulamasında açılabilir, çünkü Excalidraw bir dosya işleyicisi olarak kaydolur. .excalidraw İşletim sistemindeki dosyalar.
Bildirime dayalı bağlantı yakalama #
Excalidraw çizimleri link ile paylaşılabilir. İşte bir örnek. Gelecekte, insanlar Excalidraw’ı bir PWA olarak yüklemişlerse, bu tür bağlantılar bir tarayıcı sekmesinde açılmayacak, yeni bir bağımsız pencere açacaktır. Bekleyen uygulama, bu sayesinde işe yarayacak bildirimsel bağlantı yakalamabu yazının yazıldığı sırada, yeni bir web platformu özelliği için son teknoloji bir öneriydi.
Çözüm #
Web, yalnızca birkaç yıl hatta aylar önce web’de düşünülemez olan ve platforma özgü uygulamalara özel olan tarayıcılara giderek daha fazla özelliğin girmesiyle uzun bir yol kat etti. Excalidraw, tüm platformlardaki tüm tarayıcıların kullandığımız her özelliği desteklemediğini kabul ederken, tarayıcıda mümkün olanın ön saflarında yer almaktadır. Aşamalı bir geliştirme stratejisi üzerine bahis oynayarak, kimseyi geride bırakmadan mümkün olan her yerde en son ve en iyinin tadını çıkarırız. En iyi görüntülenen herhangi tarayıcı.
Elektron bize iyi hizmet etti, ancak 2020 ve sonrasında onsuz yaşayabiliriz. Oh, ve bu amaç için @vjeux: Android Play Store artık PWA’ları Güvenilir Web Etkinliği adı verilen kapsayıcı biçiminde kabul ettiğinden ve Microsoft Store, PWA’ları destekler, Excalidraw’ı da çok uzak olmayan bir gelecekte bu mağazalarda bekleyebilirsiniz. Bu arada, her zaman kullanabilir ve yükleyebilirsiniz Tarayıcıdan ve tarayıcıdan Excalidraw.
teşekkürler #
Bu makale tarafından incelendi @lipis, @dwelleVe Joe Karışık.