9 Kesalahan Paling Umum yang Dilakukan Pengembang Ionic

Diterbitkan: 2022-03-11

pengantar

Ionic telah ada selama dua tahun sekarang. Ini adalah seperangkat alat yang hebat untuk mengembangkan aplikasi hybrid berdasarkan AngularJS. Ionic sangat populer saat ini, dengan lebih dari satu juta aplikasi dibangun dan komunitas ribuan pengembang yang terus berkembang.

Sejak rilis pertama Ionic, waktu telah berlalu, dan teknologi web serta praktik terbaik telah berkembang dalam banyak hal. Oleh karena itu, sulit untuk menentukan jalur mana yang harus diikuti saat memulai proyek baru. Dalam kondisi ini, pengembang dapat membuat kesalahan yang berpotensi berdampak pada kualitas aplikasi mereka atau produktivitas tim mereka.

Dengan membaca Kesalahan umum berikut, Anda akan memiliki kunci untuk menghindari masalah mendasar dan untuk membuat aplikasi yang berkinerja dan skalabel dengan Ionic.

Kesalahan Umum #1: Lupa Mengaktifkan Pengguliran Asli

Pengguliran Asli memungkinkan Ionic untuk mendengarkan acara pengguliran pada tampilan web yang didukung. Itu membuat Pull to Refresh , List Reordering , dan Infinite Scroll dimungkinkan tanpa pengguliran JavaScript, yang dibuat pada saat browser tidak memiliki acara gulir yang tepat.

Pengguliran Asli diaktifkan secara default di Android sejak Ionic 1.2 (Desember 2015). Ini adalah peningkatan kinerja dan pengalaman pengguna yang luar biasa, karena memastikan pengguliran yang mulus karena peristiwa asinkron.

Sayangnya, karena kurangnya acara yang tepat di iOS, pengguliran asli belum diaktifkan untuk platform itu.

Jika Anda menggunakan versi sebelum 1.2, Anda dapat mengaktifkan Native Scrolling untuk Android menggunakan $ionicConfigProvider :

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

Anda juga dapat mengaktifkan atau menonaktifkan Pengguliran Asli di halaman mana pun menggunakan direktif overflow-scroll pada ion-content apa pun :

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

Harap perhatikan bahwa sayangnya collection-repeat, yang memungkinkan aplikasi Anda menampilkan daftar item yang sangat banyak, tidak dapat dicakup oleh pengguliran asli.

Kesalahan Umum #2: Tidak Menggunakan Ionic CLI untuk Menginstal Platform dan Plugin

Ionic CLI menambahkan fitur ke Cordova CLI. Kegigihan platform dan plugin adalah fitur hebat yang ditambahkan Ionic CLI.

Masalah dengan Cordova CLI adalah bahwa platform dan plugin yang Anda instal hanya diinstal pada mesin Anda. Saat bekerja dalam tim, untuk menghindari bug, Anda ingin berbagi lingkungan, platform, dan plugin yang sama. Dengan Cordova CLI, lebih sulit untuk menjaga agar proyek tetap sinkron di antara mesin pengembang. Ya, Anda dapat mengkomit folder platform dan plugin, tetapi tidak disarankan.

Saat menggunakan Ionic CLI untuk menginstal platform ionic platform add ios dan plugins ionic plugin add camera , file package.json diedit dengan tepat.

Platform dan plugin disimpan di properti cordovaPlatforms dan cordovaPlugins :

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

Sekarang mudah bagi pengembang lain untuk menyinkronkan saat menarik kode baru, cukup dengan menjalankan ionic state restore bila diperlukan (penambahan, penghapusan, atau pembaruan versi).

Kesalahan Umum #3: Performa Berpikir Keluar dari Kotak

Ionic didasarkan pada AngularJS, dan kinerja pada perangkat sering dipertanyakan. Saya ingin meyakinkan Anda tentang hal ini: dengan sedikit latar belakang AngularJS, Anda dapat membuat aplikasi kelas dunia dengan Ionic.

Contoh sempurna adalah aplikasi Sworkit yang dibuat dengan Ionic, memiliki basis pengguna 9 juta+, unduhan 7 juta+, dan rata-rata 4,5 bintang di Google Play.

