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.

1npm 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:

1$ ionic start

Nos pedirá un nombre:

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

Y una plantilla de inicio, seleccionamos blank:

1Let's pick the perfect starter template!
2 
3Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass
4this prompt next time, supply template, the second argument to ionic start.
5 
6? Starter template:
7> blank    | A blank starter project
8  sidemenu | A starting project with a side menu with navigation in the content area
9  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:

1? 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:

1<ion-header>
2 <ion-toolbar>
3   <ion-title>
4     Ionic Blank
5   </ion-title>
6 </ion-toolbar>
7</ion-header>
8 
9<ion-content>
10 <div class="ion-padding">
11   The world is your oyster.
12   <p>If you get lost, the <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
13 </div>
14</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:

1<!-- Cabecera -->
2<ion-header>
3 <ion-toolbar color="dark">
4   <ion-title>
5     Ionic Home
6   </ion-title>
7 </ion-toolbar>
8</ion-header>
9<!-- Contenido de la page -->
10<ion-content>
11 <!-- Componente Ionic Card -->
12 <ion-card>
13     <!-- Componente Ionic Slide -->
14     <ion-slides color="medium" pager="true">
15         <ion-slide>
16           <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" alt="">
17         </ion-slide>
18         <ion-slide>
19           <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" alt="">
20         </ion-slide>
21       </ion-slides>
22   <ion-card-header>
23     <ion-card-subtitle>Card + slider</ion-card-subtitle>
24     <ion-card-title>¡Rápido y eficaz!</ion-card-title>
25   </ion-card-header>
26   <ion-card-content>
27     ¡Los componentes de Ionic son la leche!
28   </ion-card-content>
29 </ion-card>
30 <!-- Componente Ionic Botón -->
31 <ion-button (click)="mensaje()" expand="full" color="danger">¡No pulses el botón!</ion-button>
32</ion-content>

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

1export class HomePage {
2 
3 constructor() {}
4 
5 mensaje(){
6   alert('¡Te dije que no pulses!')
7 }
8}

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:

1$ npm install create-react-app

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

1$ create-react-app ionicReact --typescript

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

1$ 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:

1$ 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.

1import '@ionic/core/css/core.css';
2import '@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:

1import {
2  IonApp,
3  IonHeader,
4  IonContent
5} 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:

1import React from 'react';
2import './App.css';
3 
4import {
5 IonApp,
6 IonHeader,
7 IonToolbar,
8 IonContent,
9 IonTitle,
10 IonCard,
11 IonCardHeader,
12 IonCardTitle,
13 IonCardSubtitle,
14 IonCardContent,
15 IonSlides,
16 IonSlide,
17 IonButton
18} from '@ionic/react';
19 
20const App: React.FC = () => {
21 return (
22   <IonApp>
23       <IonHeader>
24         <IonToolbar color="dark">
25           <IonTitle>Ionic Home</IonTitle>
26         </IonToolbar>
27       </IonHeader>
28       <IonContent>
29         <IonCard>
30           <IonSlides>
31             <IonSlide>
32               <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" />
33             </IonSlide>
34             <IonSlide>
35               <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" />
36             </IonSlide>
37           </IonSlides>
38           <IonCardHeader>
39             <IonCardSubtitle>Card + slider</IonCardSubtitle>
40             <IonCardTitle>¡Rápido y eficaz!</IonCardTitle>
41           </IonCardHeader>
42           <IonCardContent>¡Los componentes de Ionic son la leche!</IonCardContent>
43         </IonCard>
44         <IonButton expand="full" color="danger">¡No pulses el botón!</IonButton>
45       </IonContent>
46     </IonApp>
47 );
48}
49 
50export 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:

1$ npm install @vue/cli

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

1$ vue create ionic-vuejs

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

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

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

1$ 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:

1$ 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:

1import Vue from 'vue'
2import App from './App.vue'
3 
4import IonicVue from '@ionic/vue';
5import '@ionic/core/css/core.css';
6import '@ionic/core/css/ionic.bundle.css';
7 
8Vue.config.productionTip = false
9 
10Vue.use(IonicVue);
11 
12new Vue({
13 render: h => h(App),
14}).$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:

1<template>
2    <ion-app>
3    <!-- Cabecera -->
4    <ion-header>
5        <ion-toolbar color="dark">
6            <ion-title>
7                Ionic Home
8            </ion-title>
9        </ion-toolbar>
10    </ion-header>
11    <!-- Contenido de la page -->
12    <ion-content>
13        <!-- Card -->
14        <ion-card>
15            <!-- Slide -->
16            <ion-slides color="medium" pager="true">
17                <ion-slide>
18                    <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" alt="">
19                </ion-slide>
20                <ion-slide>
21                <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" alt="">
22                </ion-slide>
23            </ion-slides>
24            <ion-card-header>
25                <ion-card-subtitle>Card + slider</ion-card-subtitle>
26                <ion-card-title>¡Rápido y eficaz!</ion-card-title>
27            </ion-card-header>
28            <ion-card-content>
29            ¡Los componentes de Ionic son la leche!
30            </ion-card-content>
31        </ion-card>
32        <!-- Botón -->
33        <ion-button expand="full" color="danger">¡No pulses el botón!</ion-button>
34    </ion-content>
35    </ion-app>
36</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.