PWA ve Flutter: Ayrıntılı Bir Karşılaştırma

Bu teknolojiler arasında yaşanan tüm komplikasyonlar göz önüne alındığında, iki teknoloji - Progressive Web App ve Flutter arasındaki farkı öğrenmeye çalışırken ilk başta biraz kafa karıştırıcı bulmanız anlaşılabilir. Sonuçta, her ikisi de tek bir kod tabanı kullanarak cihazlar arasında ilgi çekici deneyimler sunmak için kullanılabildiklerinden teoride çok benzer görünüyorlar.

Bu ikisini birbirinden ayırma çabasıyla, bugün bu iki teknolojinin çalışma biçimlerinden gerçek hayattaki kullanımlarına kadar derinlemesine bir dalış yapacağız. Hemen konuya girelim:

Kısa bir bakış

PWA nedir?

Basitçe söylemek gerekirse, Aşamalı Web Uygulamaları, bir uygulama gibi görünen ve hissettiren web siteleridir. Teknoloji, hem web hem de yerel uygulamalardan gelen en iyi özelliklerin bir karışımıdır; bu, PWA kullanan kullanıcıların, daha önce yerel uygulamalara özel olan anlık bildirimler, coğrafi konum vb. gibi tüm özelliklerden yararlanabileceği anlamına gelir. Web'deki en iyi özellikler

Bu umut verici yeni bir teknolojidir; ve Microsoft da dahil olmak üzere tüm büyük adamların son zamanlarda Windows'a PWA yüklemeleriyle toplu olarak benimsenmesiyle birleştiğinde, bundan sonra yalnızca daha fazla PWA göreceğinizden emin olabilirsiniz.

Flutter nedir?

Geliştirme aşamasında mükemmel piksel özelliğiyle tanınan Flutter, Google tarafından sunulan en yeni açık kaynaklı SDK'dır (Yazılım Geliştirme Kiti), yerel bir uygulamanın görünümüne ve hissine sahip mobil uygulamalar oluşturmak istiyorsanız, işinizi halletmeye devam ediyor. mevcut çapraz platform. Bu, Flutter uygulamalarının tek bir kod temeli düşünülerek oluşturulduğu ve böylece geliştirme maliyetlerini önemli ölçüde azalttığı anlamına gelir.

Bu, Aşamalı Web Uygulamasına çok benzer görünebilir, ancak sizi temin ederiz, tüm bu yerel uygulama deneyimlerini mümkün kılan temel mekanizmalar çok farklıdır.

Ayrıntılara girmek

Dil

Progresif Web Uygulamaları, daha önce belirtildiği gibi, daha çok web'in yeni standardı gibidir ve hangi programlama dilinde kodlanması gerektiği konusunda katı bir kural yoktur. Ancak, temelde hala web'den bir teknoloji olduğundan, web- JavaScript gibi tabanlı diller, PWA geliştirmesi için hala temeldir.

Flutter ise Dart programlama dilini kullanır. Dart tamamen nesne yönelimli bir programlama dilidir ve C tabanlı bir sözdizimi stiline sahip olduğundan, benzer sözdizimi stiline aşina iseniz öğrenmesi ve öğrenmesi kolaydır. Üstelik Dart, ARM ve x86 koduna derlenebilir ve Flutter'ın daha yeni sürümüyle, Dart kodunuzun web üzerinde etkili bir şekilde çalışabilmesi için onu JavaScript'e aktarabilmeyi bile bekleyebilirsiniz.

karmaşıklık

PWA, daha eski ve daha olgun bir dil olan JavaScript'e dayandığından, aralarından seçim yapabileceğiniz çok sayıda JavaScript çerçevesi ve kitaplığı olduğundan öğrenme eğrisinin daha bağışlayıcı olmasını bekleyebilirsiniz. Çok daha yeni bir dil olan Flutter, ilk bakışta biraz daha karmaşık görünebilir, çünkü kullanıcı arayüzünden mantık koduna kadar her şey Flutter'da az çok birbirine karışmış görünebilir. Ve Flutter'da her şey temelde bir widget olduğundan , kendinizi alışılmadık derecede büyük, derin ve karmaşık bir "widget ağacı" ile karşı karşıya kaldığınız durumlarda bulabilirsiniz.

Verim

Performans söz konusu olduğunda, bu ikisi, beklendiği gibi tek taraflı bir maç değil, birbirleriyle burun burunadır. Bir Flutter uygulamasıyla karşılaştırıldığında, tipik bir PWA, doğrudan yerel kodla 'konuşmaya' çalışırken biraz performans isabetine sahip olmalıdır - çünkü PWA çoğu zaman cihazın temel özelliklerine erişmek için bir JavaScript köprüsü kullanmak zorundadır. , örneğin, GPS, kamera, vb.

Bununla birlikte, kıyaslamalara bakıldığında, JavaScript çerçevelerinin, örneğin NodeJS'nin , birkaç durumda Dart'tan (Flutter uygulamalarının omurgası) daha iyi olmasa bile eşit performans gösterebileceği açıktır.

Bunun nedeni, JavaScript'in modern CPU'ların çok çekirdekli yapısından daha iyi yararlanabilmesi ve dilin doğası gereği tek iş parçacıklı olmasına rağmen iş yüklerini daha eşit dağıtabilmesidir. JavaScript sürecinin paralel yürütülmesi için iş parçacıklarının kullanılmasını sağlayan NodeJS tarafından sunulan en son worker_threads modülü ile JavaScript artık CPU yoğun iş yüklerini daha iyi işleyebilir ve aslında Dart gibi dilleri yenebilir.

Özellikler

