Ionic 4: Angular, React y VueJS

¿Qué es el Framework Ionic?

Si estás buscando una tecnología cross-platform para aplicaciones web seguramente hayas oído algo acerca de Ionic Framework.

En su última iteración (versión 4) se abrió a otras tecnologías, se considera que es la independencia total del framework base (anteriormente éste únicamente podía ser Angular).

Dado que los componentes de Ionic Framework son ahora encapsulados como Web Components, ya no es necesario desarrollar atado a un framework base concreto.

Los web components funcionan con cualquier framework, incluso se podría no utilizar ningún Framework, si así se desease. Esta cuarta versión abrió las puertas a que en un futuro se puedan crear aplicaciones en Vue o en React utilizando los Web Components de Ionic.

Antes de continuar, si quieres seguir el tutorial debes asegurarte de que tienes instalado Node.js en tu entorno.

Cómo instalar Ionic CLI

Ionic nos ofrece una manera muy sencilla de configurar nuestro proyecto utilizando su CLI con varios servicios, como inicializar proyectos y añadir componentes, entre otros. npm install -g ionic Actualmente la creación de proyectos con angular CLI está limitada a Angular, sin embargo veremos más adelante cómo incorporar este framework a un proyecto React o Vue. En todo proyecto Ionic encontrarás, en su raíz, un archivo llamado ionic.config.json donde podrás configurarlo.

Crear un proyecto Ionic con Angular

Crearemos el proyecto Ionic con Angular utilizando la siguiente línea de comando:

$ ionic start
 

Nos pedirá un nombre:

Every great app needs a name!
 
Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply
name, the first argument to ionic start.
 
? Project name: ionicAngular

Y una plantilla de inicio, seleccionamos blank:

Let's pick the perfect starter template!
 
Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass
this prompt next time, supply template, the second argument to ionic start.
 
? Starter template:
> blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  tabs     | A starting project with a simple tabbed interface

Por último, nos solicitará si queremos conectar nuestro proyecto a AppFlow, para este tutorial no será necesario:

? Install the free Ionic Appflow SDK and connect your app? (Y/n) n

Ionic CLI ha generado una plantilla con una home page básica, si nos dirigimos a src/app/home.page.html observamos el siguiente contenido:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Ionic Blank
   </ion-title>
 </ion-toolbar>
</ion-header>
 
<ion-content>
 <div class="ion-padding">
   The world is your oyster.
   <p>If you get lost, the <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
 </div>
</ion-content>

Vamos a utilizar algunos de los componentes de ionic para construir una home en condiciones, eliminamos el contenido que ha generado y lo sustituimos por el siguiente:

<!-- Cabecera -->
<ion-header>
 <ion-toolbar color="dark">
   <ion-title>
     Ionic Home
   </ion-title>
 </ion-toolbar>
</ion-header>
<!-- Contenido de la page -->
<ion-content>
 <!-- Componente Ionic Card -->
 <ion-card>
     <!-- Componente Ionic Slide -->
     <ion-slides color="medium" pager="true">
         <ion-slide>
           <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" alt="">
         </ion-slide>
         <ion-slide>
           <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" alt="">
         </ion-slide>
       </ion-slides>
   <ion-card-header>
     <ion-card-subtitle>Card + slider</ion-card-subtitle>
     <ion-card-title>¡Rápido y eficaz!</ion-card-title>
   </ion-card-header>
   <ion-card-content>
     ¡Los componentes de Ionic son la leche!
   </ion-card-content>
 </ion-card>
 <!-- Componente Ionic Botón -->
 <ion-button (click)="mensaje()" expand="full" color="danger">¡No pulses el botón!</ion-button>
</ion-content>

Además, añadimos al archivo src/app/home.page.ts el siguiente método:

export class HomePage {
 
 constructor() {}
 
 mensaje(){
   alert('¡Te dije que no pulses!')
 }
}

Por último, ejecutamos el siguiente comando a nivel raíz del proyecto:

$ ionic serve
 

Se desplegará el proyecto en localhost, puerto 8100 (por defecto), podemos especificar el puerto con la bandera --port:

$ ionic serve --port=8200
 

Se mostrará la home de nuestro proyecto. ¡Queda genial! Ahora veamos cómo podemos replicar esta home en React y Vue.

Cómo hacerlo con React

Comenzaremos creando un proyecto de React, para ello necesitamos el script de creación de proyectos de React:

$ npm install create-react-app
 

A continuación, llamamos al script para crear la aplicación:

$ create-react-app ionicReact --typescript
 

Desplegamos el proyecto con el comando npm start a nivel raíz del proyecto :

$ npm start
 

Ahora, vamos a instalar Ionic en el proyecto React, para ello vamos a instalar los siguientes paquetes:

• @ionic/react
• @ionic/core
• react-router Ejecutamos el siguiente comando:

$ npm install @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom

Importamos el CSS de ionic en el punto de entrada principal de la aplicación, en el archivo index.tsx.

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

