9 najczęstszych błędów popełnianych przez programistów Ionic

Wstęp

Ionic istnieje już od dwóch lat. Jest to świetny zestaw narzędzi do tworzenia aplikacji hybrydowych opartych o AngularJS. Ionic jest obecnie niezwykle popularny, z ponad milionem zbudowanych aplikacji i rosnącą społecznością tysięcy programistów.

Od pierwszego wydania Ionic minął czas, a technologie internetowe i najlepsze praktyki ewoluowały na wiele sposobów. Dlatego trudno jest określić, jaką ścieżką podążać rozpoczynając nowy projekt. W takich warunkach programiści mogą popełniać błędy potencjalnie wpływające na jakość ich aplikacji lub produktywność ich zespołu.

Czytając poniższe Typowe błędy, będziesz miał klucz do uniknięcia podstawowych problemów i tworzenia wydajnych i skalowalnych aplikacji za pomocą Ionic.

Częsty błąd nr 1: Zapominanie o włączeniu przewijania natywnego

Natywne przewijanie pozwala Ionic na nasłuchiwanie zdarzeń przewijania w obsługiwanych widokach internetowych. Umożliwia ona Pull to Refresh , List Reordering i Infinite Scroll bez przewijania JavaScript, co powstało w czasach, gdy w przeglądarkach brakowało odpowiednich zdarzeń przewijania.

Natywne przewijanie jest domyślnie włączone w systemie Android od Ionic 1.2 (grudzień 2015). Jest to ogromna poprawa wydajności i komfortu użytkownika, ponieważ zapewnia płynne przewijanie dzięki zdarzeniom asynchronicznym.

Niestety ze względu na brak odpowiednich zdarzeń na iOS natywne przewijanie nie jest jeszcze włączone dla tej platformy.

Jeśli używasz wersji wcześniejszej niż 1.2, możesz włączyć przewijanie natywne dla systemu Android za pomocą $ionicConfigProvider :

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

Możesz także włączyć lub wyłączyć przewijanie natywne na dowolnej stronie za pomocą dyrektywy overflow-scroll na dowolnej ion-content :

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

Pamiętaj, że niestety powtarzanie kolekcji, które pozwala Twojej aplikacji wyświetlać ogromne listy elementów, nie może być objęte przewijaniem natywnym.

Powszechny błąd nr 2: nieużywanie Ionic CLI do instalacji platform i wtyczek

Ionic CLI dodaje funkcje do Cordova CLI. Trwałość platform i wtyczek to świetna funkcja, którą dodaje Ionic CLI.

Problem z Cordova CLI polega na tym, że instalowane platformy i wtyczki są instalowane tylko na twoim komputerze. Pracując w zespole, aby uniknąć błędów, które chcesz dzielić z tym samym środowiskiem, platformami i wtyczkami. Dzięki Cordova CLI trudniej jest zsynchronizować projekt między komputerami programistów. Tak, możesz zatwierdzić foldery platform i wtyczek, ale nie jest to zalecane.

Podczas używania Ionic CLI do instalacji platform ionic platform add ios i plugins ionic plugin add camera , plik package.json jest odpowiednio edytowany.

Platformy i wtyczki są przechowywane we właściwościach cordovaPlatforms i cordovaPlugins :

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

Teraz inni programiści mogą łatwo zsynchronizować się podczas pobierania nowego kodu, po prostu uruchamiając ionic state restore gdy jest to konieczne (dodawanie, usuwanie lub aktualizacja wersji).

Powszechny błąd nr 3: myślenie o wydajności wychodzi z pudełka

Ionic bazuje na AngularJS, a wydajność na urządzeniu jest często kwestionowana. Chciałbym cię uspokoić w tej kwestii: mając trochę doświadczenia z AngularJS, możesz tworzyć światowej klasy aplikacje z Ionic.

Doskonałym przykładem jest aplikacja Sworkit, która jest zbudowana na Ionic, ma ponad 9 milionów użytkowników, ponad 7 milionów pobrań i średnio 4,5 gwiazdki w Google Play.