Jika Anda ingin mendapatkan yang terbaik dari AngularJS, berikut adalah beberapa hal yang harus Anda pelajari sebelum memulai proyek Anda.

$menonton

Pengamat terbiasa mendengarkan perubahan ruang lingkup di AngularJS. Pada dasarnya ada empat jenis $watch : $watch (normal) , $watch (deep) , $watchCollection dan $watchGroup .

Masing-masing dari mereka berbeda, dan memilih yang tepat dapat membuat perbedaan besar dalam hal kinerja.

$watch (biasa)

Menggunakan $watch normal hanya akan memeriksa properti Objek atau item Array yang ada. Perubahan dangkal, seperti menambahkan properti Object atau mendorong item baru ke dalam Array, tidak akan diurus.

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

$watch (dalam)

$watch yang dalam menangani perubahan yang dangkal dan perubahan yang dalam, seperti properti Objek Bersarang. Dengan $watch ini Anda pasti tidak akan melewatkan modifikasi apa pun. Namun, menggunakan $watch yang dalam memiliki implikasi kinerja. Saya akan menyarankan untuk menggunakannya dengan hati-hati.

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

$watchKoleksi

$watchCollection dapat dipertimbangkan di antara $watch normal dan $watch dalam. Ini juga berfungsi membandingkan referensi objek, tetapi dengan keuntungan untuk juga mengawasi properti objek Anda dengan menambahkan properti Objek atau mendorong item baru ke dalam Array.

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

$watchGroup

Diperkenalkan di AngularJS 1.3, $watchGroup memungkinkan menonton beberapa ekspresi sekaligus.

Meskipun $watchGroup mungkin tidak meningkatkan kinerja aplikasi Anda dibandingkan dengan $watch , ia memiliki keuntungan untuk menjadi lebih sintetik saat menonton beberapa ekspresi lingkup.

 $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. } });

Lacak Oleh

track by digunakan untuk menghindari manipulasi DOM yang tidak berguna saat menggunakan ng-repeat . Memang, jika siklus intisari menemukan bahwa setidaknya satu elemen dari koleksi Anda telah berubah, ng-repeat akan merender ulang semua elemen. Manipulasi DOM selalu berdampak pada kinerja aplikasi, jadi semakin sedikit semakin baik.

Untuk menghindari rendering ulang koleksi lengkap dan hanya memperbarui elemen yang perlu diperbarui, gunakan track by dengan pengenal unik.

 <!-- 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>

Hindari menggunakan track by di collection-repeat .

Pengikatan Sekali Pakai

Pengikatan satu kali, atau :: diperkenalkan di Angular 1.3, dan memiliki dampak nyata pada kinerja aplikasi Anda.

Pada dasarnya, menggunakan pengikatan satu kali :: pada ekspresi akan menghapusnya dari daftar $watchers saat diisi. Ini berarti bahwa ekspresi tidak akan dapat diperbarui meskipun data berubah.

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

Saran kami adalah memeriksa semua tampilan aplikasi Anda dan memikirkan apa yang dapat atau tidak dapat diperbarui, dan gunakan pengikatan satu kali :: yang sesuai. Ini akan sangat melegakan untuk siklus digest.

Harap dicatat bahwa sayangnya pengikatan satu kali tidak dapat digunakan dalam collection-repeat , karena daftar item yang ditampilkan di layar berubah pada scroll.

Jika Anda ingin tahu lebih banyak tentang tip dan trik kinerja AngularJS dan Ionic, saya sarankan membaca lembar contekan kinerja Ultimate AngularJS dan Ionic.

Kesalahan Umum #4: Memiliki Kebingungan dengan Logika View Cache

Aplikasi satu halaman tidak menyimpan halaman secara default. Anda mungkin pernah mengalaminya menggunakan aplikasi AngularJS, di mana gulir atau input pengguna tidak disimpan saat Anda menavigasi bolak-balik antar halaman.

Dengan Ionic, sepuluh halaman di-cache secara default, dan ini dapat diubah secara global atau per platform.

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