Mobil uygulamaların platformlar arası geliştirilmesi için özel olarak yapılmış bir SDK olan Flutter'ın, Web teknolojileri üzerine inşa edilmiş PWA'dan çok daha özellikli olduğu şüphesizdir. Flutter uygulamaları, sistemle daha derin bir entegrasyona sahiptir ve bu nedenle cihazın daha yerel özelliklerinden yararlanabilir.

Ayrıca, genel kullanıcı deneyimi söz konusu olduğunda, Flutter, hem iOS hem de Android platformlarındaki kullanıcıların aynı kusursuz deneyimi yaşayabileceği piksel mükemmelliği felsefesini benimsediği için burada üstünlüğe sahiptir.

Bunun nedeni Flutter'ın yerel platform bileşenlerini kullanan diğer çoğu çerçevenin aksine kendi UI bileşenlerini oluşturmasıdır. Bu şekilde, Flutter uygulamaları cihazlar arasında çok daha tutarlıdır, ancak sonuç olarak, tipik bir Flutter uygulamasının boyutu, tipik bir PWA'dan önemli ölçüde daha büyüktür. Basit bir "Merhaba dünya!" Örneğin Flutter uygulamasının boyutu 7 MB'ın üzerinde olabilirken, aynı içeriğe sahip bir PWA asla 1 MB işaretini aşamaz.

Kullanım durumları

Peki bunlardan herhangi biri ne zaman seçilmelidir? Eh, her ikisi de farklı platformlarda ve farklı cihazlarda hemen hemen aynı kullanıcı deneyimleri sunabildiğinden, işin zorlaştığı yer burasıdır (bunu söyledi). Kilit nokta, bu teknolojilerin hangi güçlü noktasını daha çok tercih ettiğinizdir: erişim veya kullanıcı deneyimi.

Doğal olarak, PWA web teknolojisine dayanır, bu nedenle daha geniş bir hedef kitleye ulaşabilir ve hatta Microsoft Store'da bulunabilir, erişiminizi etkin bir şekilde aylık yaklaşık 700 milyon aktif kullanıcıdan oluşan Windows 10 yükleme tabanının tamamına genişletir.

Öte yandan bir Flutter uygulaması ve mükemmel piksel felsefesiyle, hem Android hem de Android için yalnızca bir kod tabanı gerektiğinden işletmeler için uygun maliyetli bir çözüm olurken uygulama içi deneyimi çok daha çekici hale getirebilir. iOS platformları.

Örnekler

Topladığımız PWA'lar ve Flutter uygulamalarından, yeteneklerini en iyi şekilde temsil edebileceğini düşündüğümüz daha belirgin olanlar şunlardır:

Flutter—The New York Times

Flutter, potansiyeli New York Times'ın KENKEN oyununun yeni Flutter Web versiyonuyla doğrulandığından, yeni bölümüne çok yakın bir zamanda 2019'un ortalarında başladı.

Flutter uygulamalarının Web versiyonunu gerçekleştirmeye çalışan geliştiriciler için bu harika bir haber çünkü Flutter çerçevesinin maksimuma itildiğinde neler yapabileceğini gösteriyor.

PWA—Twitter Lite

PWA'nın en iyi yaptığı şey olan Twitter Lite'ın şimdiye kadarki en başarılı PWA uygulaması olduğu söylenebilir - cihazlar arasında ilgi çekici, uygulama benzeri deneyimler sunar. Twitter PWA'yı deneyimlemek isteyen kullanıcılar, uygulamayı masaüstü, mobil veya tablet olmak üzere aklına gelen her cihazda başlatabiliyor…

Aynı performansa sahip Flutter uygulamalarıyla karşılaştırıldığında en iyi performans gösteren PWA'nın temel farkı, PWA'nızın toplam boyutunun cihazınızda 2 MB'tan fazla olmamasıdır.

Web sitelerini PWA'ya dönüştürdükten sonra Twitter etkileyici sonuçlar elde etti. Rakamlar kendileri için konuşur:

• Hemen çıkma oranında %20 düşüş,
• Oturum başına sayfa sayısında %65 artış,
• Gönderilen Tweetlerde %75 artış.

 İlgili makale: İlhamınız için 12 Aşamalı Web Uygulaması Örneği

Bir Flutter PWA, mümkün mü?

Flutter için web desteği halihazırda devam eden bir tartışma ve beta aşamasında. Flutter'ınızı Web'de kullanılabilir hale getirme süreci, onu mobil uygulamalar için kullanılan ARM makine koduna derlemek yerine Dart'ı JavaScript'e derlemek kadar basit olabilir.

Yine de, tüm bunları başarmayı biraz daha zorlaştıran bazı komplikasyonlar var; ancak yukarıdaki New York Times'ın KENKEN oyununda gözlemlendiği gibi, Flutter uygulamalarının düzgün bir Web uygulamasını yapmak mümkündür ve Flutter PWA yakında bir şey olacak.

Çözüm

Her ikisi de çok sayıda potansiyele sahip nispeten yeni teknolojiler olduğundan, daha fazla seçenek keşfetmeniz ve geliştirme ihtiyaçlarınız için hangisinin en uygun olduğunu kendiniz görmeniz faydalı olabilir.

SimiCart'ta, yeni nesil alışveriş deneyimini Magento mağazanıza getirmeye hazır, Google tarafından tanınan bir PWA Geliştirme Ajansıyız.

Devamını oku:
PWA vs Elektron: Derin Bir Dalış

PWA nedir? Progresif Web Uygulaması hakkında bilmeniz gereken her şey

Magento PWA Studio vs Vue Storefront: Hangisi sizin için?