9 самых распространенных ошибок, которые допускают разработчики Ionic

Введение

Ionic существует уже два года. Это отличный набор инструментов для разработки гибридных приложений на основе AngularJS. В настоящее время Ionic чрезвычайно популярен: создано более миллиона приложений и растет сообщество из тысяч разработчиков.

С момента первого выпуска Ionic прошло много времени, и веб-технологии и передовой опыт претерпели множество изменений. Поэтому трудно определить, по какому пути идти, начиная новый проект. В этих условиях разработчики могут совершать ошибки, потенциально влияющие на качество их приложений или производительность их команды.

Прочитав следующие распространенные ошибки, вы получите ключи к тому, чтобы избежать фундаментальных проблем и создать производительные и масштабируемые приложения с помощью Ionic.

Распространенная ошибка № 1: забыть включить встроенную прокрутку

Собственная прокрутка позволяет Ionic прослушивать события прокрутки в поддерживаемых веб-просмотрах. Это делает возможными Pull to Refresh , List Reordering и Infinite Scroll без прокрутки JavaScript, которая была создана в то время, когда в браузерах не было надлежащих событий прокрутки.

Собственная прокрутка включена по умолчанию на Android, начиная с Ionic 1.2 (декабрь 2015 г.). Это огромное улучшение производительности и взаимодействия с пользователем, поскольку оно обеспечивает плавную прокрутку из-за асинхронных событий.

К сожалению, из-за отсутствия надлежащих событий на iOS нативная прокрутка пока не включена для этой платформы.

Если вы используете версию до 1.2, вы можете включить Native Scrolling для Android с помощью $ionicConfigProvider :

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

Вы также можете включить или отключить Native Scrolling на любой странице, используя директиву overflow-scroll для любого ion-content :

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

Обратите внимание, что, к сожалению, повтор коллекции, который позволяет вашему приложению отображать огромные списки элементов, не может быть покрыт встроенной прокруткой.

Распространенная ошибка № 2: не использовать Ionic CLI для установки платформ и плагинов

Ionic CLI добавляет функции в Cordova CLI. Постоянство платформ и плагинов — отличная функция, которую добавляет Ionic CLI.

Проблема с Cordova CLI заключается в том, что платформы и подключаемые модули, которые вы устанавливаете, устанавливаются только на вашем компьютере. При работе в команде, чтобы избежать ошибок, вы хотите использовать одну и ту же среду, платформы и плагины. С Cordova CLI сложнее синхронизировать проект между машинами разработчиков. Да, вы можете закоммитить папки с платформами и плагинами, но это не рекомендуется.

При использовании Ionic CLI для установки платформ ionic platform add ios и плагинов ionic plugin add camera файл package.json редактируется соответствующим образом.

Платформы и плагины хранятся в свойствах cordovaPlatforms и cordovaPlugins :

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

Теперь другим разработчикам легко синхронизироваться при извлечении нового кода, просто запустив при необходимости ionic state restore (добавление, удаление или обновление версии).

Распространенная ошибка № 3: производительность мышления нестандартна

Ionic основан на AngularJS, и производительность на устройстве часто ставится под сомнение. Я хотел бы заверить вас в этом: имея небольшой опыт работы с AngularJS, вы можете создавать приложения мирового уровня с Ionic.

Прекрасным примером является приложение Sworkit, созданное с помощью Ionic, имеющее более 9 миллионов пользователей, более 7 миллионов загрузок и в среднем 4,5 звезды в Google Play.

Если вы хотите получить максимальную отдачу от AngularJS, вот несколько вещей, которые вы должны изучить, прежде чем начинать свой проект.

$смотреть

Наблюдатели привыкли прослушивать изменения области видимости в AngularJS. Существует четыре основных типа $watch : $watch (normal) , $watch (deep) , $watchCollection и $watchGroup .

Каждый из них отличается, и выбор правильного может иметь огромное значение с точки зрения производительности.

$смотреть (обычный)

Использование обычного $watch будет проверять только существующие свойства объекта или элементы массива. Незначительные изменения, такие как добавление свойства объекта или добавление нового элемента в массив, не будут учтены.

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

$ смотреть (глубоко)

