Yerli ve PWA: Seçenekler, Meydan Okuyanlar Değil!

“Yerel” ve “web” arasındaki uçurumun gerçekten nerede başladığını tam olarak söylemek zor. Flash'ın ilk günlerinden bu yana yüzeyin hemen altında çalkalanan şeylerden biri gibi hissediyorum, ancak son zamanlarda mobil platformların yükselişiyle ortaya çıktı. Ne olursa olsun, geliştiriciler, kendi taraflarını desteklemek için birbirlerine hakaretler yağdıran bu "büyük uçurum" boyunca meydan okudular.

O kavgayla hiçbir ilgim yok. Elbette, ben bir “web adamıyım” ama bu, yerel gelişimin çekiciliğini göremediğim anlamına gelmez; Ben de bir yazılım geliştiricisiyim. Her şeyden önce, yine de ben bir pragmatistim. Her projenin farklı olduğunun ve her birine yaklaşımımızın projenin ihtiyaçlarına ve hedeflerine göre şekillendirilmesi gerektiğinin farkındayım.

Progresif Web Uygulamaları (PWA'lar) yerel gelişimin alanına girerken, bunun geri adım atmak ve ürün oluşturmaya yönelik bu iki yaklaşımı değerlendirmek için iyi bir zaman olabileceğini düşündüm. Umudum, yarattığımız ürünler için doğru olanı bulma umuduyla, her bir yaklaşımın güçlü yanlarını net bir şekilde görme yeteneğiyle hepimiz buradan uzaklaşacağız.

Hızlı Yangın Karşılaştırması

Hemen hemen en başından beri, web tabanlı deneyimler, masaüstü yazılımından (orijinal “yerel uygulamalar”) etkileşimli CD-ROM'lara, Flash'a ve en son olarak mobil uygulamalara kadar her şeyle karşılaştırıldı. Birçok kez ölü ilan edilmesine rağmen, web varlığını sürdürdü. Çoğu durumda, iddia edilen katillerinden (RIP Flash) bile daha uzun yaşadı.

Web'in bu konudaki en güçlü yönlerinden biri, uyarlanabilirliğidir. İnternet bağlantısı olan hemen hemen her yere gidebildi ve yeni yetenekler kazanmaya devam ediyor. Tüm programlama dilleri gelişiyor, bu nedenle beklenmedik bir durum değil, ancak zamanla web'in büyüyen sınırları geleneksel yazılımların alanına girmeye devam etti.

Bununla birlikte, web'in tarihsel olarak yetersiz kaldığı bir alan, performans alanında olmuştur. Yüklü yazılım, web'in basitçe yapamayacağı şekilde temeldeki işletim sistemine bağlanabilir. Donanıma doğrudan erişimle veya sık sık söylediğimiz gibi “metale daha yakın” olarak, sunucularının ortak lingua franca'sında yazılırlar. Neredeyse her zaman bunun üzerinde bir veya daha fazla soyutlama katmanını çalıştıran web, performans söz konusu olduğunda rekabet etmekte zorlandı. Performans farkı zamanla daralmış olsa da, yerel kodun web kodundan daha hızlı çalışmaya devam etmesi muhtemeldir, en azından web, sinyalleri doğrudan donanım pinlerinden yorumlayabilecek duruma gelene kadar.

Performans avantajıyla birlikte yerel geliştirme, NFC, Bluetooth, yakınlık ve ortam ışığı sensörleri ve daha fazlası gibi cihaz özelliklerine çok daha fazla (ve daha erken) erişime sahiptir. Web, bu özelliklere de istikrarlı bir şekilde erişim kazanıyor, ancak yerel API'lerin web'den faydalanmadan önce geliştirilmesi gerektiğinden ve tarayıcı ortamında standardizasyon zaman aldığından, her zaman yerel API'lerin gerisinde kalacaktır.

Ek olarak, yerel kod, adres defteri ve takvimler gibi işletim sistemi düzeyindeki özelliklere bağlanabilir. Anında iletme bildirimleri bir diğer önemliydi, ancak Servis Çalışanları artık web'in bu özellikten de yararlanmasını sağlıyor. Ödeme işleme, son zamanlarda web'de benzer şekilde iyileşti. Belki adres defteri ve takvim erişimi de eninde sonunda web'e gelecek.

Bir an için Service Workers'a geri dönersek, web geliştiricisinin araç kutusuna yapılan bu son eklemenin de bir dizi başka püf noktası var. Her şeyden önce, Web'in daha önce AppCache ile sunduğundan çok daha sağlam bir önbelleğe alma sistemi sunar. Servis Çalışanlarını çevrimdışı istekleri yönetmek, belirli kaynakları önbelleğe almak, kullanıcı siteyi açmamışken bile uzak bir sunucuyla verileri eşitlemek ve çok daha fazlası için kullanabilirsiniz. Service Workers, belki de diğer tüm teknolojilerden daha fazla, web'in daha uygulamaya benzer bir deneyim sunmasını sağladı.

Hizmet Çalışanları, PWA'ların üç teknik temel taşıdır. Bir diğeri Web Uygulaması Manifestosu. Kulağa biraz sıkıcı gelse de, bir Web Uygulaması Bildirimi, bir web sitesinin kendisini bir uygulama olarak tanıtmasına olanak tanıdığı için aslında inanılmaz derecede güçlü bir araçtır. Bu nispeten basit JSON dosya biçimi, tanımladığı web sitesi hakkında zengin bilgiler sağlar ve PWA'yı tanıyan tarayıcıların ve işletim sistemlerinin siteyi yerel bir yazılımmış gibi yüklemesini sağlar.

Bazı uygulama mağazaları, ilişkili girişlerini doldurmak için Manifest'lerini kullanarak PWA'ları endekslemeye bile başlıyor. Kullanıcı açısından bakıldığında, uygulama mağazalarındaki PWA'lar, onları çevreleyen yerel uygulamalardan farklı değildir. Yüklenebilirler, yüklenemezler ve ayarlarını temel işletim sisteminin uygulama yönetim aracına bile gösterebilirler. Ayrıca PWA'ların, onları kullanmak için açıkça yüklemesi için bir kullanıcıya ihtiyaç duymadığını da belirtmekte fayda var, çünkü onlar web'de yaşıyorlar.

Hem web'de hem de web'de olmak, PWA'ların her zaman güncel olduğu anlamına gelir. Kullanıcıların yeni işlevlere erişmek için aktif olarak yeni bir şey indirmelerine gerek kalmayacak. Ve yeni içerik ve özellikler kullanıma sunulsa bile, çoğu yerel uygulamada olduğu gibi bir kullanıcının tüm PWA'nızı yeniden indirmesi pek olası değildir. Bir şey olursa, birkaç yeni varlık ve bazı yeni HTML alabilirler ve bu oldukça anında gerçekleşir, uygulama mağazası gerekmez. Tabii ki, uygulama mağazaları tarafından sağlanan keşif ve dağıtım seçeneğine hala sahipsiniz, yani gerçekten her iki dünyanın da en iyisi.

Uygulama mağazalarında olmak, PWA'ları keşif, dağıtım ve para kazanma açısından yerel uygulamalarla eşit koşullara sokar. Aslında, PWA'lar arama motorları aracılığıyla keşfedilebildiğinden ve bir URL'de bulundukları için uygulamalardan çok daha fazla paylaşılabilir olduklarından, web'i yerel üzerinden bile tonozlayabilir. İyi oluşturulduklarında PWA'lar ayrıca tarayıcılar, platformlar ve cihazlar arasında birlikte çalışabilir. PWA özellikleri aşamalı geliştirmeler olduğundan, PWA'lar Service Workers gibi özellikleri desteklemeyen tarayıcılarda bile çalışır.

Web ayrıca çok gelişmiş erişilebilirlik desteği sunarak projelerinizin en geniş sayıda kullanıcı tarafından kullanılabilir olmasını nispeten kolaylaştırır. Karmaşık arayüzler, programlama söz konusu olduğunda biraz daha titizlik gerektirir, ancak anlamsal HTML'nin sağladığı erişilebilirlik avantajları, aplomb ile temel erişilebilirliği ele alır - özellikle metin ağırlıklı, bilgilendirici veya basit form tabanlı ürünler söz konusu olduğunda. Buna karşılık, neredeyse her zaman erişilebilirlik API'lerinden haberdar olmanız ve yerel kodunuza dahil etmeniz gerekir.

Geliştirme konusunda, geliştirme deneyimi söz konusu olduğunda net bir kazanan olduğunu düşünmüyorum. Her dilin hayranları vardır ve geliştirici araçları için de aynı şey söylenebilir. Sevdiğiniz şeylerden hoşlanıyorsunuz ve bildiğiniz ve tutkuyla bağlı olduğunuz araçlar ve dillerle daha verimli olma eğilimindesiniz. Ne web ne de yerel geliştirmenin burada belirgin bir avantajı yoktur.

Bununla birlikte, yerel geliştirmenin parladığı yer, SDK'ları (Yazılım Geliştirme Kitleri) kullanılarak oluşturulan UI'ler için tutarlı bir kalite düzeyi sağlamaya gelince. Çoğu yerel SDK, performans, tasarım, işlevsellik ve daha fazlasını test etmek için araçlar sunar. Ayrıca, yerel yazılım tekliflerinin genel çıtasını yükseltmeye yardımcı olan standart kod, tasarım sistemleri ve diğer araçları içerir. Elbette, web için benzer araçlar var, ancak bunlar web'e dağılmış durumdalar ve insanların web siteleri oluşturmak için kullandıkları tüm farklı geliştirme ortamlarında evrensel değiller. Kaliteli web deneyimlerini tanımlayan ve bunları oluşturmak için araçlar sağlayan (birçoğu denemiş olsa da) tek bir varlık yoktur.

Bir ürünün geliştirilmesinde personel sağlamak söz konusu olduğunda, web için nasıl geliştirileceğini bilen kişileri işe almak kesinlikle daha kolaydır. Ben yazarken, Programlama Dili Dizini şu anda JavaScript'i en popüler dil olarak sıralıyor ve Java hemen arkasında. C# 5. sırada, HTML 7. sırada, CSS 9. sırada ve Swift 15. sırada yer alıyor. Bu dizin, GitHub'daki genel depolarda değiştirilmiş satırlarla Stack Overflow etiketlerine çapraz referans verir, bu nedenle bir tuz tanesi ile alınmalıdır, ancak birçok kişinin web teknolojilerini bildiği (ve kullandığı) konusunda oldukça açık bir gösterge sağlar. Diğer taraftan, yetenekli yerel geliştiricileri bulmak ve işe almak genellikle zor olabilir çünkü daha az sayıda yerel geliştirici var ve bu geliştiriciler yüksek talep görüyor.

Kıt yetenek, yerel gelişim için muhtemelen daha fazla ödeme yapacağınız anlamına gelir. Her proje açıkça farklıdır ve farklı özelliklere ve gereksinimlere sahiptir, ancak bir karşılaştırma olarak ortalama geliştirme maliyetlerine bakmak açıklayıcı olabilir. Comentum, orta büyüklükte bir web uygulaması oluşturmanın 10.000 ABD Doları ile 150.000 ABD Doları arasında değiştiğini öne sürüyor. Yerel uçta, Appster orta ölçekli mobil uygulama projelerinin yapım maliyetinin 110.000 ABD Doları ile 305.000 ABD Doları arasında olduğunu tahmin ediyor. Yerel projelerin geliştirilmesinin bir web projesinden iki kat daha pahalıya mal olacağını varsaymak muhtemelen güvenlidir. Ve bu platform başına. Yerel uygulamaların da geliştirilmesi genellikle daha uzun sürer.

PWA oluşturmadan web teknolojilerini kullanarak yerel yazılım oluşturma seçeneklerinin olduğunu belirtmekte fayda var. React Native, PhoneGap, Ionic ve Appcelerator Titanium gibi çerçeveler HTML, CSS ve JavaScript'ten yerel kod oluşturmanıza olanak tanır. Bu araçlardan birini kullanmak, yerel geliştiricilerden oluşan bir ekip işe almaya kıyasla personel ve geliştirme maliyetlerinizi düşürebilir, ancak cihaz özelliklerine erişim açısından projeniz çerçevenin uyguladığıyla sınırlı olacaktır. Buna göre planlayın.

Uygulama geliştirildikten sonra, söz konusu uygulama veya uygulamaların devam eden bakım maliyetlerini de hesaba katmanız gerekir. Clutch tarafından yürütülen bir ankete yanıt olarak Dom & Tom, ürünün başlangıç ​​fiyatının ilk yıl için %50'sini, ikinci yıl için %25'ini ve sonraki her yıl için %15-25 arasında bütçelemenizi önerir.

Web ve yerel geliştirmenin nasıl karşılaştırıldığını ve karşılaştırıldığını iyi bir şekilde kavradıktan sonra, projenizle hangi güçlü ve zayıf yönlerin alakalı olduğunu değerlendirmeye başlayabilirsiniz. Muhtemelen bazı ödünler vermek zorunda kalacaksınız ve bu beklenen bir şey. Herkese uyan tek bir çözüm yoktur. Ve eğer olsaydı, kimseye uymazdı.

Yerel ve PWA için geliştirme arasındaki farkları daha net bir şekilde odak noktasına getirmek için birkaç varsayımsal proje üzerinden geçelim.

Proje 1: Mevcut Bir Yerel Uygulama

Diyelim ki yerel bir uygulama oluşturma sürecinden geçtiniz. Her şey yolunda gidiyorsa, rotayı değiştirmek için bir sebep yok. Gerçekten iyi bir nedeniniz olmadıkça, bir PWA'ya geçmek için mevcut tüm çalışmalarınızı atmayın. Aklıma PWA'ya geçişi garanti edebilecek tek bir senaryo geliyor: Karışıma yeni bir işletim sistemi desteği getirmek. Ve o zaman bile, yalnızca uygulamanızın ihtiyaçlarının yalnızca web tarafından karşılanabilmesi gerçekten anlamlıdır.

Bir ürüne yeni bir platform için destek ekliyorsanız, bu ihtiyaçların karşılanmasının maliyeti açısından projenin ihtiyaçlarını ve hedeflerini değerlendirmek için mükemmel bir fırsat yaratır. Web göreve uygun değilse, yerele bağlı kalın. Bununla birlikte, duraklatın ve şunu düşünün: Bir PWA kullanarak yeni platform için destek eklemek, yolun aşağısındaki ek platformları (web dahil) desteklemenize olanak tanır ve hatta PWA'yı tamamladıktan sonra mevcut yerel uygulamanızı değiştirmenize olanak tanır. iyice test edilmiştir.

Mevcut bir yerel uygulamayı bir PWA ile değiştirmek size akıl almaz geliyorsa, şunu düşünün: Starbucks ve Twitter bu fikri şimdiden araştırıyor.

Uygulamalarınızı yerel tutmanız için belirli nedenler varsa, yine de belirli uygulama özelliklerini web'e "dış kaynak sağlamayı" düşünmeye değer olabilir. Birkaç yıl önce, büyük bir finansal hizmetler firması için bir proje üzerinde çalışıyordum ve güvenlik özelliklerini tipik uygulama mağazasından daha hızlı sunmalarını sağlamak için yerel uygulamalarının oturum açma akışını web'e taşımayı seçtiler. onay süreci başarmalarını sağladı. Belki de projenizin, web'in yerel uygulamanızı karşılaması için güçlendirebileceği benzer ihtiyaçları vardır.

Proje #2: Mevcut Bir Platformlar Arası Uygulama

Platformlar arası çalışan mevcut bir uygulamanız varsa, bu uygulamanın devam eden geliştirme ve bakımı için büyük olasılıkla çok para harcıyorsunuzdur. Ayrıca, her yerel platformun kendi geliştirme zaman çizelgesine sahip olma eğiliminde olduğu için, bazı uygulama içi özelliklerde farklılık görebilirsiniz. Örneğin perakendeci Target uygulaması şu anda kullanıcıların iOS'ta bir alışveriş listesini yönetmesine izin veriyor, ancak Android sürümünde bu özellik yok. Birçok yönden, bir web sitesinin “masaüstü” ve “mobil” sürümleri arasında bazen gördüğümüz ayrılığa benzer.

Web zaten platformlar arası karışımınızın bir parçasıysa, buradaki yatırımlarınızı ikiye katlamak ve yerel uygulamalarınızı PWA'larla değiştirmeyi düşünmek için iyi bir fırsat sunar. Sonar ve Deniz Feneri gibi araçlar, mevcut sitenizin PWA doğrulaması için ne kadar iyi hazırlandığı konusunda size fikir verebilir ve ayrıca ne üzerinde çalışmanız gerektiğini de söyleyebilir. Oradan, web sitenizi bir PWA'ya dönüştürmek nispeten basittir. Sitenizi birkaç dakika içinde PWA'ya yükseltmenize yardımcı olabilecek ücretsiz araçlar bile var. Ancak, değilse, platformlar arasındaki özellik farklılığı gerçekten korkunç hale gelmedikçe veya karışıma başka bir yerel platform (veya web) eklemeyi düşünmüyorsanız, bu hareketi yapmak için gerçekten çok fazla teşvik yoktur.

Proje #3: Yeni Bir Platformlar Arası Ürün

Birden fazla platforma yönelik yeni bir projeye başlıyorsanız, onu PWA olarak tek bir yerde oluşturmak ve sürdürmek kesinlikle masada olmalıdır. Bütçenize ve personelinize bağlı olarak, bütçenizi en fazla uzatması muhtemeldir. Bununla birlikte, ürününüz donanıma veya temel işletim sistemine doğrudan bağlantı gerektiriyorsa, yine de yerel olmanız gerekebilir. Ancak bu yola gitmeden önce, tüm gereksinimlerinizin bir listesini yapın ve ardından web'in neler yapabileceğini (ve ne yapamayacağını) doğrulayın. Birden fazla tarayıcıda da desteği kontrol ettiğinizden emin olun.

Proje #4: Yeni Bir Hiper Odaklı Ürün

Yeni bir ürün inşa ediyorsanız ve o ürünün tüm amacının bir parçası, belirli bir platformla derin bağlantısıysa, elbette o platform için inşa edin. Örneğin, ürününüz Apple'ın Mesajlar platformuna veya HomeKit ile entegrasyona dayanıyorsa, elbette iOS ve/veya macOS için Swift'de derleyin. Ürününüz bir pencere öğesi aracılığıyla kullanıcı ihtiyaçlarını en iyi şekilde karşılıyorsa veya özel bir başlatıcı oluşturuyorsanız, Android'i oluşturmanız en iyisidir ve Java kullanmanız gerekir.

Bununla birlikte, tüm yerel özellikler duvarlı bahçeler değildir. Amazon'un Alexa'sı, Apple'ın Siri'si ve Google Asistan'ın tümü, uygulamanızla entegre olmak için yerel kod (veya bir JSON API) gerektirirken, ilginç bir şekilde Microsoft'un Cortana'sı, yalnızca HTML'nizin head bağlantılı bir XML dosyası kullanarak PWA'nızı sesli olarak etkinleştirir. Belki başkaları da onların yolundan gidecektir.

PWA Veya Yerli? Seçim senin

Web ve yerelin her birinin sunabileceği çok şey var. Hangisi daha iyi diye soracak olursanız, “Durum değişir” diye cevap verirdim çünkü öyle. Kaçamak veya tarafsız davranmıyorum; Projeniz için hangisinin doğru olduğunu bulmak tamamen projenizin özel ihtiyaçlarına bağlıdır. Ne inşa ettiğinizi, onu inşa etmekle görevlendirilen mevcut ekibin bileşimini veya bunu yapmak için kiralamanız gereken ekibi ve birlikte çalışmanız gereken bütçeyi dikkate almayı gerektirir. Çoğu durumda, web muhtemelen projenizin hedeflerine ulaşmak için ihtiyacınız olan her şeyi sunar, ancak her zaman istisnalar vardır. Web'in sunduğu olanakları keşfetmek istiyorsanız, bu makalenin sonuna bazı kaynaklar ekledim.

Yazılım geliştirmeye yönelik farklı yaklaşımları – veya farklı çerçeveleri, kitaplıkları, dilleri, tasarım sistemlerini vb. – tartarken yapabileceğiniz en önemli şey, eldeki projeyle ilgili seçeneklerinizi değerlendirmektir. Araştırmanızı yapın ve seçeneklerinizi tartın. Ve akıllı pazarlama, seksi demolar veya kuduz fanboylar tarafından şu ya da bu şekilde sallanmanıza izin vermeyin. Bu dahil.

PWA ile İlgili Kaynaklar

• PWA Oluşturucu
  Yararlı öneriler ve tarifler içeren 3 adımlı bir web sitesinden PWA'ya oluşturma aracı. Ayrıca PWA'nızı Windows, Android ve iOS için yüklenebilir yerel uygulamalara dönüştürmenize olanak tanır.
• Aşamalı Web Uygulamanız için Aşamalı Bir Yol Haritası
  Jason Grigsby, ekibinin birkaç ay içinde PWA'ların özelliklerini web sitelerine nasıl dahil etmeye başladığını ve farklı özelliklerin birer birer nasıl eklenebileceğini güzel bir şekilde gösteriyor.
• Evet, O Web Projesi Bir PWA Olmalı
  Gerçekten sizin tarafınızdan yazılmış, PWA'ların UX fırsatlarına (ve risklerine) genel bir bakış.
• MDN'de Aşamalı Web Uygulamaları
  Kaliteli bir PWA'yı neyin karakterize ettiği hakkında bilmeniz gereken tüm teknik bilgiler için bir merkez.
• Web Bugün Ne Yapabilir?
  Cihazınızın, işletim sisteminizin ve tarayıcınızın desteklediği API'lere göz atın. Bulduğunuz şey sizi şaşırtabilir.
• Kullanabilirmiyim
  Her büyük tarayıcıda hangi API'lerin ve özelliklerin mevcut olduğuna ve bu desteğin insanların gerçekte kullandığı tarayıcılara göre nasıl ölçüldüğüne dair kesin veritabanı. Ayrıca, belirli özelliklerin geriye dönük olarak ne kadar uyumlu olduğunu görmek için size mükemmel bir geçmiş görünümü verebilir.