Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic 2
Code

Introducción a Ionic 2

by
Length:LongLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En este artículo, vamos a echar un vistazo a Ionic 2, la versión más reciente del framework de aplicación móvil multi-plataforma Ionic. Para los que están comenzando, recapitularemos qué es Ionic y para qué es usado. Después vamos a sumergirnos en Ionic 2. Te diré que hay de nuevo y cómo difiere de Ionic 1, y te ayudaré a decidir si deberías usarlo en tu siguiente proyecto o no.

¿Qué Es Ionic?

Ionic es un framework para construir aplicaciones híbridas usando HTML, CSS y JavaScript. Viene con un conjunto de componentes UI y funciones que puedes usar para crear aplicaciones móviles completamente funcionales y atractivas.

Ionic está construido en la pila Cordova. No puedes crear aplicaciones móviles solo con Ionic porque solo maneja la parte UI. Necesita trabajar con Angular, que maneja la lógica de la aplicación, y Cordova, el framework de aplicación multi-plataforma que te permite compilar tu app en un archivo instalable y ejecutarla dentro del web view del dispositivo móvil.

Las aplicaciones construidas con Cordova y Ionic pueden ejecutarse en dispositivos Android e iOS. También puedes instalar complementos Cordova para proporcionar funcionalidad nativa tal como acceder a la cámara y trabajar con dispositivos Bluetooth Low Energy.

Para más sobre Cordova, revisa algunos de nuestros cursos y tutoriales aquí en Envato Tuts+.

Ionic es más que solo un framework UI, sin embargo. La compañía Ionic también ofrece servicios que soportan el framework Ionic UI, incluyendo el Ionic Creator, Ionic View e Ionic Cloud.

¿Qué Hay de Nuevo en Ionic 2?

En esta sección, estaré echando un vistazo a algunos de los cambios significativos a Ionic en la versión 2, y también las nuevas características y herramientas que fueron introducidas en Ionic 2.

Soporte de Navegador

Ionic 1 fue construido con solo aplicaciones móviles híbridas en mente. Pero Ionic 2 está construido para soportar aplicaciones web progresivas y apps Electron también. Esto significa que ahora puedes construir no solo aplicaciones Ionic que se ejecuten dentro del entorno Cordova sino también aplicaciones web progresivas, que usan características web modernas para entregar una experiencia de app a los usuarios.

También puedes apuntar a Electron, una plataforma para construir aplicaciones de escritorio multi-plataforma usando HTML, CSS y JavaScript. Electron es bastante como Cordova pero para sistemas operativos de escritorio como Windows, Ubuntu o masOS.

Angular 2 y TypeScript

Ionic 2 ahora usa Angular 2 para plantillas y lógica de aplicación. Esto significa que los desarrolladores tendrán que aprender la nueva sintaxis Angular 2 antes de que puedan volverse productivos en crear aplicaciones Ionic 2. No te preocupes, porque los conceptos aún son  los mismos que eran en Angular 1. También hay recursos tales como ngMigrate que te ayudarán a convertir tus habilidades Angular 1 a Angular 1.

Aparte de Angular 2, Ionic 2 también usa TypeScript. Para aquellos familiares con este, TypeScript es un superconjunto de JavaScript. Esto significa que aún puedes usar sintaxis vanilla JavaScript para escribir tus aplicaciones. Si quieres usar las características que vienen con TyperScript, tales como sintaxis ES6 y ES7, tecleado-estático, y completación inteligente de código, entonces puedes usar la sintaxis específica TypeScript. Hay complementos que puedes instalar en tu editor de texto favorito o IDE para aprovechar los beneficios de las características avanzadas de completación de código de TypeScript.

Sintaxis

Como mencioné, la sintaxis de plantilla en Ionic 2 ha cambiado significativamente, en gran parte por su transición a usar Angular 2. Puedes incluso encontrar que la nueva sintaxis es más simple y concisa. Aquí hay unos cuantos ejemplos para de sintaxis Ionic 1 e Ionic 2 lado a lado:

Escuchando eventos:

Usando un modelo:

Ciclando a través de un arreglo y mostrando cada elemento:

Estructura de Carpeta

Si comparas la estructura de carpeta de un proyecto Ionic 1 y un proyecto Ionic 2, notarás que la mayoría de las carpetas que estás acostumbrado a ver en un proyecto Ionic 1 aún están en Ionic 2. Esto es porque la plataforma subyacente no ha cambiado realmente---Ionic 2 aún usa Cordova. Las únicas cosas que han cambiado son las partes que tiene que ver con tus archivos fuentes. Aquí hay una captura de la estructura de carpeta de una app Ionic 1:

ionic 1 folder structure

Y aquí está una app construida con Ionic 2:

ionic 2 folder structure

Si miras más de cerca, notarás que ahora hay una carpeta src. Ahí es donde están todos los archivos fuente de tu proyecto, y cada vez que haces cambios a un archivo en ese directorio, los archivos cambiados se compilan y son copiados al directorio www/build. Previamente, los archivos fuente estaban todos en el directorio www, y no requerías un paso extra de compilación.

La estructura de directorio también es más organizada. Si revisas el directorio src/pages, puedes ver que cada página tiene su propia carpeta, y dentro de cada una están los archivos HTML, CSS y JavaScript para esa página específica.

Previamente, en Ionic 1, solo se te daba un directorio vacío y tenías la libertad de estructurar tu proyecto como quisieras. Pero esto venía con la desventaja de no forzarte a hacer las cosas de la mejor manera. Podrías volverte perezoso y apegarte a una estructura que englobara todos los archivos juntos, lo cuál podría dificultar las cosas para equipos grandes trabajando en aplicaciones complejas.

Temas

A diferencia de la versión previa de Ionic, que solo tenía una sola apariencia para todas las plataformas, Ionic 2 ahora soporta tres modos: Material Design, iOS y Windows. Ahora Ionic empata la apariencia de la plataforma en la que es desplegada. Así que si tu app es instalada en Android, por ejemplo, usará un estilo y comportamiento similar a apps nativas de Android.

Hay soporte para poner temas en Ionic, aunque al momento de escribir este artículo, solo se entrega con el tema Claro por defecto. Si quieres modificar el tema, puedes editar el archivo src/theme/variables.scss.

Herramientas

Ionic 2 también viene con nuevas herramientas que harán una alegría crear aplicaciones móviles. Te mostraré unas cuantas en esta sección.

Generadores

Ionic 2 ahora proporciona un generador que te permite crear páginas y servicios para tu app:

Esto creará los siguientes archivos en tu carpeta app/pages:

Cada archivo también tiene algún código base en el:

Esto también sirve como una guía para nuevos desarrolladores para que puedan conocer la mejor práctica para estructurar su código. Aquí está el código TypeScript generado que maneja la lógica para la página de arriba:

Informe de Errores

Ionic 2 ahora viene con una herramienta de informe de errores para el front-end. Esto significa que en cualquier momento que haya un error con tu código, Ionic abrirá una ventana modal justo en la misma vista previa de la app. Esto hace bastante sencillo para desarrolladores enterarse de errores mientras estos ocurren dentro de la app.

Scripts de Aplicación Ionic

Los Scripts de Aplicación Ionic son una colección de scripts de construcción para proyectos Ionic. Previamente, Ionic usaba Gulp para manejar su proceso de construcción.

Ionic 2 viene con unos cuantos de estos scripts para hacer más fácil completar tareas comunes de desarrollo. Esto incluye cosas como transpirar el código TypeScript a ES5, sirviendo a la app para pruebas en el navegador, o ejecutándola en un dispositivo específico.

Puedes encontrar los scripts por defecto en el archivo del proyecto package.json:

Nuevos Componentes