Jeśli chcesz jak najlepiej wykorzystać AngularJS, oto kilka rzeczy, których powinieneś się nauczyć przed rozpoczęciem projektu.

$oglądaj

Obserwatorzy są przyzwyczajeni do nasłuchiwania zmian zakresu w AngularJS. Istnieją zasadniczo cztery typy $watch : $watch (normal) , $watch (deep) , $watchCollection i $watchGroup .

Każdy z nich jest inny, a wybór właściwego może mieć ogromne znaczenie pod względem wydajności.

$zegarek (normalny)

Użycie normalnego $watch sprawdzi tylko istniejące właściwości obiektu lub elementy tablicy. Płytkie zmiany, takie jak dodanie właściwości Object lub umieszczenie nowego elementu w tablicy, nie zostaną uwzględnione.

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

$oglądaj (głęboki)

Głęboki $watch dba o płytkie i głębokie zmiany, takie jak właściwości zagnieżdżonych obiektów. Z tym $watch na pewno nie przegapisz żadnej modyfikacji. Jednak korzystanie z głębokiego $watch ma wpływ na wydajność. Radziłbym używać go ostrożnie.

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

$watch Collection

$watchCollection można rozpatrywać pomiędzy zwykłym $watch a głębokim $watch . Działa również porównując odwołania do obiektów, ale ma tę zaletę, że płytko obserwuje właściwości obiektu, dodając właściwość Object lub umieszczając nowy element w tablicy.

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

$watchGroup

Wprowadzony w AngularJS 1.3, $watchGroup umożliwia oglądanie kilku wyrażeń jednocześnie.

Chociaż $watchGroup może nie poprawić wydajności aplikacji w porównaniu do normalnego $watch , ma tę zaletę, że jest bardziej syntetyczny podczas oglądania kilku wyrażeń zakresu.

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

Śledź według

track by służy do unikania bezużytecznych manipulacji DOM podczas korzystania z ng-repeat . Rzeczywiście, jeśli cykl skrótu wykryje, że co najmniej jeden element Twojej kolekcji uległ zmianie, ng-repeat ponownie wyrenderuje wszystkie elementy. Manipulacja DOM zawsze ma wpływ na wydajność aplikacji, więc im mniej masz, tym lepiej.

Aby uniknąć ponownego renderowania całej kolekcji i aktualizować tylko te elementy, które wymagają aktualizacji, użyj track by z unikalnym identyfikatorem.

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

Po prostu unikaj korzystania z funkcji track by przy collection-repeat .

Jednorazowe wiązanie

Jednorazowe wiązanie lub :: zostało wprowadzone w Angularze 1.3 i ma realny wpływ na wydajność aplikacji.

Zasadniczo, użycie jednorazowego wiązania :: na wyrażeniu spowoduje usunięcie go z listy $watchers po wypełnieniu. Oznacza to, że wyrażenie nie będzie mogło zostać zaktualizowane, nawet jeśli dane ulegną zmianie.

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

Naszą radą jest przejrzenie wszystkich widoków Twojej aplikacji i zastanowienie się, co może lub nie może zostać zaktualizowane, a następnie odpowiednio użyj jednorazowych wiązań :: . Będzie to ogromna ulga dla cyklu trawienia.

Należy pamiętać, że niestety jednorazowe wiązanie nie może być użyte w collection-repeat , ponieważ lista przedmiotów wyświetlana na ekranie zmienia się na zwoju.

Jeśli chcesz dowiedzieć się więcej o poradach i trikach dotyczących wydajności AngularJS i Ionic, polecam przeczytanie ściągawki do wydajności Ultimate AngularJS i Ionic.

Częsty błąd nr 4: pomyłki z logiką View Cache

Aplikacje jednostronicowe domyślnie nie buforują stron. Prawdopodobnie doświadczyłeś tego podczas korzystania z aplikacji AngularJS, w których przewijanie lub dane wejściowe użytkownika nie są zapisywane podczas nawigowania tam iz powrotem między stronami.

W Ionic domyślnie buforowanych jest dziesięć stron, co można zmienić globalnie lub na platformę.

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

