Excalidraw projesinin, Electron sarmalayıcısını kullanımdan kaldırarak web'i kullanmaya neden karar verdiğini öğrenin sürümünü değil.
Excalidraw projesinde, Excalidraw Masaüstü'nü kullanımdan kaldırın ve Excalidraw için Electron sarmalayıcısında, yüklediğiniz web sürümünün lehine excalidraw.com adresinde bulabilirsiniz. Dikkatli bir analizden sonra Progresif Web Uygulaması'nı (PWA) geliştirmek istediğimize karar verdik. üzerine düşünün. Nedenini öğrenmek için okumaya devam edin.
Excalidraw Desktop nasıl ortaya çıktı?
@vjeux, Excalidraw'ın ilk sürümünü oluşturduktan kısa bir süre sonra Ocak 2020'de bu konu hakkında bir blog yayınladı ve Sorun 561:
Excalidraw'ı Electron (veya eşdeğeri) içinde sarmalamak ve [platforma özgü] olarak yayınlamak harika olurdu uygulama mağazalarına ekleyebilirsiniz.
@voluntadpear adlı kullanıcının hemen tepkisi şuydu:
Peki onu PWA olarak ayarlasak nasıl olur? Android şu anda bu uygulamaların Play Store'a eklenmesini desteklemektedir: Güvenilir Web Etkinlikleri. Yakında iOS'in de yakın zamanda aynısını yapacağını umuyoruz. Chrome, masaüstünde şunları yapmanıza olanak tanır: PWA'ya masaüstü kısayolu indirin.
@vjeux son olarak basit bir karar aldı:
İkisini de yapmalıyız :)
Excalidraw'ın sürümünü PWA'ya (Progresif Web Uygulaması) dönüştürme çalışmaları @voluntadpear ve diğer kullanıcılar, @lipis bağımsız olarak ilerledi ve Excalidraw Masaüstü için ayrı bir depo.
Bugüne kadar, @vjeux tarafından belirlenen ilk hedef, yani Çeşitli uygulama mağazalarına Excalidraw'a henüz ulaşılmadı. Açıkçası, ilk olarak aracılığıyla ödeme yapabilirsiniz. Peki bunun nedeni nedir? Yanıt vermeden önce platformu Electron'a bakalım.
Elektron nedir?
Electron'un benzersiz satış özelliği, "tek bir tedarikçiyle JavaScript, HTML ve CSS ile platformlar arası masaüstü uygulamaları". Electron ile geliştirilen uygulamalar "Mac, Windows ve Linux ile uyumlu", yani "Electron uygulamaları üç cihazda geliştirilir ve çalışır" platformları". Ana sayfaya göre, Electron'un kolaylaştırdığı zor kısımlar otomatik güncellemeleri, sistem düzeyinde menüler ve bildirimler görüyorsanız kilitlenme raporları, hata ayıklama ve profil oluşturma ve Windows yükleyicileri. Sonuçta ortaya çıkan söz konusu özellikler için de küçük baskının ayrıntılı bir şekilde incelenmesi gerekiyor.
Örneğin, otomatik güncellemeler şu anda yalnızca macOS ve Windows'da [desteklenmektedir]. Her biri 100'den az gösterim alan Linux'ta otomatik güncelleyici için yerleşik destek yoktur. Bu nedenle, paket yöneticisini kullanabilirsiniz".
Geliştiriciler,
Menu.setApplicationMenu(menu)numaralı telefonu arayarak sistem düzeyinde menüler oluşturabilirler. Windows ve Linux'ta menü her pencerenin üst menüsü olarak ayarlanır. macOS'te ise menüler gibi sistem tanımlı standart menüler Hizmetler tıklayın. Geliştiriciler, bir menünüzü standart bir menü haline getirmek için menülerininroleözelliğini buna göre ayarlamalıdırlar. Electron bunları tanıyıp standart menüler haline getirecek. Bu, birçok farklı tarafın menü ile ilgili kod, aşağıdaki platform kontrolünü kullanır:const isMac = process.platform === 'darwin'Windows yükleyicileri windows-installer. Projenin BENİOKU OKUYU "Üretim uygulaması için uygulamanızı imzalamanız gerekir. Internet Explorer'ın SmartScreen filtresi, uygulamanızın indirilmesini engeller ve birçok antivirüs tedarikçi firması geçerli bir sertifika almadığınız takdirde uygulamanızın kötü amaçlı yazılım olarak kabul edildiğini düşünebilirsiniz." [sic].
Sadece bu üç örneğe baktığımızda, Electron'un "bir kez yaz, çalıştır her yerde". Bir uygulamayı uygulama mağazalarında dağıtmak için kod imzalama özelliği, uygulama sahipliğini onaylama. Bir uygulamayı paketlemek için aşağıdaki gibi araçlar gerekir: elektronik demirlemeler yapıyor ve uygulama güncellemelerine yönelik ana makine paketleri. Nispeten hızlı bir şekilde karmaşık hale gelir. Özellikle hedef platformlar arası destek sunmaktır. Etkileyici görsellerin üretilmesinin kesinlikle mümkün olduğunun Yeterince çaba ve özveriyle elektron uygulamaları. Excalidraw Desktop'ta orada değildik.
Excalidraw Masaüstü'nün kaldığı yer
Şimdiye kadar Excalidraw Desktop, temel olarak,
Excalidraw Hakkında penceresi eklenmiş .asar dosyası. Görünüm
ve hissi web sürümüyle hemen hemen aynıdır.
macOS'te artık uygulamanın üst kısmında sistem düzeyinde bir menü bulunuyor, ancak işlemler (Pencereyi Kapat ve Excalidraw Hakkında hariç) her şeyle ilişkili. şu anki haliyle pek bir işe yaramaz. Aynı zamanda tüm işlemler, içerik menüsünü kullanabilirsiniz.
Optimum hidrokarların kullanımını destekleyen elektron oluşturucu
dosya türü ilişkilendirmeleri.
Bir .excalidraw dosyasını çift tıkladığınızda tercihen Excalidraw Masaüstü uygulamasının açılması gerekir. İlgili içeriği oluşturmak için kullanılan
electron-builder.json dosyamızdaki alakalı alıntı şöyle görünüyor:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Ancak kullanıcılarınızın ihtiyaçlarına bağlı olarak yükleme türü (geçerli kullanıcı için, tüm kullanıcılar için), Windows 10'daki uygulamalar kendi kendilerine ilişkilendirme hakkını saklı tutar.
Bu eksiklikler ve deneyimin tüm platformlarda gerçekten uygulanmasına yönelik beklemedeki çalışmalar (yine yeterli çaba mümkün olan) fikrimizi tekrar gözden geçirmemiz bir yatırım listesidir. Ama bizim açımızdan daha önemli olan konu şuydu: kullanım alanımızda Electron'un sunduğu tüm özelliklere ihtiyacımız yok. Büyümeyi sürdüren ve hâlâ büyümekte olan web'in yetenekleri bize eşit derecede iyi veya daha iyi hizmet veriyor.
Web'in bugün ve gelecekte bize nasıl hizmet edeceği
jQuery 2020'de bile hâlâ kullanılıyor. oldukça popüler. Birçok kişi için 2022'de web'de oyun geliştiricilerinin pek çok jQuery gerekmeyebilir. Toplantılar için benzer bir kaynak You Might For Electron (Elektrona İhtiyacınız Olmayabilir) diye elektron. İzin ver Electron'a neden ihtiyacımız olmadığını düşündüğümüzü özetleyeceğiz.
Yüklenebilir Progresif Web Uygulaması
Excalidraw şu anda yüklenebilir bir Progresif Web Uygulamasıdır: Service Worker ve web uygulaması manifest dosyası olarak gönderebilirsiniz. Tüm kaynaklarını iki önbellekte önbelleğe alır, Biri yazı tipleri ve yazı tipiyle ilgili CSS için, biri de diğer her şey için.
Bu, uygulamanın tamamen çevrimdışı kullanabildiği ve bir ağ bağlantısı olmadan çalışabileceği anlamına gelir. Masaüstü ve 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ıldığından uygulamayı yüklediğinizde çalışan bir reklam grubudur. İşletim sisteminin çoklu görev arayüzüne tümüyle entegredir ve Ana ekranda, Dock'ta veya görev çubuğunda kendi uygulama simgesine sahip olması; yüklediğiniz platforma göre değişir. somut olarak ortaya koyar.
Dosya sistemi erişimi
Excalidraw, web sayfası için browser-fs-access işletim sisteminin dosya sistemine erişme. Destekleyen tarayıcılarda bu, aç→düzenle→iş akışını ve gerçek fazla kaydetme işlemini ve "farklı kaydet"i seçerek diğer tarayıcılarda da kullanılabilir. Bu özellikle ilgili daha fazla bilgiyi blog yayınımda bulabilirsiniz. browser-fs-access kitaplığıyla 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. Bir File System Access API'yi destekleyen bir tarayıcı dosyası hemen düzenlenebilir ve değişiklikler orijinal dosyaya kaydedilir. İşte bu yüzden Bazen bir web uygulaması ile 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
tek tek nesneler image/png ve image/svg+xml biçimlerinde kopyalanıp yapıştırılabilir. Böylece
Inkscape veya web tabanlı gibi diğer platforma özgü araçlarla kolay entegrasyon
SVGOMG gibi araçlar.
Dosya işleme
Excalidraw, deneysel File handling API'yi zaten desteklemektedir.
Bu, .excalidraw dosyalarının işletim sisteminin dosya yöneticisinde çift tıklanabildiği ve
Excalidraw .excalidraw için bir dosya işleyici olarak kayıtlı olduğundan doğrudan Excalidraw uygulamasında açılabilir
işletim sisteminde olmasını sağlar.
Bildirimli bağlantı yakalama
Excalidraw çizimleri bağlantıyla paylaşılabilir. Burada example) arayın. Gelecekte, Kullanıcılar PWA olarak Excalidraw'ı yüklüyor. Bu tür bağlantılar tarayıcı sekmesinde açılmaz, ancak yeni bir bağımsız pencere açar. Uygulama beklemede, şunun sayesinde gerçekleşecek: bildirim temelli bağlantı yakalama, O dönemde, yeni bir web platformu özelliği için son teknoloji ürünü teklif etmiştik.
Sonuç
Web büyük bir yol kat etti. Giderek daha fazla özellik, yalnızca birkaç tane yıllar, hatta aylar önce web'de düşünülmesi imkansızdı ve platforma özgü uygulamalara özeldi. Excalidraw, tarayıcıda mümkün olan şeylerin önünde yer alıyor. tüm platformlardaki bütün tarayıcılar kullandığımız her özelliği desteklemektedir. Progresif yaklaşımla bahis oynayarak geliştirmek için, mümkün olan her yerde en yeni ve en iyi içeriklerden yararlanırız, ancak geride bırakıyoruz. En iyi tüm tarayıcılarda görüntülenir.
Electron bize çok hizmet etti, ancak 2020 ve sonrasında onsuz yaşayabiliriz. Bunun için @vjeux hedefi: Android Play Store artık PWA'ları kapsayıcı formatı olan Güvenilir Web Etkinliği ve tarihinden bu yana Microsoft Store, PWA'ları destekler. yakın zamanda bu mağazalarda Excalidraw'ı da görebilirsiniz. Bu arada her zaman Excalidraw'ı kullanın ve yükleyin.
Teşekkür
Bu makale @lipis tarafından incelenmiştir. @dwelle ve Can Mehmet.