Глубокий $watch заботится о поверхностных и глубоких изменениях, таких как свойства вложенных объектов. С этими $watch вы точно не пропустите ни одной модификации. Однако использование deep $watch влияет на производительность. Я бы посоветовал использовать его с осторожностью.

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

$watchCollection

$watchCollection можно рассматривать как нечто среднее между обычным $watch и глубоким $watch . Он также работает, сравнивая ссылки на объекты, но с тем преимуществом, что он также неглубоко просматривает свойства вашего объекта, добавляя свойство объекта или помещая новый элемент в массив.

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

$watchGroup

Представленная в AngularJS 1.3, $watchGroup позволяет просматривать несколько выражений одновременно.

Хотя $watchGroup может не улучшить производительность вашего приложения по сравнению с обычным $watch , его преимущество заключается в том, что он более синтетический при просмотре нескольких выражений области видимости.

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

Отслеживать по

track by используется, чтобы избежать бесполезных манипуляций с DOM при использовании ng-repeat . Действительно, если цикл дайджеста обнаружит, что хотя бы один элемент вашей коллекции изменился, ng-repeat повторно отобразит все элементы. Манипуляции с DOM всегда влияют на производительность приложения, поэтому чем их меньше, тем лучше.

Чтобы избежать повторного рендеринга всей коллекции и обновлять только те элементы, которые необходимо обновить, используйте track by с уникальным идентификатором.

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

Просто избегайте использования track by в collection-repeat .

Одноразовая привязка

Одноразовая привязка, или :: , была введена в Angular 1.3 и оказывает реальное влияние на производительность вашего приложения.

По сути, использование одноразовой привязки :: к выражению удалит его из списка $watchers при заполнении. Это означает, что выражение не сможет обновиться, даже если данные изменятся.

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

Наш совет — пройтись по всем представлениям вашего приложения и подумать, что можно, а что нельзя обновить, и соответственно использовать одноразовую привязку :: . Это будет огромным облегчением для цикла пищеварения.

Обратите внимание, что, к сожалению, одноразовую привязку нельзя использовать в collection-repeat , потому что список элементов, отображаемых на экране, меняется при прокрутке.

Если вы хотите узнать больше о советах и ​​рекомендациях по производительности AngularJS и Ionic, я рекомендую прочитать шпаргалку по производительности Ultimate AngularJS и Ionic.

Распространенная ошибка № 4: Путаница с логикой View Cache

Одностраничные приложения по умолчанию не кэшируют страницы. Вы, вероятно, сталкивались с этим, используя приложения AngularJS, где прокрутка или пользовательский ввод не сохраняются при переходе между страницами.

В Ionic по умолчанию кэшируются десять страниц, и это можно изменить глобально или для каждой платформы.

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

Это отличная функция, но иногда новичкам сложно понять, как обращаться с кешированными страницами.

Проблема в том, что когда пользователь возвращается на кешированную страницу, контроллер не переустанавливается снова, в отличие от приложений AngularJS, и все как будто вы никогда не покидали эту страницу.

Как в этих условиях обновлять данные на странице?

Знакомство с событиями жизненного цикла контроллера

По сравнению с AngularJS, Ionic предлагает множество событий жизненного цикла:

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

Эти события необходимы, если вы хотите контролировать кэш представления.

Например, событие $ionicView.loaded запускается при первой загрузке представления. Это событие больше не будет запускаться, пока это представление кэшируется, даже если пользователь вернется к нему. Обычно это событие, которое вы будете использовать для инициации переменных так же, как и с событием $viewContentLoaded в AngularJS.

Если вы хотите получать данные каждый раз, когда вы входите в представление, кэшированное или нет, вы можете использовать событие $ionicView.enter .

Используя правильное событие в нужное время, вы можете повысить удобство использования приложения.

Что касается производительности, использование представления кеша влияет только на размер DOM. Когда страница кэшируется, все ее наблюдатели отключаются, и поэтому страница представляет собой просто еще несколько элементов DOM, лежащих на вашей странице и ожидающих повторного использования.

Размер DOM имеет значение для удобного взаимодействия с пользователем, но кэширование до десяти страниц работает нормально (конечно, в зависимости от того, что вы загружаете на свои страницы).

Распространенная ошибка № 5: не знать о пешеходном переходе для Android

