En este artículo vamos a presentar Ionic 4, la nueva versión del framework más popular para el desarrollo de aplicaciones híbridas. Te contaremos las novedades de esta versión y te explicaremos cómo instalar Ionic y cómo crear un primer proyecto, así como visualizarlo en tu entorno de desarrollo.

Ionic 4 viene con importantes novedades, que llevan el framework a un siguiente nivel, más versátil en todos los sentidos, gracias a la incorporación de nuevas tecnologías, flujos de desarrollo. Sin duda, con esta actualización el framework alcanza un elevado grado de madurez, aportando a desarrolladores nuevas herramientas con las que hacer asombrosas aplicaciones orientadas a dispositivos.

Breve repaso sobre qué es Ionic 4

Para quien no conoce Ionic hay que decir que es un framework que permite el desarrollo de aplicaciones con tecnologías web, es decir, estándares abiertos altamente conocidos por la comunidad: HTML, CSS y Javascript. Con Ionic y una única base de código puedes compilar apps que funcionan en distintas plataformas, como iOS y Android. Pero además es posible compilar los proyectos también a lo que se conoce como PWA (Progressive Web Apps) o aplicaciones de escritorio basadas en Electron.

Una de las ventajas fundamentales de Ionic y el desarrollo híbrido en general es que, al tratarse de tecnologías de desarrollo conocidas y usadas en el entorno web, cualquier desarrollador que trabaje habitualmente en Internet puede reutilizar todo el conocimiento atesorado durante años. Gracias a ello y con una curva de aprendizaje bastante leve, una persona con experiencia en desarrollo frontend es capaz de desarrollar aplicaciones móviles, que se podrán poner a disposición de los usuarios en los stores de apps (como App Store de Apple o Google Play).

Este artículo se compone de 4 vídeos, en los que podrás aprender a usar Ionic 4 y conocer sus características y novedades. También veremos cómo instalar el framework y cómo comenzar a usarlo. Por último nos dedicaremos a conocer la oferta de servicios y herramientas de Ionic Pro. Te resumimos el contenido en el texto a continuación, junto con los vídeos embebidos.

Presentación de Ionic 4

Comenzamos explicando qué es Ionic 4, dando un énfasis especial en las novedades de esta versión lanzada recientemente.

Aunque en el vídeo se ofrece mucha información interesante, en síntesis, estas son las novedades que vamos a encontrar en la actual versión de esta plataforma para desarrollo de apps.

• Ionic 4 ahora ofrece los componentes de UI, optimizados para móviles, por medio de Web Components. La ventaja de Web Components es que es un estándar Javascript, con lo que se asientan sobre código nativo, que alcanza un mayor rendimiento en general. Pero además, al tratarse de Javascript, es posible usar Web Components dentro de cualquier framework frontend. Este detalle nos lleva directamente a la ventaja relatada siguiente punto
• Ionic 4 ha eliminado las dependencias con cualquier framework Javascript en particular. Ya no es necesario usar Angular, si no quieres. Podrás usar React, Vue y otras librerías si así lo prefieres, o incluso Javascript nativo, sin el uso de un framework en concreto.
• Incorporan la librería Stencil (Stencil.JS) para el desarrollo de los componentes de UI. Stencil está creada por el mismo equipo de Ionic, lo que nos asegura un rendimiento optimizado para correr en móviles y en apps híbridas con Ionic. Stencil podemos decir que es transparente para el desarrollador. A todas luces el desarrollador usará componentes que no sabe en principio si son custom elements (componentes personalizados con Web Components nativo) realizados con un framework o librería en concreto. No hace falta que aprendas Stencil si no lo deseas, puesto que tus propios componentes de aplicación los podrás realizar con esta librería o con tu framework de preferencia.
• Ahora Ionic ha desarrollado una nueva capa para conversar con la parte nativa de los dispositivos. Su nombre es Capacitor y sustituye a lo que antes nos ofrecían los plugins de Cordova. Aunque aún se puede usar Cordova si se desea, gracias a Capacitor obtenemos un mayor rendimiento y eliminamos dependencias con sistemas de otras organizaciones no vinculadas a Ionic. En el momento de escribir este artículo ya hay bastantes plugins para comportamientos nativos dentro de Capacitor, pero en muchos casos todavía tendremos que ir acudiendo a Cordova cuando ese componente todavía no exista en este sistema.

