İçerik
- PWA'lar ve Yerel uygulamalar arasındaki fark nedir?
- Progresif web uygulamaları: Web için geliştirme
- PWA'ların güçlü yönleri
- PWA'ların zayıf yönleri
- React Native
- React Native'in Güçlü Yönleri
- React Native'in Zayıf Yönleri
- NativeScript
- NativeScript'in Güçlü Yönleri
- NativeScript'in Zayıf Yönleri
Bir uygulama oluştururken hangi yaklaşımı benimsemelisiniz? PWA / web teknolojileri rotasına mı girmelisiniz yoksa yerelleşip belirli platformlar için tasarım mı yapmalısınız? Her iki seçeneğin de artıları ve eksileri vardır ve bu makalede, web uygulamaları ve yerel uygulamalar oluşturmak için kullanılan popüler seçeneklerden birkaçına odaklanıyoruz.
Web uygulamaları olarak bilinen PWA'lar (Progressive Web Apps), popüler web teknolojileri HTML, CSS ve JavaScript ile oluşturulmuştur ve bir web tarayıcısında çalışır. (Derlemelerinize yardımcı olması için bazı temel HTML etiketlerine bakın.) PWA'lar, bir uygulama gibi görünmek üzere tasarlanmış etkili mobil web siteleridir ve web API'lerinin kullanımı, onlara yerel bir uygulamaya benzer işlevsellik sağlar.
Uygulama geliştirmeyle ilgili daha fazla tavsiye için, bir uygulamanın nasıl hazırlanacağıyla ilgili gönderimize bakın veya bu bir site oluşturmak istiyorsanız, bu en iyi web sitesi oluşturucularına ve web barındırma hizmetlerine bakın.
PWA'lar ve Yerel uygulamalar arasındaki fark nedir?
Progresif Web Uygulamaları, bir uygulama mağazasına ihtiyaç duymadan bir cihaza kurulabilir ve canlı olarak sunulma avantajına sahiptir. Ve sürecin bir parçası, geliştiricilerin bir uygulamanın nasıl göründüğünü ve nasıl başlatıldığını kontrol etmesine olanak tanıyan Web Uygulaması Manifest'idir. Ayrıca, web tasarımcıları / ön uç geliştiricileri, hemen oluşturmaya başlamak için gereken beceri setine zaten sahip olacaktır. Yerel uygulamaların aksine yeni bir dil öğrenmeye gerek yoktur.
Yerel uygulamalar, belirli bir işletim sistemi göz önünde bulundurularak oluşturulmuştur - ör. iOS ve Android - ve bu amacı gerçekleştirmek için bir çerçeve veya dil kullanın. iOS uygulamaları genellikle Xcode veya Swift ve Android uygulamaları, JavaScript kullanır. Ancak bu makale için, her iki platform için de çalışan birkaç JavaScript tabanlı açık kaynak çerçevesine (React Native ve NativeScript) odaklanıyoruz.
Yerel uygulamaların avantajları, bir cihaz donanımını ve yazılımını daha iyi kullandıklarından, daha hızlı ve daha duyarlı olduklarından ve uygulama mağazalarında derecelendirmelerle kalite güvencesi aldığınız için genellikle daha iyi işlevsellik getirmeleridir. Ancak, belirli bir çerçevenin veya kitaplığın nasıl kullanılacağını öğrenmek zorunda olmak anlamına gelecektir.
Burada, bir uygulama oluşturmak için üç farklı seçeneğe bakıyoruz - biri web (PWA) ve ikisi yerel (React Native, NativeScript) -. Uygulamanızı oluşturmak için hangi seçeneği seçmeniz gerektiğine karar vermenize yardımcı olmak için nasıl çalıştıklarını, neler yapabileceklerini ve güçlü ve zayıf yönlerini inceliyoruz.
Progresif web uygulamaları: Web için geliştirme
PWA'ların güçlü yönleri
- Uygulamalar ayrıca tarayıcıda da çalışır
- Dağıtım: tarayıcı, kurumsal ve uygulama mağazaları
- React, Angular, Vue, vanilya veya diğer çerçeveleri kullanabilir
PWA'ların zayıf yönleri
- Her yerel API'ye erişim yok
- İOS ve iPadOS'ta yetenekler ve mağaza dağıtımı sınırlıdır
- Sürekli evrim içinde
PWA'lar, yalnızca web yığınını kullanarak yüksek performanslı, çevrimdışı, yüklenebilir uygulamalar oluşturmak için mevcut tasarım modelidir: HTML, CSS, JavaScript ve tarayıcı API'leri. Hizmet çalışanı ve web uygulaması bildirim özellikleri sayesinde artık Android, iOS, iPadOS, Windows, macOS, Chrome OS ve Linux için yükledikten sonra birinci sınıf bir uygulama deneyimi oluşturabiliyoruz.
PWA'lar oluşturmak için herhangi bir mimariyi kullanabilirsiniz: sunucu tarafı, vanilya JavaScript, React, Vue, Angular veya diğer istemci tarafı çerçevelerden. Tek sayfalı bir uygulama veya çok sayfalı bir web uygulaması olabilir ve kullanıcıları çevrimdışıyken nasıl destekleyeceğimizi tanımlıyoruz.
Bu yaklaşımda, uygulamamızın kaynaklarını paketlememize ve imzalamamıza gerek yoktur: sadece dosyaları bir web sunucusunda barındırırız ve servis çalışanı, dosyaları istemcide önbelleğe almaktan ve kurulumdan sonra onlara sunmaktan sorumlu olacaktır. Bu aynı zamanda, bir uygulamanın güncellenmesi gerekiyorsa, yalnızca sunucudaki dosyaları değiştirdiğiniz ve hizmet çalışanının mantığının, kullanıcıların cihazlarında kullanıcı veya uygulama mağazası müdahalesi olmadan bunları güncellemekten sorumlu olacağı anlamına gelir.
Dağıtım açısından en yaygın yöntem tarayıcıdır. Kullanıcılar, Ana Ekrana Ekle veya Yükle menü öğesini kullanarak, yükleme davetini kabul ederek veya uyumlu platformlarda özel bir web uygulaması kullanıcı arabirimi kullanarak uygulamayı tarayıcıdan yükler. Apple'ın App Store'da yayınlanan saf PWA'ları reddettiğini ve web geliştiricilerini Safari aracılığıyla dağıtmaya teşvik ettiğini belirtmekte fayda var.
Kullanıcı arayüzü tamamen web çalışma zamanı tarafından yönetilir, bu da web tasarımcısının ekrandaki her bir kontrolü işlemekten sorumlu olduğu anlamına gelir. Ionic veya Materyal Tasarım kitaplığı gibi bir UI çerçevesi kullanırsanız, HTML ve CSS Android veya iOS'ta yerel arayüzleri taklit eder ancak bu zorunlu değildir.PWA'lar yaparken, iyi bir kullanıcı deneyimi sağlamak için web performans tekniklerini uygulamak zorunludur.
Yetenekler açısından, bir PWA yalnızca o platformdaki tarayıcı motorunda bulunan API'lara erişebilir ve uygulama mağazası PWA dağıtımları haricinde yerel kodla genişletilemez. Bu konuda, iOS ve iPadOS, PWA'lar için daha sınırlı platformlardır; Chrome (Android ve masaüstü işletim sistemleri için) daha fazla kullanılabilirliğe sahiptir ve Fugu projesiyle JavaScript'e olası her API'yi eklemek için çok çalışmaktadır.
- En iyi bulut depolama: Sizin için doğru seçeneği seçin.
React Native
React Native'in Güçlü Yönleri
- React.js ile aynı modeller
- Bazı web API'leri kullanıma sunuldu
- Web ve masaüstü desteği
React Native'in Zayıf Yönleri
- Web kullanıcı arayüzü bileşenleri yeniden kullanılamaz
- Yerel köprünün biraz çalışmaya ihtiyacı var
- React deneyimi gerekli
React Native, Facebook sponsorluğunda, iOS, iPadOS ve Android için yerel uygulamaları tek bir kaynak koddan derlemek için JavaScript dilinin yanı sıra React tasarım modellerini kullanan açık kaynaklı JavaScript tabanlı bir bileşen çerçevesidir.
Ancak, oluşturma için hiçbir HTML öğesi kabul edilmez; yalnızca diğer yerel bileşenler geçerlidir. Bu nedenle, bir div> Birlikte p> ve bir giriş> JSX ile bir öğe oluşturuyorsanız, bir Görüntüle> Birlikte Metin> ve bir TextInput>. Stil bileşenleri için hala CSS kullanırsınız ve mizanpaj Flexbox aracılığıyla tanımlanır.
Kullanıcı arayüzü bir tarayıcının DOM'sunda değil, Android ve iOS'ta yerel kullanıcı arayüzü kitaplıkları kullanılarak oluşturulmaz. Bu nedenle, bir Düğme> ReactNative'de, iOS'ta bir UIButton örneği olacak ve android.widget.Button Android'de sınıf; React Native'de herhangi bir web çalışma zamanı yoktur.
Bununla birlikte, tüm JavaScript kodu cihazdaki bir JavaScript sanal makinesinde yürütülecektir, bu nedenle uygulamayı derlerken JavaScript'ten gerçek yerel koda dönüştürme yapılmaz. Fetch API, WebSockets ve tarayıcının zamanlayıcıları gibi web geliştiricileri için iyi bilinen bir dizi API vardır: setInterval ve requestAnimationFrame. Diğer yetenekler, animasyonlar gibi özel API'ler aracılığıyla platforma yerleştirilir.
Hızlı bir React Native projesine iki ücretsiz CLI ile başlayabilirsiniz: Expo veya daha gelişmiş ve resmi ReactNative CLI. Resmi CLI kullanıyorsanız, Android uygulamasını derlemek ve test etmek için Android Studio'ya ve aynısını iOS ve iPadOS'ta yapmak için Xcode'a ihtiyacınız vardır, bu nedenle bu platform için bir macOS bilgisayara ihtiyacınız olacaktır.
React Native, iOS ve Android için yerel uygulamaları derler; bu, uygulamanızın dağıtımının diğer yerel uygulamalarla aynı kuralları izleyeceği anlamına gelir: herkese açık uygulamalar için uygulama mağazaları, kurumsal dağıtım ve alfa / beta testi. Tipik olarak, bir uygulamayı bir tarayıcı aracılığıyla dağıtamazsınız, ancak Web için React Native ve Microsoft'un React Native for Windows platformları yardımcı olabilir.
NativeScript
NativeScript'in Güçlü Yönleri
- Kodlama ve test için iyi araçlar
- Oynamaya hazır kapsamlı uygulama galerisi
- Tüm Android ve iOS API'leri JS'de sunulur
NativeScript'in Zayıf Yönleri
- Küçük topluluk
- Web kullanıcı arayüzü bileşenleri yeniden kullanılamaz
- Web, masaüstü veya React desteği yok
NativeScript, React Native kadar iyi bilinmemekle birlikte aynı alanda rekabet etmektedir: JavaScript ve web çerçevelerinden yerel iOS ve Android uygulamaları. Yerel uygulamalar oluşturmak için JavaScript veya TypeScript ve bir XML kullanıcı arayüzü dosyası kullanmanıza izin verir. Ayrıca, kutudan çıktığı anda Angular ve Vue'yu destekler, bu nedenle bu çerçevelere alışmış geliştiriciler için harika bir çözümdür.
Angular veya Vue kullandığınızda NativeScript'in avantajları daha nettir. Angular için, alışkın olduğunuz aynı bileşenleri oluşturursunuz, ancak tüm veri bağlamaları dahil şablon için HTML yerine XML kullanırsınız. XML'de a yerine div> Birlikte p> ve bir img>, bir yerleştireceksin StackLayout> Birlikte Etiket> ve bir Görüntü> bileşen.
CSS ve Sass, tarayıcıda CSS'ye benzer stillerle desteklenir. Yönlendirme ve ağ yönetimi, standart Angular hizmetlerinin uygulamaları aracılığıyla yapılır. Vue için de benzer bir şey; Şablonu HTML kullanmak yerine XML olarak yazarsınız. şablon> .vue dosyanızdaki öğesi.
NativeScript, daha sonra bir Android veya iOS yerel kontrolüne eşlenen bir bileşen koleksiyonunu içerir, bu nedenle bir liste veya seçici oluşturduğunuzda, React Native ile aynı fikri kullanan yerel uygulama olacaktır.
JavaScript veya TypeScript kodunuz (aktarılmış), yerel ortama / yerel ortama bir köprü ile aygıt üzerindeki bir JavaScript sanal makinesinde yürütülür. Bu köprüde, Android veya iOS / iPadOS'tan tüm yerel API'ler açığa çıkar, bu nedenle çapraz platform API'lerine erişime sahip olsak da, JavaScript / TypeScript'ten herhangi bir Java veya Objective-C kodunu başlatabilir veya çağırabiliriz ve NativeScript veri türlerini sıralar.
NativeScript, VS kod eklentileri, CLI, çalışırken yeniden yükleme test sistemi ve NativeScript oyun alanı uygulaması dahil olmak üzere araçlar için harika bir desteğe sahiptir, bu nedenle test sırasında tüm bağımlılıkları ve çevrimiçi gibi birkaç ek hizmeti yüklemenize gerek kalmaz. oyun alanı.
Son olarak, NativeScript yalnızca kurallarına, kurumsal dağıtımına ve alfa / beta testine uymanız durumunda resmi dağıtım kanallarından ve uygulama mağazalarından yüklenebilen Android ve iOS için bir uygulama derler. Tipik olarak uygulamaları bir tarayıcıdan dağıtmanın bir yolu yoktur ve bu platform için masaüstü uygulamaları için hiçbir çözüm yoktur.
Bu makale ilk olarak şurada yayınlandı: sorun 325 of net, web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi. Satın Al sorun 325 veya abone ol net.
Daha iyi JavaScript oluşturmanıza yardımcı olan konferans GenerateJS'deki JavaScript süper yıldızları serimizle Nisan 2020'de bize katılın. Şimdi rezervasyon yapcreateconf.com