To świetna funkcja, ale czasami początkującym trudno jest zrozumieć, jak radzić sobie ze stronami w pamięci podręcznej.

Problem polega na tym, że gdy użytkownik wraca do strony z pamięci podręcznej, kontroler nie jest ponownie uruchamiany, co różni się od aplikacji AngularJS, i wszystko jest tak, jakbyś nigdy nie opuszczał tej strony.

W tych warunkach, jak należy zaktualizować dane na stronie?

Przedstawiamy zdarzenia cyklu życia kontrolera

W porównaniu do AngularJS, Ionic oferuje wiele zdarzeń cyklu życia:

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

Te zdarzenia są niezbędne, jeśli chcesz mieć kontrolę nad pamięcią podręczną widoku.

Na przykład zdarzenie $ionicView.loaded jest wyzwalane przy pierwszym załadowaniu widoku. To zdarzenie nie będzie już wywoływane, gdy ten widok jest przechowywany w pamięci podręcznej, nawet jeśli użytkownik do niego wróci. Zwykle jest to zdarzenie, którego użyjesz do zainicjowania zmiennych w taki sam sposób, jak w przypadku zdarzenia $viewContentLoaded w AngularJS.

Jeśli chcesz pobierać dane za każdym razem, gdy wprowadzasz widok, buforowany lub nie, możesz użyć zdarzenia $ionicView.enter .

Korzystając z odpowiedniego zdarzenia we właściwym czasie, możesz poprawić użyteczność aplikacji.

Jeśli chodzi o wydajność, użycie widoku pamięci podręcznej wpływa tylko na rozmiar DOM. Gdy strona jest buforowana, wszyscy jej obserwatorzy są odłączani, a zatem strona jest tylko kilkoma elementami DOM leżącymi na twojej stronie, czekającymi na ponowne użycie.

Rozmiar DOM ma znaczenie, aby zapewnić użytkownikom doskonałe wrażenia, ale buforowanie do dziesięciu stron wydaje się działać dobrze (oczywiście w zależności od tego, co ładujesz na swoich stronach).

Powszechny błąd nr 5: brak wiedzy o przejściu dla pieszych na Androida

Każda wersja Androida uruchamia inny WebView (przeglądarka, w której działa Twoja aplikacja). Wydajność różni się na różnych urządzeniach i może być naprawdę zła na starych urządzeniach z Androidem. Aby uzyskać takie same wrażenia z płynnością i responsywnością na każdym urządzeniu z Androidem, możesz zainstalować Crosswalk. Zasadniczo osadza najnowszą przeglądarkę Chromium w twojej aplikacji i dodaje około 20 Mb na APK, zarówno ARM, jak i X86.

Crosswalk można zainstalować po prostu za pomocą Ionic CLI lub Cordova CLI:

 ionic plugin add cordova-plugin-crosswalk-webview

Powszechny błąd nr 6: próba uruchomienia wtyczek Cordova w przeglądarce

Większość programistów korzystających z Ionic będzie chciała, aby ich aplikacja działała na iOS i Androidzie. Po dodaniu platform platforma ionic platform add ios android i kilka wtyczek ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , żółtodziobem jest myślenie, że możesz je przetestować w przeglądarce. Cóż, możesz, ale dopiero po zainstalowaniu odpowiedniej platformy przeglądarki. Pamiętaj, że nie działa ze wszystkimi wtyczkami.

Wtyczki Cordova mają na celu interakcję z natywnym interfejsem API urządzenia za pośrednictwem JavaScript. Wtyczka kontaktu lub wtyczka orientacji urządzenia będą zatem działać tylko na urządzeniu.

Możesz jednak łatwo przetestować swój kod na urządzeniu i zdalnie go debugować za pomocą komputera.

Zdalne debugowanie na Androida

Podłącz swoje urządzenie i upewnij się, że jest ono poprawnie wykrywane przez komputer, uruchamiając adb devices (wymagany Android SDK).

Zbuduj swoją aplikację i zainstaluj ją na swoim urządzeniu, uruchamiając ionic run android . Po uruchomieniu aplikacji na urządzeniu otwórz konsolę za pomocą narzędzi programistycznych Chrome (na komputerze) chrome://inspect/#devices i sprawdź swoje urządzenie.

