Los 9 errores más comunes que cometen los desarrolladores de Ionic

Introducción

Ionic existe desde hace dos años. Es un gran conjunto de herramientas para desarrollar aplicaciones híbridas basadas en AngularJS. Ionic es extremadamente popular en este momento, con más de un millón de aplicaciones creadas y una comunidad creciente de miles de desarrolladores.

Desde el primer lanzamiento de Ionic, ha pasado el tiempo y las tecnologías web y las mejores prácticas han evolucionado de muchas maneras. Por lo tanto, es difícil determinar qué camino seguir al iniciar un nuevo proyecto. En estas condiciones, los desarrolladores pueden cometer errores que pueden afectar la calidad de sus aplicaciones o la productividad de su equipo.

Al leer los siguientes errores comunes, tendrá las claves para evitar problemas fundamentales y crear aplicaciones escalables y de alto rendimiento con Ionic.

Error común n.º 1: olvidarse de habilitar el desplazamiento nativo

El desplazamiento nativo permite que Ionic escuche eventos de desplazamiento en vistas web compatibles. Hace que Pull to Refresh , List Reordering y Infinite Scroll sean posibles sin el desplazamiento de JavaScript, que se creó en una época en que los navegadores carecían de eventos de desplazamiento adecuados.

El desplazamiento nativo está habilitado de forma predeterminada en Android desde Ionic 1.2 (diciembre de 2015). Es una gran mejora en el rendimiento y la experiencia del usuario, ya que garantiza un desplazamiento fluido debido a eventos asincrónicos.

Desafortunadamente, debido a la falta de eventos adecuados en iOS, el desplazamiento nativo aún no está habilitado para esa plataforma.

Si está utilizando una versión anterior a la 1.2, puede habilitar el desplazamiento nativo para Android mediante $ionicConfigProvider :

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

También puede habilitar o deshabilitar el desplazamiento nativo en cualquier página usando la directiva overflow-scroll en cualquier ion-content :

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

Tenga en cuenta que, lamentablemente, la repetición de colección, que permite que su aplicación muestre listas enormes de elementos, no se puede cubrir con el desplazamiento nativo.

Error común n.º 2: no usar la CLI de Ionic para instalar plataformas y complementos

Ionic CLI agrega funciones a Cordova CLI. La persistencia de plataformas y complementos es una gran característica que agrega Ionic CLI.

El problema con Cordova CLI es que las plataformas y los complementos que instala solo se instalan en su máquina. Cuando trabaja en equipo, para evitar errores, desea compartir el mismo entorno, plataformas y complementos. Con Cordova CLI, es más difícil mantener el proyecto sincronizado entre las máquinas de los desarrolladores. Sí, puede confirmar las carpetas de plataformas y complementos, pero no se recomienda.

Al usar Ionic CLI para instalar plataformas ionic platform add ios y plugins ionic plugin add camera , el archivo package.json se edita adecuadamente.

Las plataformas y complementos se almacenan en las propiedades cordovaPlatforms y cordovaPlugins :

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

Ahora es fácil para otros desarrolladores sincronizarse cuando extraen un nuevo código, simplemente ejecutando ionic state restore cuando sea necesario (adición, eliminación o actualización de versión).

Error común n.º 3: el rendimiento de pensamiento sale de la caja

Ionic se basa en AngularJS y, a menudo, se cuestiona el rendimiento en el dispositivo. Me gustaría tranquilizarlo en este punto: con un poco de experiencia en AngularJS, puede crear aplicaciones de clase mundial con Ionic.

El ejemplo perfecto es la aplicación Sworkit que está construida con Ionic, tiene una base de usuarios de más de 9 millones, más de 7 millones de descargas y un promedio de 4,5 estrellas en Google Play.

Si desea obtener lo mejor de AngularJS, aquí hay algunas cosas que debe aprender antes de comenzar su proyecto.

$ver

Los observadores están acostumbrados a escuchar los cambios de alcance en AngularJS. Hay básicamente cuatro tipos de $watch : $watch (normal) , $watch (deep) , $watchCollection y $watchGroup .

Cada uno de ellos es diferente, y elegir el correcto puede marcar una gran diferencia en términos de rendimiento.

$ reloj (normal)

El uso normal $watch solo verificará las propiedades de objeto existentes o los elementos de matriz. Los cambios superficiales, como agregar una propiedad de objeto o insertar un elemento nuevo en una matriz, no se atenderán.

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