Instalación y de Ionic4 y primer proyecto Ionic

En la segunda entrega vamos a estudiar principalmente la instalación del framework, creando una primera aplicación de ejemplo.

Poner Ionic 4 en funcionamiento en nuestra máquina para comenzar a desarrollar es sencillo, pero requiere de una serie de programas adicionales que hay que instalar uno a uno. Por ejemplo es el caso de Android Studio para poder compilar a Android o XCode para quien desee compilar a app iOS. Durante este parcial de la clase podrás saber cuáles son los programas que necesitas.

En este vídeo además podrás ver cómo se crea una app desde cero, ayudados por el Ionic CLI. Veremos que el proyecto se puede crear vacío o con un template básico inicial. Usaremos la plantilla inicial más elaborada, lo que nos creará una app con el típico menú lateral y varias pestañas para navegación entre secciones. Pondremos el proyecto en funcionamiento, observando que durante la mayoría de la etapa de desarrollo trabajaremos sobre el mismo navegador.

Arquitectura de proyecto Ionic 4, usando con Angular

Aunque no es necesario usar Angular para desarrollar con Ionic 4, lo cierto es que basarnos en cualquier framework Javascript nos ahorrará mucho tiempo, ya que no necesitaremos entretenernos con el desarrollo de muchas partes de la aplicación que ya nos dan hechas los frameworks frontend, por ejemplo:

• Gestionar el sistema de routing,
• Tener toda la potencia del data-binding,
• Disponer de un sistema elaborado de empaquetado de dependencias y código en general, etc.
• En resumen, ahora podemos considerar a Ionic 4 como un framework de UI y muchas de las patas de un proyecto las tendremos que sacar desde nuestro framework o librería frontend de preferencia.

A lo largo del vídeo, ya dentro del editor de código, observaremos cuál es la distribución de carpetas en un proyecto inicial y la explicaremos de manera resumida, viendo algunos ejemplos de archivos representativos.

Explicando Ionic Pro

En esta parte final de la clase veremos el conjunto de servicios que nos ofrece Ionic Pro. Es una suite de utilidades listas para usar, que resuelven necesidades comunes en desarrolladores de Apps, como la parte del reporte de errores, la compilación de proyectos, el despliegue en vivo de nuevas características, etc.

La suite de servicios Ionic Pro es solamente opcional, no la necesitas para comenzar a usar Ionic, por lo que no debe asustarnos el hecho de que Ionic Pro sea de pago. Puedes quedarte tranquilo pues el framework que se usa para desarrollar para desarrollo de apps es completamente gratuito para cualquier uso (y así será siempre). En otras palabras, puedes aprovechar toda la potencia de Ionic 4 sin invertir nada.

En este vídeo también encontrarás la tanda de preguntas finales de la sesión, junto con algunos detalles sobre el Curso de Ionic 4 de EscuelaIT.

Conclusión

Como hemos podido entrever, construir una aplicación con Ionic 4 resulta en una experiencia muy agradable para el desarrollador. Gracias a Ionic disponemos de mucho trabajo adelantado, para comenzar por su enorme cantidad de interfaces de usuario listas para usar, que son capaces casi como si fuera magia, de adaptarse a las guías de diseño del dispositivo donde van a ejecutarse. Pero también por todo lo que no hemos llegado a ver en esta presentación, que es el acceso a los componentes nativos del dispositivo.

Ahora con Ionic 4 podemos desarrollar con nuestra librería de preferencia, de modo que el framework es capaz de adaptarse perfectamente a nuestras costumbres y preferencias de desarrollo. Es un motivo más para conocer y desarrollar apps con Ionic.