Los componentes son los bloques de construcción UI en Ionic. Los ejemplos incluyen botones, tarjetas, listas, y campos de texto. Muchos nuevos componentes han sido agregados a Ionic 2, y en esta sección echaremos un vistazo a algunos de estos.

Diapositivas

Si quieres que tu app tenga un tutorial para los usuarios primerizos, el componente Diapositivas hace sencillo crear uno. Este componente te permite crear diseños basados en páginas que el usuario puede deslizar para leer todo acerca de tu app.

Hoja de Acción

Las hojas de acción son menús que de deslizan hacia arriba desde el fondo de la pantalla. Una hoja de acción es mostrada en la capa superior de la pantalla, así que tienes que rechazarla presionando en un espacio en blanco o selecciona la opción desde el menú. Esto es comúnmente usado para confirmaciones tales como cuando borras un archivo en tu dispositivo iOS.

Segmentos

Los segmentos son como pestañas. Son usados para agrupar contenido relacionado de tal manera que el usuario pueda solo ver los contenidos del segmento actualmente seleccionado. Los segmentos son usados comúnmente con listas para filtrar elementos relacionados.

Toast

Los Toasts son la versión sutil de las alertas. Son comúnmente usados para informar al usuario de que algo ha sucedido que no requiere ninguna acción del usuario. Son mostradas frecuentemente en la parte superior o inferior de la página de manera que no interfieran con el contenido actualmente mostrado. También desaparecen después de un número específico de segundos.

Barra de Herramientas

Una Barra de Herramientas es usada como contenedor para información y acciones que están ubicadas en el encabezado o pie de página de la app. Por ejemplo, el título de la pantalla actual, botones, campos de búsqueda y segmentos son contenidos frecuentemente en una barra de herramientas.

Fecha y Hora

El componente DateTime es usado para mostrar una UI para seleccionar fechas y horas. La UI es similar a la generada cuando se usa el elemento datetime-local, la única diferencia siendo que este componente viene un una API JavaScript fácil de usar. Previamente, Ionic no tenía un componente para trabajar con fechas y horas. Podías usar el selector de fecha nativo del navegador o instalar un complemento.

Botones Flotantes de Acción

Los Botones Flotantes de Acción (FABs, Floating Action Buttos) son botones que están fijos en un área específica de la pantalla. Si alguna vez has usado la app de Gmail, el botón para componer un nuevo mensaje es un botón flotante de acción. No están limitados a una sola acción porque estos pueden expandirse y mostrar otros botones flotantes de acción cuando son presionados.

Para más información en relación a los nuevos componentes, revisa la documentación sobre componentes.

Nuevas Características y Mejoras

Ionic 2 también está empacada con nuevas características y mejoras. Estas son mayormente debido a su transición a Angular 2 y TypeScript.

API de Animaciones Web

Un beneficio de cambiar a Angular 2 es el nuevo sistema de animación de Angular, construido sobre la API de Animaciones Web. Nota que la API de Animaciones Web no es soportada en todos los navegadores---es por eso que necesitas usar Crosswalk para instalar un navegador soportado junto con tu app. La única desventaja de esto es que hará más grande el tamaño de instalación. Otra opción es usar un polyfill.

Desempeño

Las apps creadas con Ionic 2 son más rápidas que aquellas creadas con Ionic 1. Aquí está el porqué:

  • Angular 2: la manipulación DOM y desempeño JavaScript ha mejorado mucho en Angular 2. Puedes revisar esta tabla si quieres aprender sobre los específicos. Otro beneficio que viene con Angular 2 es la compilación adelantada---plantillas que son pre-compiladas usando una herramienta de construcción en vez de ser compiladas mientras la app se ejecuta en el navegador. Esto hace que la app inicie más rápido porque no hay necesidad de compilar las plantillas al vuelo.
  • Desplazamiento Nativo: Ionic ya no usa desplazamiento JavaScript. En su lugar, ahora usa desplazamiento nativo para WebViews soportados. También está ahora habilitado en todas las plataformas (a diferencia de solo ser soportado en Android en Ionic 1). Además del desplazamiento nativo, también está el Desplazamiento Virtual, que permite el desplazamiento en una gran lista de elementos con muy poco impacto en el desempeño. Estos dos cambios agregan para un desempeño de desplazamiento más suave.
  • Web Workers: Los Web Workers te permiten ejecutar scripts en el fondo, aislados del hilo que ejecuta la página web. Ionic 2 implementa web workers a través de su componente ion-img. Usando este componente en lugar del elemento img estándar te permite delegar las peticiones HTTP para recolectar las imágenes a un Web Worker. Esto hace la carga de imágenes más rápida, especialmente dentro de listas grandes. El componente ion-img también maneja la carga lenta, que solo pedirá y generará las imágenes mientras se vuelven visibles en el viewport del usuario.