$ reloj (profundo)

El $watch profundo se ocupa de los cambios superficiales y profundos, como las propiedades de los objetos anidados. Con este $watch seguro que no te pierdes ninguna modificación. Sin embargo, el uso de deep $watch tiene implicaciones en el rendimiento. Aconsejaría usarlo con precaución.

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

$relojColección

$watchCollection se puede considerar entre el $watch normal y el $watch profundo. También funciona comparando referencias de objetos, pero con la ventaja de que también observa superficialmente las propiedades de su objeto agregando una propiedad de objeto o insertando un nuevo elemento en una matriz.

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

$verGrupo

Introducido en AngularJS 1.3, $watchGroup permite ver varias expresiones a la vez.

Si bien es posible que $watchGroup no mejore el rendimiento de su aplicación en comparación con el $watch normal, tiene la ventaja de ser más sintético cuando observa varias expresiones de alcance.

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

Rastrear por

La track by se usa para evitar la manipulación inútil de DOM cuando se usa ng-repeat . De hecho, si el ciclo de resumen encuentra que al menos un elemento de su colección ha cambiado, ng-repeat volverá a representar todos los elementos. La manipulación de DOM siempre tiene efectos en el rendimiento de la aplicación, por lo que cuanto menos tenga, mejor.

Para evitar volver a renderizar la colección completa y solo actualizar los elementos que deben actualizarse, use track by con un identificador único.

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

Solo evita usar track by en collection-repeat .

Enlace de una sola vez

El enlace de una sola vez, o :: se introdujo en Angular 1.3 y tiene un impacto real en el rendimiento de su aplicación.

Básicamente, usar el enlace de una sola vez :: en una expresión la eliminará de la lista de $watchers cuando se complete. Significa que la expresión no podrá actualizarse incluso si los datos cambian.

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

Nuestro consejo es revisar todas las vistas de su aplicación y pensar en lo que podría o no actualizarse, y usar el enlace de una sola vez :: en consecuencia. Será un gran alivio para el ciclo de digestión.

Tenga en cuenta que, lamentablemente, el enlace de una sola vez no se puede usar en una collection-repeat , porque la lista de elementos que se muestran en la pantalla cambia en el desplazamiento.

Si desea obtener más información sobre los trucos y consejos de rendimiento de AngularJS e Ionic, le recomiendo leer la hoja de trucos de rendimiento de Ultimate AngularJS e Ionic.

Error común n.º 4: tener confusiones con la lógica de View Cache

Las aplicaciones de una sola página no almacenan en caché las páginas de forma predeterminada. Probablemente lo haya experimentado usando aplicaciones AngularJS, donde el desplazamiento o las entradas del usuario no se guardan cuando navega de un lado a otro entre las páginas.

Con Ionic, diez páginas se almacenan en caché de forma predeterminada y esto se puede cambiar globalmente o por plataforma.

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

Esta es una gran característica, pero a veces es difícil para los principiantes entender cómo manejar las páginas en caché.

El problema es que cuando el usuario vuelve a una página en caché, el controlador no se vuelve a instanciar, lo cual es diferente de las aplicaciones AngularJS, y todo es como si nunca hubieras dejado esa página.

En estas condiciones, ¿cómo se deben actualizar los datos de la página?

Introducción a los eventos del ciclo de vida del controlador

En comparación con AngularJS, Ionic ofrece muchos eventos de ciclo de vida:

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

Estos eventos son necesarios si desea tener control sobre el caché de vista.

El evento $ionicView.loaded , por ejemplo, se activa la primera vez que se carga una vista. Este evento ya no se activará mientras esta vista esté en caché, incluso si el usuario vuelve a ella. Este es generalmente el evento que usaría para iniciar variables de la misma manera que lo hace con el evento $viewContentLoaded en AngularJS.

Si desea obtener datos cada vez que ingresa a una vista, almacenada en caché o no, puede usar el evento $ionicView.enter .

Al usar el evento correcto en el momento correcto, puede mejorar la usabilidad de la aplicación.

En cuanto al rendimiento, el uso de la vista de caché solo afecta el tamaño del DOM. Cuando una página se almacena en caché, todos sus observadores se desconectan y, por lo tanto, la página es solo algunos elementos DOM más que se encuentran en su página esperando ser utilizados nuevamente.

El tamaño del DOM es importante para tener una excelente experiencia de usuario, pero el almacenamiento en caché de hasta diez páginas parece funcionar bien (por supuesto, dependiendo de lo que cargue en sus páginas).