Ini adalah fitur yang hebat, tetapi terkadang sulit bagi pemula untuk memahami cara menangani halaman yang di-cache.

Masalahnya adalah ketika pengguna kembali ke halaman yang di-cache, pengontrol tidak dibuat ulang lagi, yang berbeda dari aplikasi AngularJS, dan semuanya seperti Anda tidak pernah meninggalkan halaman itu.

Dalam kondisi seperti ini, bagaimana Anda harus memperbarui data pada halaman?

Memperkenalkan Peristiwa Siklus Hidup Pengontrol

Dibandingkan dengan AngularJS, Ionic menawarkan banyak peristiwa siklus hidup:

 $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(){});

Peristiwa ini diperlukan jika Anda ingin memiliki kontrol atas cache tampilan.

Acara $ionicView.loaded , misalnya, dipicu saat pertama kali tampilan dimuat. Peristiwa ini tidak akan dipicu lagi saat tampilan ini di-cache, bahkan jika pengguna kembali ke sana. Ini biasanya acara yang akan Anda gunakan untuk memulai variabel dengan cara yang sama seperti yang Anda lakukan dengan acara $viewContentLoaded di AngularJS.

Jika Anda ingin mengambil data setiap kali Anda memasukkan tampilan, di-cache atau tidak, Anda dapat menggunakan acara $ionicView.enter .

Dengan menggunakan acara yang tepat pada waktu yang tepat, Anda dapat meningkatkan kegunaan aplikasi.

Mengenai kinerja, menggunakan tampilan cache hanya memengaruhi ukuran DOM. Ketika sebuah halaman di-cache, semua pengamatnya terputus dan oleh karena itu halaman tersebut hanyalah beberapa elemen DOM lagi yang tergeletak di halaman Anda yang menunggu untuk digunakan kembali.

Ukuran DOM penting untuk memiliki pengalaman pengguna yang luar biasa, tetapi menyimpan hingga sepuluh halaman tampaknya berfungsi dengan baik (tentu saja, tergantung pada apa yang Anda muat di halaman Anda).

Kesalahan Umum #5: Tidak Mengetahui Tentang Crosswalk untuk Android

Setiap versi Android menjalankan WebView yang berbeda (browser yang menjalankan aplikasi Anda). Performanya berbeda di setiap perangkat, dan itu bisa sangat buruk di perangkat Android lama. Untuk mendapatkan pengalaman fluiditas dan responsif yang sama di setiap perangkat Android, Anda dapat menginstal Crosswalk. Ini pada dasarnya menyematkan browser Chromium terbaru ke dalam aplikasi Anda, dan menambahkan sekitar 20Mb per APK, baik ARM maupun X86.

Crosswalk dapat diinstal hanya menggunakan Ionic CLI atau Cordova CLI:

 ionic plugin add cordova-plugin-crosswalk-webview

Kesalahan Umum #6: Mencoba Menjalankan Plugin Cordova Di Dalam Peramban

Mayoritas pengembang yang menggunakan Ionic ingin aplikasi mereka berjalan di iOS dan Android. Setelah menambahkan platform ionic platform add ios android dan beberapa plugins ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , kesalahan awal adalah berpikir Anda dapat mengujinya di browser. Ya, Anda bisa, tetapi hanya setelah Anda menginstal platform browser yang tepat. Perlu diingat, ini tidak berfungsi dengan semua plugin.

Plugin Cordova dimaksudkan untuk berinteraksi dengan API perangkat asli melalui JavaScript. Oleh karena itu, plugin kontak atau plugin orientasi perangkat hanya akan berfungsi pada perangkat.

Namun, Anda dapat dengan mudah menguji kode Anda di perangkat dan melakukan debug dari jarak jauh melalui komputer Anda.

Debug Jarak Jauh di Android

Pasang perangkat Anda dan pastikan itu terdeteksi dengan benar oleh komputer Anda dengan menjalankan adb devices (Android SDK diperlukan).

Bangun aplikasi Anda dan instal di perangkat Anda dengan menjalankan ionic run android . Setelah aplikasi Anda diluncurkan di perangkat, buka konsol melalui alat pengembang Chrome (di komputer Anda) chrome://inspect/#devices , dan periksa perangkat Anda.