Ionic Native

Ionic Native es el equivalente de ngCordova para Ionic 2. Ambos actúan como envoltorios para los componentes Cordova para implementar funcionalidad nativa (ej. Cámara, Geolocalización). Incluso puedes usar Ionic Native en tu app Ionic 1 si quieres. La principal diferencia es que Ionic Native te permite escribir tu código usando características ES6 y sintaxis TypeScript. Esto hace más fácil trabajar en Ionic 2 ya que ya usa TypeScript por defecto. Aquí hay un ejemplo de cómo implementar el complemento de Cámara Cordova en ngCordova:

Y aquí está como se hace usando Ionic Native:

Documentación

La documentación ha mejorado mucho. Especialmente me gusta el hecho de que ahora hay más vistas previas diferentes para cada componente en cada plataforma. Esto da a los desarrolladores una muy buena idea de cómo se vería su app. ¡Todo esto sin que el desarrollador escriba una sola línea de código!

¿Deberías Usar Ionic 2?

Al momento de escribir este artículo, Ionic 2 ha sido liberado. Esto significa que está listo para ser usado para apps de producción. Considerando todas las nuevas características, herramientas y beneficios que vienen con Angular 2 y TypeScript, la única cosa que te detendrá de usar Ionic 2 es el estado de tu proyecto.

Si solo estás empezando un nuevo proyecto, aún puedes usar Ionic 1 si tu y tus colegas solo están familiarizados con Angular 1 y tu proyecto necesita ser completado lo más pronto posible. Pero si se te ha dado un amplio tiempo para el proyecto, deberías considerar usar Ionic 2. Habrá un poco de curva de aprendizaje, y también encontrarás algunos problemas porque no está probado en batalla como Ionic 1, pero vale el esfuerzo por las interesantes características y mejoras de Ionic 2.

Si ya comenzaste tu proyecto actual con Ionic 1, probablemente quieras apegarte a Ionic 1 y evitar una re-escritura mayor. No te preocupes mucho sobre el soporte, mejoras y corrección de errores para Ionic 1---los desarolladores de Ionic se han comprometido a soportar Ionic 1 por un largo tiempo. Qué tanto tiempo no está claro. Por lo menos, va a ser soportado por un par de años después de que la versión estable de Ionic 2 sea liberada. Pero también necesitamos tener en mente que Ionic es una proyecto de código abierto con más de 200 contribuyentes. Así que mientras la gente continúe usándolo, siempre podemos esperar alguna forma de soporte por parte de la comunidad.

Conclusión

¡Eso es todo! En este artículo has aprendido todo sobre Ionic 2. Específicamente, has aprendido sobre las diferencias significativas entre Ionic 2 y su predecesor. También hemos echado un vistazo a las nuevas características para Ionic 2, y si deberías usarlo para tus futuros proyectos o no. En un tutorial futuro, vamos a poner este conocimiento en práctica creando una app Ionic 2. ¡Mantente al pendiente!

Si quieres aprender más sobre Ionic 2, asegúrate de revisar los siguientes recursos:

Y por supuesto, tenemos un curso a profundidad sobre Ionic 2 que puedes seguir, ¡justo aquí en Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.