Error común #5: No saber sobre Crosswalk para Android

Cada versión de Android ejecuta un WebView diferente (un navegador que ejecuta su aplicación). El rendimiento es diferente entre dispositivos y puede ser realmente malo en los dispositivos Android antiguos. Para obtener la misma experiencia con fluidez y capacidad de respuesta en todos los dispositivos Android, puede instalar Crosswalk. Básicamente, integra el navegador Chromium más reciente en su aplicación y agrega alrededor de 20 Mb por APK, tanto ARM como X86.

Crosswalk se puede instalar simplemente usando Ionic CLI o Cordova CLI:

 ionic plugin add cordova-plugin-crosswalk-webview

Error común n.º 6: intentar ejecutar los complementos de Cordova dentro del navegador

La mayoría de los desarrolladores que usan Ionic querrán que su aplicación se ejecute en iOS y Android. Después de agregar las plataformas ionic platform add ios android y algunos complementos ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , un error novato es pensar que puede probarlos en el navegador. Bueno, podría, pero solo después de instalar la plataforma de navegador adecuada. Tenga en cuenta que no funciona con todos los complementos.

Los complementos de Cordova están destinados a interactuar con la API del dispositivo nativo a través de JavaScript. Por lo tanto, el complemento de contacto o el complemento de orientación del dispositivo solo funcionarán en un dispositivo.

Sin embargo, puede probar fácilmente su código en un dispositivo y depurarlo de forma remota a través de su computadora.

Depuración remota en Android

Conecte su dispositivo y asegúrese de que su computadora lo detecte correctamente ejecutando adb devices (se requiere Android SDK).

Cree su aplicación e instálela en su dispositivo ejecutando ionic run android . Una vez que su aplicación se inicie en el dispositivo, abra la consola a través de las herramientas de desarrollo de Chrome (en su computadora) chrome://inspect/#devices e inspeccione su dispositivo.

Depuración remota en iOS

Conecte su dispositivo y asegúrese de que su computadora lo detecte correctamente. Cree su aplicación e instálela en su dispositivo ejecutando ionic run ios --device .

Una vez que su aplicación se inicie en el dispositivo, abra las herramientas de desarrollo de Safari (en su computadora) haciendo clic en Develop > Your iPhone > Your app :

Ejecute los complementos de Cordova dentro del navegador

Ejecutar complementos de Cordova dentro del navegador es una característica avanzada que debe conocer. Desde Ionic 1.2, el navegador es oficialmente compatible, por lo que abre la era de las aplicaciones multiplataforma mucho más allá de las plataformas iOS y Android.

Con la plataforma Cordova Browser, Electron y solo tecnologías web (JavaScript, HTML y CSS), ahora podemos crear aplicaciones Ionic para el navegador y el escritorio (Windows, Linux y OSX).

Un kit de inicio está disponible en Github.

Plataforma de navegación Cordova

Con la plataforma del navegador, puede crear aplicaciones Cordova para el navegador. Significa que también puede usar los complementos de Cordova en el navegador.

Se puede instalar de la misma manera que instala las plataformas iOS o Android:

 cordova platform add browser

Su aplicación debe compilarse antes de su uso exactamente igual que con iOS o Android:

 cordova run browser

Este comando compilará su aplicación y abrirá su navegador predeterminado.

Complementos multiplataforma

Muchos complementos como Network, Camera y Facebook son compatibles con iOS, Android y la plataforma del navegador al mismo tiempo, todos con la misma API.

Para ilustrar que hay una manera de saber si su dispositivo está en línea o fuera de línea en cada plataforma (iOS, Android, navegador y escritorio) usando la API de 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; });

Con esto en mente, ahora puede imaginar la creación de productos que puedan ejecutarse en cualquier lugar con una sola base de código.

Error común n.º 7: seguir la arquitectura del kit de inicio para aplicaciones a gran escala

Cuando se utiliza el comando ionic start myapp , se crea un proyecto inicial con la siguiente estructura de carpetas:

 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

Esto se denomina estructura Carpeta por tipo, donde los archivos JavaScript, CSS y HTML se agrupan por tipos. Como puede parecer fácil para los principiantes, este tipo de arquitectura se sale de control con bastante rapidez. Simplemente no escala.

Estas son algunas razones para no utilizar la estructura Carpeta por tipo:

