馃 Introducci贸n

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

馃嵖 驴Qu茅 es Ionic?

Ionic es una 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.

馃嵖 Historia de Ionic

馃嵖 驴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:

馃嵖 驴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?

Con esta combinaci贸n de tecnolog铆as podemos exportar a diferentes destinos como:

馃嵖 驴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.

Vista general de Ionic
comments powered by Disqus