İyonik Geliştiricilerin Yaptığı En Yaygın 9 Hata

Yayınlanan: 2022-03-11

Tanıtım

Ionic iki yıldır piyasada. AngularJS'ye dayalı hibrit uygulamalar geliştirmek için harika bir araç setidir. Ionic, inşa edilmiş bir milyondan fazla uygulama ve büyüyen binlerce geliştirici topluluğuyla şu anda son derece popüler.

Ionic'in ilk sürümünden bu yana zaman geçti ve web teknolojileri ve en iyi uygulamalar birçok yönden gelişti. Bu nedenle yeni bir projeye başlarken hangi yolun izleneceğini belirlemek zordur. Bu koşullarda geliştiriciler, uygulamalarının kalitesini veya ekiplerinin üretkenliğini potansiyel olarak etkileyen hatalar yapabilir.

Aşağıdaki Sık yapılan hataları okuyarak, temel sorunlardan kaçınmanın ve Ionic ile performanslı ve ölçeklenebilir uygulamalar oluşturmanın anahtarlarına sahip olacaksınız.

Yaygın Hata 1: Yerel Kaydırmayı Etkinleştirmeyi Unutmak

Yerel Kaydırma , Ionic'in desteklenen web görünümlerinde kaydırma olaylarını dinlemesine olanak tanır. Yenilemek için Çek , Liste Yeniden Sıralama ve Sonsuz Kaydırma , tarayıcıların uygun kaydırma olaylarından yoksun olduğu bir zamanda oluşturulan JavaScript kaydırma olmadan mümkün kılar.

Yerel Kaydırma, Ionic 1.2'den (Aralık 2015) beri Android'de varsayılan olarak etkindir. Asenkron olaylar nedeniyle düzgün bir kaydırma sağladığı için büyük bir performans ve kullanıcı deneyimi geliştirmesidir.

Ne yazık ki, iOS'ta uygun olayların olmaması nedeniyle, o platform için yerel kaydırma henüz etkinleştirilmemiştir.

1.2'den önceki bir sürüm kullanıyorsanız, $ionicConfigProvider kullanarak Android için Yerel Kaydırmayı etkinleştirebilirsiniz:

 // Enable Native Scrolling on Android $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

Ayrıca, herhangi bir ion-content overflow-scroll yönergesini kullanarak herhangi bir sayfada Yerel Kaydırmayı etkinleştirebilir veya devre dışı bırakabilirsiniz:

 <!-- Disable Native Scrolling on this page only --> <ion-content overflow-scroll=”false”>

Lütfen uygulamanızın çok sayıda öğe listesini göstermesine izin veren toplama-tekrarın yerel kaydırma ile kapsanamayacağını unutmayın.

Yaygın Hata #2: Platformları ve Eklentileri Yüklemek için İyonik CLI'yi Kullanmamak

Ionic CLI, Cordova CLI'ye özellikler ekler. Platformlar ve eklentiler kalıcılığı, Ionic CLI'nin eklediği harika bir özelliktir.

Cordova CLI ile ilgili sorun, yüklediğiniz platformların ve eklentilerin yalnızca makinenize kurulu olmasıdır. Bir ekip üzerinde çalışırken, hataları önlemek için aynı ortamı, platformları ve eklentileri paylaşmak istersiniz. Cordova CLI ile projeyi geliştirici makineleri arasında senkronize tutmak daha zordur. Evet, platformlar ve eklentiler klasörlerini taahhüt edebilirsiniz, ancak bu önerilmez.

Ionic CLI platformlarını yüklemek için Ionic CLI kullanırken ionic platform add ios ve plugins ionic plugin add camera , package.json dosyası uygun şekilde düzenlenir.

Platformlar ve eklentiler, cordovaPlatforms ve cordovaPlugins özelliklerinde depolanır:

 "cordovaPlugins": [ "[email protected]", "[email protected]", "[email protected]" ], "cordovaPlatforms": [ "android", "ios" ]