Ahora en cualquier clase de la aplicación podemos llamar a cada componente individualmente, por ejemplo, los elementos básicos de una page en ionic, como la generada anteriormente se verían de la siguiente forma:

import {
  IonApp,
  IonHeader,
  IonContent
} from '@ionic/react';

Vamos a recrear la home que hemos realizado con Ionic + Angular pero utilizando React. Nos dirigimos al archivo app.tsx y añadimos el siguiente código:

import React from 'react';
import './App.css';
 
import {
 IonApp,
 IonHeader,
 IonToolbar,
 IonContent,
 IonTitle,
 IonCard,
 IonCardHeader,
 IonCardTitle,
 IonCardSubtitle,
 IonCardContent,
 IonSlides,
 IonSlide,
 IonButton
} from '@ionic/react';
 
const App: React.FC = () => {
 return (
   <IonApp>
       <IonHeader>
         <IonToolbar color="dark">
           <IonTitle>Ionic Home</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
         <IonCard>
           <IonSlides>
             <IonSlide>
               <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" />
             </IonSlide>
             <IonSlide>
               <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" />
             </IonSlide>
           </IonSlides>
           <IonCardHeader>
             <IonCardSubtitle>Card + slider</IonCardSubtitle>
             <IonCardTitle>¡Rápido y eficaz!</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>¡Los componentes de Ionic son la leche!</IonCardContent>
         </IonCard>
         <IonButton expand="full" color="danger">¡No pulses el botón!</IonButton>
       </IonContent>
     </IonApp>
 );
}
 
export default App;

Ahora nuestra home es idéntica a la que hicimos con angular. Por último, vamos a realizar la misma implementación pero con VueJS.

Cómo hacerlo con VueJS

En primer lugar, instalamos Vue CLI para generar un nuevo proyecto Vue:

$ npm install @vue/cli
 

De esta forma podemos crear el proyecto Vue con el siguiente comando:

$ vue create ionic-vuejs
 

Aparecerá una selección de opciones, seleccionamos las opciones por defecto:

Vue CLI v3.7.0
┌───────────────────────────┐
│  Update available: 3.8.2  │
└───────────────────────────┘
? Please pick a preset:
> default (babel, eslint)
  Manually select features

Para ejecutar el proyecto nos dirigimos a la carpeta raíz del proyecto y ejecutamos:

$ npm run serve
 

Tenemos una aplicación Vue desplegada en nuestro navegador:

Ahora vamos a instalar las dependencias para poder utilizar Ionic en este proyecto, necesitaremos los paquetes:

• @ionic/core
• @ionic/vue
• vue-router La línea de comando será la siguiente:

$ npm install @ionic/core @ionic/vue vue-router
 

A continuación, debemos importar Ionic en el proyecto, para ello hay que introducir el siguiente código en main.js:

import Vue from 'vue'
import App from './App.vue'
 
import IonicVue from '@ionic/vue';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';
 
Vue.config.productionTip = false
 
Vue.use(IonicVue);
 
new Vue({
 render: h => h(App),
}).$mount('#app')

Como hicimos con React, nos traemos los estilos de Ionic y además le decimos a Vue que utilice el plugin @ionic/vue con Vue.use().

Por último, vamos hacer que la aplicación presente el mismo aspecto que las aplicaciones realizadas hasta ahora. Nos dirigimos a App.vue y añadimos el código que se muestra a continuación:

<template>
    <ion-app>
    <!-- Cabecera -->
    <ion-header>
        <ion-toolbar color="dark">
            <ion-title>
                Ionic Home
            </ion-title>
        </ion-toolbar>
    </ion-header>
    <!-- Contenido de la page -->
    <ion-content>
        <!-- Card -->
        <ion-card>
            <!-- Slide -->
            <ion-slides color="medium" pager="true">
                <ion-slide>
                    <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" alt="">
                </ion-slide>
                <ion-slide>
                <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" alt="">
                </ion-slide>
            </ion-slides>
            <ion-card-header>
                <ion-card-subtitle>Card + slider</ion-card-subtitle>
                <ion-card-title>¡Rápido y eficaz!</ion-card-title>
            </ion-card-header>
            <ion-card-content>
            ¡Los componentes de Ionic son la leche!
            </ion-card-content>
        </ion-card>
        <!-- Botón -->
        <ion-button expand="full" color="danger">¡No pulses el botón!</ion-button>
    </ion-content>
    </ion-app>
</template>

¡Vualá!, la home se verá idéntica a las que habíamos hecho.

Aprende más sobre Ionic

Como hemos podido ver, los resultados son idénticos, por lo tanto, podemos desarrollar en cualquiera de las tres tecnologías, elegir en cual nos desenvolvemos cómodamente y utilizar este fantástico framework. Para seguir aprendiendo sobre este framework, te recomendamos consultar la página de nuestrp curso completo de Ionic.