Gambar: Alat Pengembang Chrome

Debug Jarak Jauh di iOS

Colokkan perangkat Anda dan pastikan itu terdeteksi dengan benar oleh komputer Anda. Bangun aplikasi Anda dan instal di perangkat Anda dengan menjalankan ionic run ios --device .

Setelah aplikasi Anda diluncurkan di perangkat, buka alat pengembang Safari (di komputer Anda) dengan mengklik Develop > Your iPhone > Your app :

Gambar: Alat Pengembang Safari

Jalankan Plugin Cordova Di Dalam Browser

Menjalankan plugin Cordova di dalam browser adalah fitur lanjutan yang harus Anda ketahui. Sejak Ionic 1.2, browser secara resmi didukung, sehingga membuka era aplikasi lintas platform jauh melampaui platform iOS dan Android.

Dengan platform Browser Cordova, Electron dan hanya teknologi Web (JavaScript, HTML, dan CSS) sekarang kita dapat membangun aplikasi Ionic untuk browser dan desktop (Windows, Linux, dan OSX).

Kit starter tersedia di Github.

Platform Peramban Cordova

Dengan platform Browser, Anda dapat membuat aplikasi Cordova untuk browser. Ini berarti Anda juga dapat menggunakan plugin Cordova di browser.

Itu dapat diinstal dengan cara yang sama seperti Anda menginstal platform iOS atau Android:

 cordova platform add browser

Aplikasi Anda perlu dikompilasi sebelum digunakan persis seperti dengan iOS atau Android:

 cordova run browser

Perintah ini akan mengkompilasi aplikasi Anda dan membuka browser default Anda.

Plugin Lintas Platform

Banyak plugin seperti Jaringan, Kamera, dan Facebook mendukung iOS, Android, dan platform Peramban secara bersamaan - semuanya dengan API yang sama.

Untuk mengilustrasikan bahwa ada cara untuk mengetahui apakah perangkat Anda online atau offline di setiap platform (iOS, Android, Browser, dan Desktop) menggunakan ngCordova API:

 // 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; });

Dengan pemikiran ini, Anda sekarang dapat membayangkan membuat produk yang dapat berjalan di mana saja dengan satu basis kode tunggal.

Kesalahan Umum #7: Mengikuti Arsitektur Starter Kit untuk Aplikasi Skala Besar

Saat menggunakan perintah ionic start myapp , proyek starter dibuat dengan struktur folder berikut:

 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

Ini disebut struktur Folder-by-Type, di mana file JavaScript, CSS, dan HTML dikelompokkan berdasarkan jenisnya. Karena kelihatannya mudah bagi pemula, arsitektur semacam ini cepat sekali lepas kendali. Ini hanya tidak skala.

Berikut adalah beberapa alasan untuk tidak menggunakan struktur Folder-by-Type:

  • Jumlah file di folder Anda bisa menjadi sangat banyak
  • Menemukan semua file yang perlu Anda modifikasi untuk fitur tertentu bisa jadi rumit
  • Bekerja pada fitur akan menyebabkan banyak folder terbuka
  • Tidak berskala dengan baik, semakin banyak aplikasi berkembang semakin sulit mengerjakannya

Saya lebih merekomendasikan menggunakan struktur Folders-by-Feature, di mana file JavaScript, CSS, dan HTML dikelompokkan berdasarkan fitur atau modul AngularJS:

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

Alasan untuk menggunakan struktur Folder-by-Feature:

  • Jumlah file dalam folder Anda terbatas hanya beberapa
  • Menemukan semua file yang perlu Anda modifikasi untuk fitur tertentu itu mudah - semuanya ada di folder yang sama
  • Anda dapat bekerja secara mandiri pada fitur
  • Mengetahui apa yang diwakili modul itu mudah - nama folder sudah cukup
  • Mudah untuk membuat fitur baru, cukup salin/tempel yang sudah ada
  • Timbangan dengan baik, Anda dapat menambahkan fitur baru sebanyak yang Anda inginkan tanpa menyulitkan tim Anda untuk mengerjakannya

