¿Qué es Ionic?
Ionic es un un framework de desarrollo de aplicaciones mediante JavaScript creado por una compañía con el mismo nombre (ionic).
Los componentes web son elementos html personalizados creados mediante vanilla JavaScript. Ionic provee una larga lista de estos componentes para su utilización con la ventaja de que por default ya vienen con un diseño que los hace ver muy profesionales. Estos componentes ademas de tener un diseño bastante profesional, se adaptan a la plataforma en la que se están utilizando de forma que el diseño de sus elementos luce diferente y al mismo tiempo acorde a una plataforma Android o iOS, según se se este utilizando.
Con estos componentes web podemos crear aplicaciones que lucen nativas de forma muy sencilla.
Ionic y React permiten combinarse y crear aplicaciones web y móviles simultáneamente. Para ello hay que entender algunos conceptos que iremos viendo a través de las lecciones.
Elementos que vamos a aprender
- Fundamentos de React y Ionic.
- Introducción a los fundamentos de Ionic.
- Combinar el uso de Ionic y React.
- Crear una aplicación móvil nativa en iOS y Android.
- Buscar errores dentro de aplicaciones ionic.
- Cambiar el diseño de una aplicación ionic.
- Componentes provistos por ionic.
- Manejo de una sesión y los estados de una aplicación.
- Utilizar características nativas del dispositivo como la cámara.
- Optimización de una aplicación ionic.
- Publicar una aplicación móvil dentro de la Android Store.
Historia de Ionic
- Fue creado originalmente en el 2013 para funcionar sobre Angular 1, utilizaba el proyecto Cordova.
- En el 2016 se actualizó a la versión 2 para utilizar Angular 2.
- En el 2017 se liberó la versión 3 que permitía crear aplicaciones móviles y Aplicaciones Web Progresivas (PWA) mediante el uso de Angular 2.
- En el 2019 se liberó la versión 4 que es multiplataforma, utiliza Capacitor y web components, por lo cual no requiere de Angular para su uso.
¿Qué es Capacitor?
Capacitor es una herramienta que permite convertir cualquier aplicación web en una aplicación multiplataforma (para iOS, Android, Escritorio o Web). Capacitor puede ser considerado una capa que envuelve una serie de tecnologías (HTML, CSS y JS) es posible producir aplicaciones nativas desde las diferentes App Store.
En versiones previas, capacitor solo proveía estos elementos html dentro de Angular, pero desde que ionic y capacitor son proyectos diferentes, se ha podido utilizar dichos componentes fuera de Angular y utilizar capacitor como un proyecto independiente.
¿Por qué utilizar capacitor?
Mediante ionic podemos crear aplicaciones de forma sencilla utilizando componentes listos para su uso que tienen un excelente diseño. De esta forma no tenemos que gastar tiempo en crear un html complejo y ademas preocuparnos por crear estilos que se adecuen a este. Es posible incluso usar ionic sin capacitor, y crear una aplicación de forma sencilla de la misma manera que se puede utilizar capacitor sin ionic, es decir producir una app multiplataforma con (HTML, JS y CSS) sin siquiera tener que aprender acerca de desarrollo web móvil. Solo se toma lo que ya conoces y con ello se crea una aplicación que puede ser distribuida desde las diferentes App Stores.
Sin embargo al combinar ionic y capacitor se toma lo mejor de ambos mundos:
- La generación de html/css profesional que se adapta al dispositivo en uso mediante (ionic).
- La generación de aplicaciones multiplataforma sin tener que programar en lenguaje nativo (capacitor)
¿Por qué utilizar React con Ionic?
La realidad es que no se requiere utilizar React o ningún otro framework para echar mano de Ionic y Capacitor. El uso de Ionic+Capacitor no requiere del uso de React así como ningún otro framework del mercado (Angular, Vue, etc).
Sin embargo la realidad es que el uso de un framework para crear aplicaciones basadas en JS simplifica mucho el desarrollo de aplicaciones, especialmente con el manejo de la lógica y el control de estados que proporciona React en este caso.
¿En qué consiste una una aplicación Ionic?
- Una aplicación en ionic consiste de html, css y javascript.
- Un framework javascript como React para el control de la lógica (opcional).
- El componente de framework ionic.
- Capacitor para el desarrollo de Android y iOS.
Con esta combinación de tecnologías podemos exportar a diferentes destinos como:
- iOS
- Android
- PWA (Progressive Web Apps)
- Electronjs (Escritorio)
¿Cómo se genera una aplicación con Ionic?
Capacitor toma una aplicación ya creada y la envuelve dentro de una aplicación nativa, es decir no compila el código a código nativo.
Esta aplicación nativa que contiene la aplicación construida mediante html, js, css, funciona como un host en el cual la aplicación creada con ionic opera, este entorno es llamado webview. Para que el webview tenga acceso a las funcionalidades del dispositivo, capacitor provee el acceso a estas como pueden ser el uso de la cámara.
Es necesario aclarar que las aplicaciones basadas en webview no llegan a tener el performance de una aplicación nativa. Pero en la mayoría de las aplicaciones de uso general, esta diferencia no es siquiera visible.
Ionic vs React Native vs Flutter
Ya se mencionó que ionic permiten crear aplicaciones atractivas utilizando html, css y js. El poder utilizar este mismo stack para crear cualquier tipo de aplicación es la ventaja principal de ionic. Sin embargo existen en el mercado otras opciones para crear aplicaciones móviles.
La primera opción es React Native, a diferencia de ionic compila el código HTML y CSS en JS, por lo que genera una aplicación totalmente JS. Si bien no llega al performance de una aplicación nativa, si se acerca lo suficiente.
La segunda opción es Flutter que es un framework que utiliza el lenguaje Dart para crear aplicaciones nativas, pero a diferencia de ionic y React Native compila a lenguaje nativo, por lo cual el performance es superior a las tecnologías basadas en el webview.