Zdalne debugowanie na iOS

Podłącz urządzenie i upewnij się, że zostało poprawnie wykryte przez komputer. Zbuduj swoją aplikację i zainstaluj ją na swoim urządzeniu, uruchamiając ionic run ios --device .

Po uruchomieniu aplikacji na urządzeniu otwórz narzędzia programistyczne Safari (na komputerze), klikając Develop > Your iPhone > Your app :

Uruchom wtyczki Cordova w przeglądarce

Uruchamianie wtyczek Cordova w przeglądarce to zaawansowana funkcja, o której powinieneś wiedzieć. Od Ionic 1.2 przeglądarka jest oficjalnie wspierana, więc otwiera erę aplikacji międzyplatformowych daleko poza platformami iOS i Android.

Dzięki platformie Cordova Browser, Electron i tylko technologiom internetowym (JavaScript, HTML i CSS) możemy teraz budować aplikacje Ionic dla przeglądarki i pulpitu (Windows, Linux i OSX).

Zestaw startowy jest dostępny na Github.

Platforma przeglądarki Cordova

Dzięki platformie Browser możesz tworzyć aplikacje Cordova dla przeglądarki. Oznacza to, że możesz używać wtyczek Cordova również w przeglądarce.

Można go zainstalować w ten sam sposób, w jaki instalujesz platformy iOS lub Android:

 cordova platform add browser

Twoja aplikacja musi zostać skompilowana przed użyciem dokładnie tak, jak w przypadku iOS lub Androida:

 cordova run browser

To polecenie skompiluje Twoją aplikację i otworzy domyślną przeglądarkę.

Wtyczki międzyplatformowe

Wiele wtyczek, takich jak Network, Camera i Facebook, obsługuje jednocześnie iOS, Androida i platformę Browser – wszystkie z tym samym API.

Aby zilustrować, że istnieje sposób na sprawdzenie, czy Twoje urządzenie jest online, czy offline na każdej platformie (iOS, Android, przeglądarka i komputer stacjonarny) za pomocą interfejsu API ngCordova:

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

Mając to na uwadze, możesz teraz wyobrazić sobie tworzenie produktów, które mogą działać w dowolnym miejscu za pomocą jednej bazy kodu.

Powszechny błąd nr 7: podążanie za architekturą zestawu startowego do zastosowań na dużą skalę

Podczas korzystania z polecenia ionic start myapp tworzony jest projekt startowy o następującej strukturze folderów:

 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

Nazywa się to strukturą Folder-by-Type, w której pliki JavaScript, CSS i HTML są pogrupowane według typów. Ponieważ początkującym może wydawać się to łatwe, tego rodzaju architektura dość szybko wymyka się spod kontroli. Po prostu się nie skaluje.

Oto kilka powodów, dla których nie należy używać struktury Folder-by-Type:

• Liczba plików w twoich folderach może stać się ogromna
• Znalezienie wszystkich plików, które musisz zmodyfikować dla określonej funkcji, może być trudne
• Praca nad funkcją doprowadzi do wielu otwartych folderów
• Nie skaluje się dobrze, im bardziej aplikacja się rozwija, tym trudniej nad nią pracować

Raczej polecam używać struktury Folders-by-Feature, w której pliki JavaScript, CSS i HTML są pogrupowane według funkcji lub modułu AngularJS:

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

Powody, dla których warto korzystać ze struktury folderów według funkcji:

• Liczba plików w Twoich folderach jest ograniczona do kilku
• Znalezienie wszystkich plików, które musisz zmodyfikować dla określonej funkcji, jest łatwe - znajdują się w tym samym folderze
• Możesz pracować samodzielnie nad funkcją
• Wiedza o tym, co reprezentuje moduł, jest łatwa - wystarczy nazwa folderu
• Łatwe tworzenie nowej funkcji, po prostu skopiuj/wklej istniejącą
• Dobrze się skaluje, możesz dodać tyle nowych funkcji, ile chcesz, bez utrudniania pracy zespołowi