Harap dicatat bahwa arsitektur ini dekat dengan struktur Folders-by-Component yang sekarang menjadi default di aplikasi Angular2/Ionic2.

Animasi Flipbook Ionic

Kesalahan Umum #8: Mengikat Acara untuk onscroll , dan Melupakan requestAnimationFrame

Jebakan tunggal ini biasanya merupakan kesalahan pemula, tetapi mungkin memiliki dampak terburuk pada kinerja. Pertimbangkan ini:

 <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 }

Meskipun Ionic memberikan pelambatan untuk tindakan ini, itu masih bisa sangat lambat. Pada dasarnya, apa pun yang memicu loop intisari harus ditunda dan tidak dipicu bersamaan dengan lukisan berat, yang juga merupakan efek pengguliran.

Banyak tujuan yang coba dicapai oleh pengembang dengan mengikat acara gulir, dan terutama animasi, juga dapat dicapai dengan menggunakan metode yang berbeda. Lihatlah requestAnimationFrame .

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

Kode di atas adalah contoh yang sangat sederhana, memeriksa apakah pengguna menggulir melewati bagian atas elemen. Ingatlah untuk menambahkan alternatif khusus vendor untuk kompatibilitas lintas-browser jika Anda ingin menggunakan contoh tersebut. Ini pada dasarnya akan berjalan pada kecepatan optimal, tergantung pada browser, pada 60 FPS atau pada kecepatan refresh layar. Tapi itu dioptimalkan, dan kerangka kerja animasi berkinerja tinggi menggunakan metode sederhana itu.

Anda mungkin juga ingin melihat ke element.getBoundingClientRect() , yang menyediakan informasi tentang ukuran dan posisi simpul HTML.

Kesalahan Umum #9: Membuat Prototipe Aplikasi Ionik Secara Manual

Ionic memiliki desain khusus, hampir seperti bahasa visual. Terutama dengan prototipe dan produk tahap awal, banyak waktu dan biaya dapat dihemat dengan memanfaatkan komponen dan gaya yang tersedia. Mereka sebenarnya agak minimal dan memiliki estetika yang baik.

Menyajikan gambar rangka dan maket dengan fungsionalitas dasar telah menjadi standar industri. Untuk melihat gambar dan melihat aplikasi sebenarnya dengan komponen dinamis pada perangkat seluler adalah dua cangkir teh yang sangat berbeda. Banyak desainer, dan juga pengembang UX, menggunakan alat seperti Axure atau Balsamiq, yang memungkinkan pembuatan gambar rangka dengan cepat dengan fungsionalitas minimal.

Sekarang, pencipta Ionic merilis alat serupa yang dibuat khusus untuk pengembang Ionic. Itu disebut Pencipta Ionik. Ini memiliki antarmuka web seret dan lepas, dan mendukung hampir semua yang disediakan oleh inti Ionic. Apa yang hebat tentang itu adalah memungkinkan untuk mengekspor prototipe ke dalam beberapa format, dengan kode Ionic yang berfungsi standar, dan bahkan membangun aplikasi dan membagikannya. Alat ini berpemilik, tetapi banyak opsi bebas digunakan.

Gambar: Pencipta Ionik

Kesimpulan

Ionic merevolusi industri aplikasi hybrid dengan cara yang tak seorang pun bisa bayangkan. Namun, seiring waktu, praktik dan alat terbaik tidak memiliki evolusi. Akibatnya, jumlah kesalahan potensial yang dapat dilakukan pengembang meningkat.

Pengembang Expert Ionic memiliki cara yang jelas untuk menghadirkan aplikasi Kelas Dunia ke berbagai platform secara bersamaan. Caranya adalah dengan memanfaatkan alat yang tersedia, menjaga kinerja sebagai prioritas utama, dan mengikuti praktik terbaik.

Posting ini tidak akan mungkin terjadi tanpa kreativitas komunitas Ionic yang luar biasa, Michal Mikolajczyk, Mike Hartington (tim Ionic Core) dan Katie Ginder-Vogel (Manajer Pemasaran & Komunikasi, Ionic). Terima kasih banyak.