Diğer geliştiricilerin, gerektiğinde ionic state restore çalıştırarak (ekleme, silme veya sürüm güncelleme) yeni bir kod çekerken senkronize olmaları artık çok kolay.

Yaygın Hata #3: Düşünme Performansı Kutudan Çıkıyor

Ionic, AngularJS'yi temel alır ve cihazdaki performans genellikle sorgulanır. Bu noktada sizi temin etmek isterim: Biraz AngularJS arka planı ile Ionic ile birinci sınıf uygulamalar oluşturabilirsiniz.

Mükemmel bir örnek, Ionic ile oluşturulmuş, 9 milyondan fazla kullanıcı tabanına, 7 milyondan fazla indirmeye ve Google Play'de ortalama 4,5 yıldıza sahip Sworkit uygulamasıdır.

AngularJS'den en iyi şekilde yararlanmak istiyorsanız, projenize başlamadan önce öğrenmeniz gereken birkaç şey var.

$izle

İzleyiciler, AngularJS'deki kapsam değişikliklerini dinlemeye alışkındır. Temel olarak dört tür $watch : $watch (normal) , $watch (deep) , $watchCollection ve $watchGroup .

Her biri farklıdır ve doğru olanı seçmek performans açısından büyük bir fark yaratabilir.

$izle (normal)

Normal $watch kullanmak yalnızca mevcut Nesne özelliklerini veya Dizi öğelerini kontrol eder. Bir Object özelliği eklemek veya bir Diziye yeni bir öğe göndermek gibi sığ değişiklikler dikkate alınmayacaktır.

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$izle (derin)

Derin $watch , İç İçe Nesne özellikleri gibi yüzeysel değişikliklerle ve derin değişikliklerle ilgilenir. Bu $watch ile herhangi bir modifikasyonu kaçırmadığınızdan emin olabilirsiniz. Ancak, derin $watch kullanmanın performans üzerinde etkileri vardır. Dikkatli kullanmanı tavsiye ederim.

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }, true);

$watchKoleksiyon