Каждая версия Android запускает другой WebView (браузер, в котором запускается ваше приложение). Производительность на разных устройствах разная, и на старых устройствах Android она может быть очень плохой. Чтобы получить одинаковую плавность и отзывчивость на всех устройствах Android, вы можете установить Crosswalk. По сути, он встраивает новейший браузер Chromium в ваше приложение и добавляет около 20 МБ на APK, как для ARM, так и для X86.

Crosswalk можно установить просто с помощью Ionic CLI или Cordova CLI:

 ionic plugin add cordova-plugin-crosswalk-webview

Распространенная ошибка № 6: попытка запуска плагинов Cordova внутри браузера

Большинство разработчиков, использующих Ionic, хотят, чтобы их приложения работали на iOS и Android. После добавления платформы ionic platform add ios android и некоторых плагинов ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts грубая ошибка — думать, что вы можете протестировать их в браузере. Ну, вы могли бы, но только после того, как вы установите соответствующую платформу браузера. Имейте в виду, что это работает не со всеми плагинами.

Плагины Cordova предназначены для взаимодействия с собственным API устройства через JavaScript. Таким образом, плагин контактов или плагин ориентации устройства будет работать только на устройстве.

Однако вы можете легко протестировать свой код на устройстве и удаленно отладить его через свой компьютер.

Удаленная отладка на Android

Подключите ваше устройство и убедитесь, что оно правильно определяется вашим компьютером, запустив adb devices (требуется Android SDK).

Создайте свое приложение и установите его на свое устройство, запустив ionic run android . Как только ваше приложение будет запущено на устройстве, откройте консоль с помощью инструментов разработчика Chrome (на вашем компьютере) chrome://inspect/#devices и проверьте свое устройство.

Удаленная отладка на iOS

Подключите устройство и убедитесь, что оно правильно определяется вашим компьютером. Создайте свое приложение и установите его на свое устройство, запустив ionic run ios --device .

После запуска приложения на устройстве откройте инструменты разработчика Safari (на своем компьютере), нажав « Develop > Your iPhone > Your app :

Запуск плагинов Cordova в браузере

Запуск плагинов Cordova внутри браузера — это расширенная функция, о которой вам следует знать. Начиная с Ionic 1.2 браузер официально поддерживается, поэтому он открывает эру кроссплатформенных приложений далеко за пределами платформ iOS и Android.

Благодаря платформе браузера Cordova, Electron и только веб-технологиям (JavaScript, HTML и CSS) мы теперь можем создавать приложения Ionic для браузера и рабочего стола (Windows, Linux и OSX).

Стартовый комплект доступен на Github.

Браузерная платформа Cordova

С помощью платформы браузера вы можете создавать приложения Cordova для браузера. Это означает, что вы также можете использовать плагины Cordova в браузере.

Его можно установить так же, как вы устанавливаете платформы iOS или Android:

 cordova platform add browser

Ваше приложение должно быть скомпилировано перед использованием точно так же, как в случае с iOS или Android:

 cordova run browser

Эта команда скомпилирует ваше приложение и откроет браузер по умолчанию.

Кроссплатформенные плагины

Многие плагины, такие как Network, Camera и Facebook, одновременно поддерживают iOS, Android и платформу браузера — все с одним и тем же API.

Чтобы проиллюстрировать, что есть способ узнать, находится ли ваше устройство в сети или в автономном режиме на каждой платформе (iOS, Android, браузер и рабочий стол) с помощью 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; });

Имея это в виду, теперь вы можете представить себе создание продуктов, которые могут работать в любом месте с помощью единой базы кода.

Распространенная ошибка № 7: Следование архитектуре Starter Kit для крупномасштабных приложений

При использовании команды ionic start myapp стартовый проект создается со следующей структурой папок:

 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

Это называется структурой папок по типу, в которой файлы JavaScript, CSS и HTML сгруппированы по типам. Поскольку это может показаться простым для новичков, такая архитектура довольно быстро выходит из-под контроля. Он просто не масштабируется.

Вот несколько причин не использовать структуру Folder-by-Type:

• Количество файлов в ваших папках может стать огромным
• Поиск всех файлов, которые вам нужно изменить для определенной функции, может быть сложным.
• Работа над функцией приведет к множеству открытых папок
• Плохо масштабируется, чем больше приложение растет, тем сложнее с ним работать.

Я скорее рекомендую использовать структуру Folders-by-Feature, где файлы JavaScript, CSS и HTML сгруппированы по функциям или модулям AngularJS:

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

Причины использования структуры папок по функциям:

• Количество файлов в ваших папках ограничено несколькими
• Найти все файлы, которые вам нужно изменить для определенной функции, легко — они находятся в одной папке.
• Вы можете работать независимо над функцией
• Узнать, что представляет собой модуль, легко — достаточно имени папки
• Легко создать новую функцию, просто скопируйте/вставьте существующую
• Хорошо масштабируется, вы можете добавить столько новых функций, сколько хотите, не затрудняя работу вашей команды.

Обратите внимание, что эта архитектура близка к структуре Folders-by-Component, которая теперь используется по умолчанию в приложениях Angular2/Ionic2.

Распространенная ошибка № 8: привязка событий к onscroll и забывание о requestAnimationFrame

Эта единственная ловушка, как правило, является ошибкой новичка, но она может иметь худшее влияние на производительность. Учти это:

 <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 обеспечивает регулирование этих действий, оно все же может быть очень медленным. По сути, все, что запускает цикл дайджеста, должно быть отложено, а не запускаться вместе с интенсивной прорисовкой, которая также является эффектом прокрутки.

Многие из целей, которые пытались достичь разработчики, привязывая события прокрутки, и особенно анимацию, также могут быть достигнуты с помощью другого метода. Вот requestAnimationFrame .

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

Приведенный выше код является очень простым примером проверки того, прокрутил ли пользователь верхнюю часть элемента. Не забудьте добавить специфические для поставщика альтернативы для кросс-браузерной совместимости, если вы собираетесь использовать этот пример. В основном он будет работать с оптимальной скоростью, в зависимости от браузера, со скоростью 60 кадров в секунду или с частотой обновления экрана. Но он оптимизирован, и высокопроизводительные анимационные фреймворки используют этот простой метод.

Вы также можете заглянуть в element.getBoundingClientRect() , который предоставляет информацию о размере и положении узла HTML.

Распространенная ошибка № 9: прототипирование приложений Ionic вручную

Ionic имеет специфический дизайн, почти визуальный язык. Использование доступных компонентов и стилей позволяет сэкономить много времени и средств, особенно при работе с прототипами и продуктами на ранних стадиях. На самом деле они довольно минимальны и имеют хорошую эстетику.

Представление каркасов и макетов с базовой функциональностью стало отраслевым стандартом. Увидеть картинку и увидеть реальное приложение с динамическими компонентами на мобильном устройстве — две совершенно разные вещи. Многие дизайнеры, а также UX-разработчики используют такие инструменты, как Axure или Balsamiq, которые позволяют быстро создавать каркасы с минимальной функциональностью.

Теперь создатели Ionic выпустили аналогичный инструмент, предназначенный исключительно для разработчиков Ionic. Он называется Ionic Creator. Он имеет веб-интерфейс с возможностью перетаскивания и поддерживает почти все, что предлагает ядро ​​​​Ionic. Что в нем хорошего, так это то, что он позволяет экспортировать прототип в несколько форматов со стандартным рабочим кодом Ionic и даже создавать приложение и делиться им. Инструмент является проприетарным, но многие опции можно использовать бесплатно.

Заключение

Ionic произвел революцию в индустрии гибридных приложений так, как никто и представить себе не мог. Однако со временем лучшие практики и инструменты перестали развиваться. Как следствие, увеличилось количество потенциальных ошибок, которые могут допустить разработчики.

У опытных разработчиков Ionic есть четкий способ доставки приложений мирового класса на несколько платформ одновременно. Способ заключается в том, чтобы использовать доступные инструменты, сделать производительность главным приоритетом и следовать передовым методам.

Этот пост был бы невозможен без творчества удивительного сообщества Ionic, Михала Миколайчика, Майка Хартингтона (команда Ionic Core) и Кэти Гиндер-Фогель (менеджер по маркетингу и коммуникациям, Ionic). Всем большое спасибо.