Należy pamiętać, że ta architektura jest zbliżona do struktury Folders-by-Component, która jest teraz domyślna w aplikacjach Angular2/Ionic2.

Powszechny błąd nr 8: wiązanie zdarzeń do onscroll i zapominanie o requestAnimationFrame

Ta pojedyncza pułapka jest zwykle błędem początkującego, ale może mieć prawdopodobnie najgorszy wpływ na wydajność. Rozważ to:

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

Mimo że Ionic zapewnia dławienie dla tych działań, nadal może być bardzo powolny. Zasadniczo wszystko, co uruchamia pętlę skrótu, powinno być odroczone i nie uruchamiane razem z intensywnym malowaniem, co również jest efektem przewijania.

Wiele celów, które programiści próbowali osiągnąć, wiążąc zdarzenia przewijania, a zwłaszcza animacje, można również osiągnąć inną metodą. Oto requestAnimationFrame .

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

Powyższy kod jest bardzo prostym przykładem, sprawdzającym, czy użytkownik przewinął się poza górę elementu. Pamiętaj, aby dodać alternatywy specyficzne dla dostawcy w celu zapewnienia zgodności z różnymi przeglądarkami, jeśli zamierzasz użyć tego przykładu. Zasadniczo będzie działać z optymalną prędkością, w zależności od przeglądarki, przy 60 klatkach na sekundę lub przy częstotliwości odświeżania ekranu. Jest jednak zoptymalizowany, a wydajne struktury animacji wykorzystują tę prostą metodę.

Możesz także zajrzeć do element.getBoundingClientRect() , który dostarcza informacji o rozmiarze i pozycji węzła HTML.

Powszechny błąd nr 9: Ręczne prototypowanie aplikacji jonowych

Ionic ma specyficzny design, niemal język wizualny. Zwłaszcza w przypadku prototypów i produktów na wczesnym etapie można zaoszczędzić wiele czasu i wydatków, wykorzystując dostępne komponenty i style. W rzeczywistości są raczej minimalistyczne i mają dobrą estetykę.

Prezentowanie makiety i makiet z podstawową funkcjonalnością stało się standardem branżowym. Aby zobaczyć zdjęcie i zobaczyć rzeczywistą aplikację z dynamicznymi komponentami na urządzeniu mobilnym, to dwie bardzo różne filiżanki herbaty. Wielu projektantów, a także programistów UX korzysta z narzędzi takich jak Axure czy Balsamiq, które pozwalają na szybkie wykonanie makiety przy minimalnej funkcjonalności.

Teraz twórcy Ionic wypuścili podobne narzędzie stworzone wyłącznie dla deweloperów Ionic. Nazywa się Stwórcą Jonowym. Ma interfejs sieciowy typu „przeciągnij i upuść” i obsługuje prawie wszystko, co zapewnia rdzeń Ionic. Wspaniałe w tym jest to, że pozwala wyeksportować prototyp do kilku formatów, ze standardowym działającym kodem Ionic, a nawet zbudować aplikację i ją udostępnić. Narzędzie jest zastrzeżone, ale wiele opcji jest bezpłatnych.

Wniosek

Ionic zrewolucjonizował przemysł aplikacji hybrydowych w sposób, którego nikt nie mógł sobie wyobrazić. Jednak z biegiem czasu najlepsze praktyki i narzędzia nie uległy ewolucji. W konsekwencji wzrosła liczba potencjalnych błędów, które mogą popełnić programiści.

Doświadczeni programiści Ionic mają jasny sposób na dostarczanie światowej klasy aplikacji na wiele platform jednocześnie. Sposobem jest wykorzystanie dostępnych narzędzi, utrzymanie wydajności jako najwyższego priorytetu i przestrzeganie najlepszych praktyk.

Ten post nie byłby możliwy bez kreatywności niesamowitej społeczności Ionic, Michała Mikołajczyka, Mike'a Hartingtona (zespół Ionic Core) i Katie Ginder-Vogel (Menedżer ds. marketingu i komunikacji, Ionic). Bardzo wam wszystkim dziękuję.