$watchCollection , normal $watch ve derin $watch arasında düşünülebilir. Ayrıca nesne referanslarını karşılaştırarak çalışır, ancak sığ olma avantajıyla, bir Object özelliği ekleyerek veya yeni bir öğeyi bir Diziye iterek nesnenizin özelliklerini izler.

 $scope.$watchCollection('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$watchGrubu

AngularJS 1.3'te tanıtılan $watchGroup , aynı anda birkaç ifadenin izlenmesine izin verir.

$watchGroup normal $watch ile karşılaştırıldığında uygulamanızın performansını iyileştirmese de, birkaç kapsam ifadesi izlerken daha sentetik olma avantajına sahiptir.

 $scope.$watchGroup([ 'watchExpression', 'watchExpression2', 'watchExpression3' ], function(newVals, oldVals) { if (newVals[0]) { // watchExpression has changed. } if (newVals[1]) { // watchExpression2 has changed. } if (newVals[2]) { // watchExpression3 has changed. } });

İzleme Ölçütü

track by , ng-repeat kullanılırken gereksiz DOM manipülasyonunu önlemek için kullanılır. Gerçekten de, özet döngüsü, koleksiyonunuzun en az bir öğesinin değiştiğini tespit ederse, ng-repeat tüm öğeleri yeniden oluşturacaktır. DOM manipülasyonunun her zaman uygulama performansı üzerinde etkileri vardır, bu nedenle ne kadar az şeye sahipseniz o kadar iyidir.

Koleksiyonun tamamını yeniden oluşturmaktan kaçınmak ve yalnızca güncellenmesi gereken öğeleri güncellemek için benzersiz bir tanımlayıcıyla track by kullanın.

 <!-- if items have a unique id --> <div ng-repeat="item in items track by item.id"></div> <!-- if not, you can use the $index that ng-repeat adds to every of its items --> <div ng-repeat="user in users track by $index"></div>

collection-repeat üzerinde track by kullanmaktan kaçının.

Tek Seferlik Bağlama

Tek seferlik bağlama veya :: Angular 1.3'te tanıtıldı ve uygulama performansınız üzerinde gerçek bir etkisi var.

Temel olarak, bir ifadede tek seferlik bağlama :: kullanmak, doldurulduğunda onu $watchers listesinden kaldırır. Bu, veriler değişse bile ifadenin güncellenemeyeceği anlamına gelir.

 <p>{{::user.firstName}}</p>

Tavsiyemiz, uygulamanızın tüm görüşlerini gözden geçirmek ve nelerin güncellenip güncellenemeyeceği hakkında düşünmek ve buna göre tek seferlik bağlama :: kullanmaktır. Sindirim döngüsü için büyük bir rahatlama olacaktır.

Ekranda görüntülenen öğelerin listesi kaydırmada değiştiğinden, maalesef tek seferlik bağlamanın bir collection-repeat kullanılamayacağını lütfen unutmayın.

AngularJS ve Ionic performans ipuçları ve püf noktaları hakkında daha fazla bilgi edinmek istiyorsanız Ultimate AngularJS ve Ionic performans hile sayfasını okumanızı tavsiye ederim.

Yaygın Hata #4: `View Cache` Karışıklık Olması

Tek sayfa uygulamaları varsayılan olarak sayfaları önbelleğe almaz. Sayfalar arasında ileri geri gezinirken kaydırmanın veya kullanıcı girişlerinin kaydedilmediği AngularJS uygulamalarını kullanırken muhtemelen bunu deneyimlemişsinizdir.

Ionic ile, varsayılan olarak on sayfa önbelleğe alınır ve bu, global olarak veya platform başına değiştirilebilir.

 // Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5);

Bu harika bir özellik, ancak bazen yeni başlayanlar için önbelleğe alınmış sayfalarla nasıl başa çıkacaklarını anlamak zor.

Sorun şu ki, kullanıcı önbelleğe alınmış bir sayfaya geri döndüğünde, AngularJS uygulamalarından farklı olarak denetleyici yeniden başlatılmıyor ve her şey o sayfadan hiç ayrılmamışsınız gibi.

Bu koşullarda sayfadaki verileri nasıl güncellemelisiniz?

Denetleyici Yaşam Döngüsü Olaylarına Giriş

AngularJS ile karşılaştırıldığında, Ionic birçok yaşam döngüsü olayı sunar:

 $scope.$on('$ionicView.loaded', function(){}); $scope.$on('$ionicView.unloaded', function(){}); $scope.$on('$ionicView.enter', function(){}); $scope.$on('$ionicView.leave', function(){}); $scope.$on('$ionicView.beforeEnter', function(){}); $scope.$on('$ionicView.beforeLeave', function(){}); $scope.$on('$ionicView.afterEnter', function(){}); $scope.$on('$ionicView.afterLeave', function(){});

Görünüm önbelleği üzerinde kontrol sahibi olmak istiyorsanız bu olaylar gereklidir.

$ionicView.loaded olayı, örneğin, bir görünüm ilk yüklendiğinde tetiklenir. Bu görünüm önbelleğe alınırken, kullanıcı geri dönse bile bu olay artık tetiklenmeyecek. Bu genellikle, AngularJS'deki $viewContentLoaded olayıyla yaptığınız gibi değişkenleri başlatmak için kullanacağınız olaydır.

Önbelleğe alınmış olsun ya da olmasın, bir görünüme her girdiğinizde veri almak istiyorsanız, $ionicView.enter olayını kullanabilirsiniz.

Doğru zamanda doğru olayı kullanarak uygulamanın kullanılabilirliğini artırabilirsiniz.

Performansla ilgili olarak, önbellek görünümünü kullanmak yalnızca DOM'nin boyutunu etkiler. Bir sayfa önbelleğe alındığında, tüm izleyicilerinin bağlantısı kesilir ve bu nedenle sayfa, sayfanızda yeniden kullanılmayı bekleyen birkaç DOM öğesinden ibarettir.

Harika bir kullanıcı deneyimi için DOM'nin boyutu önemlidir, ancak on sayfaya kadar önbelleğe almak iyi çalışıyor gibi görünüyor (tabii ki, sayfalarınıza ne yüklediğinize bağlı olarak).

Yaygın Hata #5: Android için Yaya Geçidi Hakkında Bilmemek

Her Android sürümü farklı bir WebView (uygulamanızı çalıştıran bir tarayıcı) çalıştırır. Cihazlar arasında performans farklıdır ve eski Android cihazlarda gerçekten kötü olabilir. Her Android cihazında akıcılık ve yanıt verme ile aynı deneyimi elde etmek için Crosswalk'ı yükleyebilirsiniz. Temel olarak en son Chromium tarayıcısını uygulamanıza yerleştirir ve hem ARM hem de X86 olmak üzere APK başına yaklaşık 20 Mb ekler.

Yaya geçidi basitçe Ionic CLI veya Cordova CLI kullanılarak kurulabilir:

 ionic plugin add cordova-plugin-crosswalk-webview

Yaygın Hata #6: Cordova Eklentilerini Tarayıcı İçinde Çalıştırmaya Çalışmak

Ionic kullanan geliştiricilerin çoğu, uygulamalarının iOS ve Android'de çalışmasını isteyecektir. ionic platform add ios android ve bazı eklentiler ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts ekleyin, onları tarayıcıda test edebileceğinizi düşünmek büyük bir hatadır. Yapabilirsin, ancak yalnızca uygun tarayıcı platformunu kurduktan sonra. Unutmayın, tüm eklentilerle çalışmaz.

Cordova'nın eklentileri, JavaScript aracılığıyla yerel cihaz API'si ile etkileşime girmek içindir. İletişim eklentisi veya cihaz yönlendirme eklentisi bu nedenle yalnızca bir cihazda çalışır.

Ancak, kodunuzu bir cihazda kolayca test edebilir ve bilgisayarınız üzerinden uzaktan hata ayıklayabilirsiniz.

Android'de Uzaktan Hata Ayıklama

Aygıtınızı takın ve adb devices çalıştırarak bilgisayarınız tarafından doğru şekilde algılandığından emin olun (Android SDK gereklidir).

ionic run android çalıştırarak uygulamanızı oluşturun ve cihazınıza yükleyin. Uygulamanız cihazda başlatıldığında, Chrome geliştirme araçları (bilgisayarınızda) aracılığıyla konsolu açın chrome://inspect/#devices ve cihazınızı inceleyin.

iOS'ta Uzaktan Hata Ayıklama

Cihazınızı prize takın ve bilgisayarınız tarafından doğru şekilde algılandığından emin olun. ionic run ios --device uygulamanızı oluşturun ve cihazınıza yükleyin.

Uygulamanız cihazda başlatıldığında, Develop > Your iPhone > Your app tıklayarak Safari geliştirme araçlarını (bilgisayarınızda) açın:

Tarayıcının İçinde Cordova Eklentilerini Çalıştırın

Cordova eklentilerini tarayıcı içinde çalıştırmak, bilmeniz gereken gelişmiş bir özelliktir. Ionic 1.2'den beri, tarayıcı resmi olarak destekleniyor, bu nedenle iOS ve Android platformlarının çok ötesinde platformlar arası uygulamalar çağını açıyor.

Cordova Tarayıcı platformu, Electron ve yalnızca Web teknolojileri (JavaScript, HTML ve CSS) ile artık tarayıcı ve masaüstü (Windows, Linux ve OSX) için Ionic uygulamaları oluşturabiliriz.

Github'da bir başlangıç seti mevcuttur.

Cordova Tarayıcı Platformu

Tarayıcı platformu ile tarayıcı için Cordova uygulamaları oluşturabilirsiniz. Bu, Cordova'nın eklentilerini tarayıcıda da kullanabileceğiniz anlamına gelir.

iOS veya Android platformlarını kurduğunuz şekilde kurulabilir:

 cordova platform add browser

Uygulamanızın kullanımdan önce tam olarak iOS veya Android'de olduğu gibi derlenmesi gerekir:

 cordova run browser

Bu komut, uygulamanızı derleyecek ve varsayılan tarayıcınızı açacaktır.

Çapraz Platform Eklentileri

Ağ, Kamera ve Facebook gibi birçok eklenti aynı anda iOS, Android ve Tarayıcı platformunu destekler - hepsi aynı API ile.

Cihazınızın ngCordova API kullanarak her platformda (iOS, Android, Tarayıcı ve Masaüstü) çevrimiçi mi yoksa çevrimdışı mı olduğunu bilmenin bir yolu olduğunu göstermek için:

 // listen for Online event $rootScope.$on('$cordovaNetwork:online', (event, connectionType) => { this.isOnline = true; }); // listen for Offline event $rootScope.$on('$cordovaNetwork:offline', (event, connectionType) => { this.isOnline = false; });

Bunu akılda tutarak, artık tek bir kod tabanı ile her yerde çalışabilen ürünler yaratmayı hayal edebilirsiniz.

Yaygın Hata #7: Büyük Ölçekli Uygulamalar için Başlangıç Seti Mimarisinin İzlenmesi

ionic start myapp komutunu kullanırken, aşağıdaki klasör yapısına sahip bir başlangıç projesi oluşturulur:

 www/ js/ app.js controllers/ aaa.js bbb.js ccc.js services/ xxx.js yyy.js zzz.js templates/ aaa.html bbb.html ccc.html

Buna JavaScript, CSS ve HTML dosyalarının türlere göre gruplandırıldığı Türe Göre Klasör yapısı denir. Yeni başlayanlar için kolay görünse de, bu tür bir mimari oldukça hızlı bir şekilde elden çıkıyor. Sadece ölçeklenmiyor.

Türe Göre Klasör yapısını kullanmamak için bazı nedenler şunlardır:

Klasörlerinizdeki dosya sayısı çok fazla olabilir.
Belirli bir özellik için değiştirmeniz gereken tüm dosyaları bulmak zor olabilir
Bir özellik üzerinde çalışmak birçok açık klasöre yol açacaktır.
İyi ölçeklenmiyor, uygulama büyüdükçe üzerinde çalışmak daha zor oluyor

JavaScript, CSS ve HTML dosyalarının özelliklere veya AngularJS modülüne göre gruplandığı bir Özelliğe Göre Klasör yapısı kullanmanızı öneririm:

 myNewFeature/ index.js (AngularJS module) config.js service.js controller.js index.html style.scss

Özelliğe Göre Klasör yapısını kullanma nedenleri:

Klasörlerinizdeki dosya sayısı birkaç ile sınırlıdır
Belirli bir özellik için değiştirmeniz gereken tüm dosyaları bulmak kolaydır - bunlar aynı klasördedir
Bir özellik üzerinde bağımsız olarak çalışabilirsiniz
Modülün neyi temsil ettiğini bilmek kolaydır - klasör adı yeterlidir
Yeni bir özellik oluşturmak kolay, sadece mevcut olanı kopyala/yapıştır
İyi ölçeklenir, ekibinizin üzerinde çalışmasını zorlaştırmadan istediğiniz kadar yeni özellik ekleyebilirsiniz.

Lütfen bu mimarinin, şimdi Angular2/Ionic2 uygulamalarında varsayılan olan Bileşenlere Göre Klasör yapısına yakın olduğunu unutmayın.

Yaygın Hata #8: Olayları `onscroll` bağlama ve `requestAnimationFrame`

Bu tek tuzak genellikle yeni başlayanların hatasıdır, ancak muhtemelen performans üzerinde en kötü etkiye sahip olabilir. Bunu düşün:

 <ion-content on-scroll="getScrollPosition()"> // … </ion-content>

 $scope.getScrollPosition = function () { // heavy processing, like manipulating DOM // or anything that triggers a $digest() // will be called every ~80ms, // and will impact UX }

Ionic, bu eylemler için kısma sağlıyor olsa da, yine de çok yavaş olabilir. Temel olarak, bir özet döngüsünü tetikleyen her şey ertelenmeli ve aynı zamanda kaydırmanın etkisi olan ağır boyama ile birlikte tetiklenmemelidir.

Geliştiricilerin kaydırma olaylarına ve özellikle animasyonlara bağlayarak ulaşmaya çalıştıkları hedeflerin çoğu, farklı bir yöntem kullanılarak da gerçekleştirilebilir. requestAnimationFrame .

 var myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame();

Yukarıdaki kod, kullanıcının öğenin üstünden geçip geçmediğini kontrol eden çok basit bir örnektir. Örneği kullanmayı düşünüyorsanız, tarayıcılar arası uyumluluk için satıcıya özel alternatifler eklemeyi unutmayın. Temelde tarayıcıya bağlı olarak en uygun hızda, 60 FPS'de veya ekranın yenileme hızında çalışacaktır. Ancak optimize edilmiştir ve yüksek performanslı animasyon çerçeveleri bu basit yöntemi kullanır.

Ayrıca, bir HTML düğümünün boyutu ve konumu hakkında bilgi sağlayan element.getBoundingClientRect() da bakmak isteyebilirsiniz.

Yaygın Hata #9: İyonik Uygulamaları Manuel Olarak Prototipleme

Ionic'in kendine has bir tasarımı, neredeyse görsel bir dili var. Özellikle prototipler ve erken aşamadaki ürünlerle, mevcut bileşenler ve stiller kullanılarak çok fazla zaman ve masraftan tasarruf edilebilir. Aslında oldukça minimaldirler ve iyi bir estetiğe sahiptirler.

Temel işlevselliğe sahip tel çerçeveler ve maketler sunmak bir endüstri standardı haline geldi. Bir mobil cihazda bir resmi görmek ve dinamik bileşenlere sahip gerçek bir uygulamayı görmek çok farklı iki fincan çaydır. Birçok tasarımcı ve ayrıca UX geliştiricileri, minimum işlevsellik ile hızlı bir şekilde tel çerçeveler oluşturmaya izin veren Axure veya Balsamiq gibi araçlar kullanır.

Şimdi, Ionic'in yaratıcıları, yalnızca Ionic geliştiricileri için yapılmış benzer bir araç yayınladı. İyonik Yaratıcı denir. Sürükle ve bırak web arayüzüne sahiptir ve Core Ionic'in sağladığı her şeye yakın desteği destekler. Bunun harika yanı, prototipi standart çalışan İyonik kodla çeşitli biçimlerde dışa aktarmaya ve hatta uygulamayı oluşturmaya ve paylaşmaya izin vermesidir. Araç tescillidir, ancak seçeneklerin çoğu ücretsizdir.

Çözüm

Ionic, hibrit uygulama endüstrisinde kimsenin hayal bile edemeyeceği bir şekilde devrim yarattı. Bununla birlikte, zamanla en iyi uygulamalar ve araçlar evrimden yoksun kaldı. Sonuç olarak, geliştiricilerin yapabileceği olası hataların sayısı arttı.

Uzman İyonik geliştiriciler, Birinci Sınıf uygulamaları aynı anda birden fazla platforma sunmanın net bir yoluna sahiptir. Bunun yolu, mevcut araçlardan yararlanmak, performansı birinci öncelik olarak tutmak ve en iyi uygulamaları takip etmektir.

Bu gönderi, muhteşem Ionic topluluğu, Michal Mikolajczyk, Mike Hartington (Ionic Core ekibi) ve Katie Ginder-Vogel'in (Pazarlama ve İletişim Müdürü, Ionic) yaratıcılığı olmasaydı mümkün olmazdı. Hepinize çok teşekkürler.