• La cantidad de archivos en sus carpetas puede volverse enorme
• Encontrar todos los archivos que necesita modificar para una característica específica puede ser complicado
• Trabajar en una función dará lugar a muchas carpetas abiertas
• No escala bien, cuanto más crece la aplicación, más difícil es trabajar en ella

Prefiero usar una estructura de Carpetas por función, donde los archivos JavaScript, CSS y HTML se agrupan por función o módulo AngularJS:

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

Razones para usar la estructura Carpetas por función:

• El número de archivos en sus carpetas está limitado a unos pocos
• Encontrar todos los archivos que necesita modificar para una característica específica es fácil: están en la misma carpeta
• Puede trabajar de forma independiente en una característica
• Saber lo que representa el módulo es fácil: el nombre de la carpeta es suficiente
• Fácil de crear una nueva función, simplemente copie/pegue una existente
• Se escala bien, puede agregar tantas funciones nuevas como desee sin dificultar el trabajo de su equipo.

Tenga en cuenta que esta arquitectura está cerca de la estructura de carpetas por componente que ahora es la predeterminada en las aplicaciones Angular2/Ionic2.

Error común n.º 8: vincular eventos a onscroll y olvidarse de requestAnimationFrame

Este único escollo suele ser un error de principiante, pero probablemente tenga el peor impacto en el rendimiento. Considera esto:

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

Aunque Ionic proporciona aceleración para estas acciones, aún puede ser muy lento. Básicamente, cualquier cosa que desencadene un bucle de resumen debe posponerse y no desencadenarse junto con una pintura intensa, que también es el efecto del desplazamiento.

Muchos de los objetivos que los desarrolladores han estado tratando de lograr vinculando eventos de desplazamiento, y especialmente animaciones, también se pueden lograr utilizando un método diferente. He aquí requestAnimationFrame .

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

El código anterior es un ejemplo muy simple, comprobando si el usuario se desplazó más allá de la parte superior del elemento. Recuerde agregar alternativas específicas del proveedor para la compatibilidad entre navegadores si tiene la intención de usar el ejemplo. Básicamente se ejecutará a una velocidad óptima, según el navegador, a 60 FPS oa la frecuencia de actualización de la pantalla. Pero está optimizado y los marcos de animación de alto rendimiento utilizan ese método simple.

También puede consultar element.getBoundingClientRect() , que proporciona información sobre el tamaño y la posición de un nodo HTML.

Error común n.º 9: creación manual de prototipos de aplicaciones iónicas

Ionic tiene un diseño específico, casi un lenguaje visual. Especialmente con prototipos y productos en etapa inicial, se puede ahorrar mucho tiempo y gastos utilizando los componentes y estilos disponibles. En realidad, son bastante minimalistas y tienen una buena estética.

Presentar wireframes y maquetas con funcionalidad básica se ha convertido en un estándar de la industria. Ver una imagen y ver una aplicación real con componentes dinámicos en un dispositivo móvil son dos tazas de té muy diferentes. Muchos diseñadores, y también desarrolladores de UX, usan herramientas como Axure o Balsamiq, que permiten hacer wireframes rápidamente con una funcionalidad mínima.

Ahora, los creadores de Ionic lanzaron una herramienta similar hecha exclusivamente para desarrolladores de Ionic. Se llama Ionic Creator. Tiene una interfaz web de arrastrar y soltar, y es compatible con casi todo lo que ofrece el núcleo de Ionic. Lo bueno de esto es que permite exportar el prototipo en varios formatos, con código Ionic de trabajo estándar, e incluso construir la aplicación y compartirla. La herramienta es propietaria, pero muchas de las opciones son de uso gratuito.

Conclusión

Ionic revolucionó la industria de las aplicaciones híbridas de una manera que nadie podría haber imaginado. Sin embargo, con el tiempo, las mejores prácticas y herramientas carecieron de evolución. Como consecuencia, aumentó el número de posibles errores que los desarrolladores pueden cometer.

Los desarrolladores expertos de Ionic tienen una manera clara de entregar aplicaciones de clase mundial a múltiples plataformas simultáneamente. La forma es aprovechar las herramientas disponibles, mantener el rendimiento como una prioridad y seguir las mejores prácticas.

Esta publicación no habría sido posible sin la creatividad de la increíble comunidad de Ionic, Michal Mikolajczyk, Mike Hartington (equipo de Ionic Core) y Katie Ginder-Vogel (gerente de marketing y comunicaciones, Ionic). Muchas gracias a todos.