Marcos Cordova: Ionic vs. Framework7

En estos días, los desarrolladores web gobiernan el mundo. JavaScript se usa en todas partes donde se puede programar. Entre estas áreas, el desarrollo de aplicaciones móviles fue una de las primeras formas de expandirse: hace unos diez años, PhoneGap permitió la instalación de aplicaciones HTML y JavaScript para iOS y Android.

Desde entonces, la tecnología ha tenido sus altibajos: a pesar de la facilidad de desarrollo, estas aplicaciones obviamente eran bastante diferentes de las aplicaciones nativas. Vanilla HTML y JavaScript basado en navegador estaban dirigidos a navegadores, y no había forma de que migraran sin problemas a este nuevo campo.

Hasta el día de hoy, los principales problemas siguen siendo:

• Dificultades para adherirse al diseño y la animación nativos
• Efectos de transición de pantalla complejos
• Manejo de eventos táctiles
• Desempeño en listas grandes
• Posicionamiento de elementos fijos
• Adaptación para diferentes tamaños de pantalla
• Ubicaciones de elementos de control nativos (por ejemplo, la barra de estado de iOS)
• Adaptación a diferentes navegadores móviles

¿Por qué usar un marco para las aplicaciones de Cordova?

La tecnología Cordova a menudo se subestima debido a las aplicaciones que tienen los problemas anteriores. Los marcos tienen como objetivo compensarlos y llevar las aplicaciones HTML lo más cerca posible de las aplicaciones nativas, tanto en diseño como en rendimiento.

Veamos un par de ejemplos de aplicaciones híbridas. Están hechos con los dos marcos más exitosos actualmente, además de la interfaz de usuario de Onsen, que están configurados para facilitar la expansión de los desarrolladores web en el mundo moderno: Framework7 e Ionic.

Acerca del marco iónico

Ionic fue desarrollado por Drifty Co. en 2012 y está basado en Angular. Desde entonces, ha estado en desarrollo activo, recibiendo importantes inversiones y una sólida comunidad de desarrolladores. El sitio web oficial afirma que se han desarrollado millones de aplicaciones basadas en él.

Al momento de escribir este artículo, la versión más reciente es Ionic 3 basada en Angular 5. Ionic 4, que apunta a la flexibilidad e independencia de Angular, se encuentra en versión beta temprana.

Además del motor de interfaz de usuario, una maravillosa biblioteca de componentes y una interfaz para acceder a las funciones nativas del dispositivo, Ionic ofrece múltiples capacidades, servicios y utilidades adicionales.

El CLI iónico

La interfaz de línea de comandos de Ionic se utiliza para la inicialización de proyectos interactivos (es decir, un asistente), la generación de páginas y componentes y la ejecución de un servidor de desarrollo que le permite crear aplicaciones sobre la marcha y recargarlas en vivo. También proporciona integración con los servicios en la nube de Ionic.

Laboratorio y DevApp

Lab es el miniservicio extremadamente útil que le permite imitar el trabajo de la aplicación en diferentes plataformas en el navegador del desarrollador Ionic. DevApp lo ayuda a implementar rápidamente una aplicación en un dispositivo real.

Empaquetado, implementación y monitoreo

Ionic viene con un paquete de servicios web que simplifican y aceleran la creación, depuración, prueba y actualización de aplicaciones para probadores y usuarios.

Sin embargo, los planes de Ionic cambian a menudo. Algunos servicios previamente existentes, como Auth, Push, Analytics y View, se cerraron, lo que provocó una protesta de los suscriptores.

Creador

Este es el editor gráfico de arrastrar y soltar de Ionic para desarrollar interfaces funcionales.

Acerca de Framework7

Este marco fue desarrollado en 2014 por el estudio ruso iDangero. En última instancia, un desarrollador ha estado trabajando en el proyecto, sin incluir a varios colaboradores menores del repositorio de GitHub.

Originalmente, Framework7 consistía en el conjunto de componentes de la interfaz de usuario al estilo de iOS 7, recientemente lanzado en ese momento, del cual toma su nombre. Más tarde, se agregó un tema de Android y ambos temas se actualizaron para iOS y Material Design más recientes.

Recientemente, el desarrollo del proyecto se aceleró y se expandió de un conjunto de componentes a un marco completo para aplicaciones móviles, integrando tecnologías y herramientas populares.

El soporte de Framework7 y los ejemplos que usan Vue.js existen desde la versión 1, y la versión 3 también es compatible con React. Esto es lo que puede permitir que el proyecto compita seriamente con el Ionic más popular, que solo ofrece Angular y TypeScript.

Instalación y primer lanzamiento

Iónico

Para comenzar a trabajar con Ionic, instálelo con NPM:

 npm install -g ionic

Luego, seleccione la plantilla para la aplicación futura. El sitio web oficial de Ionic ofrece varias plantillas, o puede seleccionar una plantilla vacía para crear la aplicación desde cero con ionic start myApp blank .

Seleccionemos un diseño simple. Ejecute el siguiente comando:

 ionic start Todo tabs

Responda "Sí" cuando el instalador le pregunte "¿Le gustaría integrar su nueva aplicación con Cordova para apuntar a iOS y Android nativos?" Esto integrará automáticamente la aplicación con Cordova y la preparará para su implementación en plataformas móviles.

En el siguiente paso, el instalador nos ofrecerá conectarnos al Ionic Pro SDK. Responda "No" por ahora para mantener el ejemplo simple.

Instale el paquete @ionic/lab adicional para obtener la práctica interfaz de usuario de depuración: imitaciones en el navegador de dispositivos iOS, Android y Windows:

 cd Todo npm i --save-dev @ionic/lab

Ahora puede iniciar la aplicación en modo de depuración. Esto le permite desarrollar y depurar la aplicación en vivo en el navegador web:

 ionic lab

Como resultado, obtendrá varias direcciones útiles:

El servicio de depuración de Ionic Lab se inicia en el puerto 8200. La aplicación en sí se ejecuta en el puerto 8100 y el enlace Abrir pantalla completa de Ionic Lab conduce allí. La ventana del navegador con el Ionic Lab en ejecución se abre automáticamente.

Además, Ionic proporciona la dirección de la aplicación en la red local . Esto es extremadamente útil, ya que le permite abrir la aplicación en el navegador del dispositivo móvil, siempre que el dispositivo esté en la red local (por ejemplo, a través de Wi-Fi). Además, puede usar el botón Agregar a la pantalla de inicio para volver a abrir la aplicación en modo de pantalla completa. Esta es la forma más rápida de probar su aplicación en el dispositivo.

Otra forma es la aplicación Ionic DevApp, que se puede instalar en un dispositivo móvil y brinda acceso a la aplicación a través de la red local. Ofrece compatibilidad con complementos (Ionic Native) para acceder a funciones de dispositivos nativos y mostrar registros.

Marco7

Las herramientas de desarrollo de F7 son menos avanzadas que las de Ionic y la CLI de inicialización automática no está documentada. Sin embargo, el sitio web oficial proporciona varios repositorios de GitHub con proyectos de plantilla que lo ayudarán a comenzar a desarrollar.

Similar a la plantilla de pestañas en Ionic, F7 ofrece vistas con pestañas , pero usaremos una plantilla más funcional que integra Framework7 con React. El soporte para React se agregó en v3. Para eso, clona el repositorio de plantillas:

 git clone https://github.com/framework7io/framework7-template-react.git Todo

Cambie a la carpeta del proyecto, busque las dependencias e inicie el proceso:

 cd Todo npm install npm start

Los resultados de ejecución son similares a Ionic: obtiene un enlace local y un enlace dentro de su red para acceso instantáneo desde un dispositivo real:

Ahora puede abrir http://localhost:3000/ en un navegador. Framework7 no incluye emuladores de dispositivos incorporados, así que usemos el modo de dispositivo de Chrome DevTools para obtener un resultado similar:

Como puede ver, Framework7 es similar a Ionic en que tiene iOS y Material Design como sus dos temas estándar. El tema se selecciona en función de la plataforma.

Lamentablemente, a diferencia de una plantilla similar compatible con Vue.js en las plantillas oficiales de React, Webpack aún no está implementado y esto nos prohíbe usar Hot Module Replacement para actualizar aplicaciones rápidamente sin recargar la página. Aún así, puede usar la función de recarga en vivo predeterminada, que recarga la página cada vez que cambia el código fuente.

Configurando Córdoba

Para instalar aplicaciones en dispositivos y emuladores con Cordova, debe descargar y configurar herramientas de desarrollo para iOS y Android, así como la CLI de Cordova. Puede leer más sobre esto en nuestro artículo anterior y en el sitio web oficial de Cordova en las secciones Guía de la plataforma iOS y Guía de la plataforma Android.

Iónico

La experiencia demuestra que para resolver con éxito la mayoría de los problemas de Ionic, es suficiente la depuración basada en navegador con pruebas ocasionales en dispositivos reales.

A pesar de que acepta la integración para iOS y Android, e Ionic prepara la configuración requerida en el archivo config.xml y los recursos en la carpeta de resources , aún necesita conectar ambas plataformas a la aplicación con Cordova:

 cordova platform add ios cordova platform add android

Ahora puede iniciar la aplicación Cordova en emuladores "reales", instalarla en el dispositivo móvil e incluso enviarla a App Store y Google Play.

El siguiente comando instala la aplicación en su dispositivo iOS si está conectado por USB. De lo contrario, la aplicación se instalará en el simulador de iOS.

 cordova run ios

Lo más probable es que las herramientas de línea de comandos de Xcode le informen sobre la necesidad de configurar certificados de desarrollador. Deberá abrir el proyecto en Xcode y realizar las acciones requeridas. Esto solo debe hacerse una vez, y luego podrá ejecutar la aplicación con Cordova CLI.

A veces, iOS Simulator no se inicia automáticamente. En este caso, inícielo manualmente, por ejemplo a través de Spotlight.

El emulador de Android se puede iniciar de manera similar:

 cordova run android 

Tenga en cuenta que el comando cordova run inicia e instala la aplicación ya compilada , que no utiliza el servidor ionic serve / ionic lab , por lo que Live Reload no funcionará. Para desarrollar y depurar la aplicación en vivo, use el navegador en la red local o instale la aplicación Ionic DevApp.

La experiencia demuestra que para resolver con éxito la mayoría de los problemas de Ionic, es suficiente la depuración basada en navegador con pruebas ocasionales en dispositivos reales.

Marco7

La plantilla "React" Framework7 elegida anteriormente no proporciona automatización de configuración para Cordova, por lo que deberá agregar plataformas manualmente. Cree un proyecto Cordova en la subcarpeta cordova de su carpeta de proyecto:

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

La plantilla se basa en la aplicación Create React, por lo que para ejecutar el proyecto compilado en un entorno de Cordova, debe agregar la "homepage": "." configuración en el archivo ./package.json . Este archivo se puede encontrar en el nivel raíz del proyecto:

Compile el proyecto Framework7 y copie el resultado en el proyecto Cordova:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

Ahora puede iniciar la aplicación en un dispositivo o un emulador:

 cd cordova/ cordova run ios 

¡Estás listo! Esperemos que Framework7 alcance el estándar de desarrollo de Ionic y la conveniencia de configuración inicial.

Creación de listas de tareas

Iónico

¡Comencemos finalmente a crear la aplicación! Dado que se trata de una aplicación de tareas pendientes, la página principal (archivo src/pages/home/home.html ) contendrá la lista de tareas con la capacidad de "marcar como completadas" y "agregar nuevas".

Ionic ofrece los componentes <ion-list> y <ion-item> para listas. Primero, elimine la propiedad de padding del elemento <ion-content> para que la lista abarque toda la pantalla. En la lista, coloque el texto usando un elemento <ion-label> y agregue un elemento <ion-toggle> para marcar las tareas completadas.

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

Regrese a la pestaña del navegador con el servicio Ionic Lab ejecutándose. La aplicación se actualizó automáticamente:

¡Genial! Ahora mueva los datos de la tarea al objeto JS y configure su presentación HTML con Angular. Vaya al archivo src/pages/home/home.ts y cree la propiedad de tareas de la instancia de la clase HomePage :

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

Ahora puede hacer referencia a la matriz de tasks en código HTML. Utilice la construcción *ngFor Angular para crear iterativamente elementos de lista para cada elemento de matriz. El código se vuelve más pequeño:

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

Todo lo que queda es agregar el botón para crear nuevas tareas en el encabezado de la página. Para hacer esto, use los <ion-navbar> , <ion-buttons> , <button> y <ion-icon> :

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

Tenga en cuenta la construcción angular (click)="addTask()" . Como puede adivinar, agrega el controlador de toque al botón y llama al método addTask() para nuestro componente. Implementemos este método para abrir la ventana de diálogo del nombre de la tarea cuando se toca el botón.

Para ello necesita el componente AlertController Ionic. Para usar este componente, importe su tipo:

 import { AlertController } from 'ionic-angular';

Y especifíquelo en la lista de parámetros del constructor para la página:

 constructor(public alertCtrl: AlertController) { }

Ahora puede llamarlo en el método addTask() . Configúralo después del controlador. Puede crear y mostrar la ventana de diálogo con las siguientes llamadas:

 this.alertCtrl .create(/* options */) .present();

Especifique el encabezado del mensaje, la descripción del campo y dos botones en el objeto de options . El botón "Aceptar" agregará una nueva tarea a la matriz de tasks :

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

Después de agregar el elemento a la matriz this.tasks , el componente se reconstruirá de forma reactiva y se mostrará una nueva tarea en la lista.

El código de la página completa se ve así ahora:

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

Vuelva a instalar la aplicación en el dispositivo:

 cordova run ios

¡Eso es todo! No es tan difícil, ¿verdad? Ahora intentemos hacer lo mismo con Framework7.

Marco7

Las plantillas de Framework7 están hechas para mostrar todas las capacidades de los componentes, por lo que debe dejar solo la página src/components/pages/HomePage.jsx en los archivos src/components/App.jsx y src/routes.js , limpiar su contenido y elimine los comentarios de código adicionales.

Ahora crea la lista de tareas. Framework7 proporciona los componentes <List simple-list> y <ListItem> para esto. Para colocar un interruptor de finalización de tareas en él, agregue el componente <Toggle slot="after"/> . Recuerda importar todos estos componentes desde el módulo framework7-react . Ahora el código de la página se ve así:

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

Y la aplicación en sí se ve así:

Bastante buen comienzo. Intentemos sacar los datos estáticos del código HTML nuevamente. Para esto, use un componente inteligente en lugar del sin estado que teníamos. Importe la clase abstracta de Component de React:

 import React, { Component } from 'react';

Y escriba la matriz de tareas en la instancia de la variable de state :

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

Es probable que la aplicación real use un flujo de datos más abstracto, por ejemplo, con Redux o MobX, pero para un pequeño ejemplo, mantendremos el estado del componente interno.

Ahora puede usar la sintaxis JSX para crear iterativamente elementos de lista para cada tarea en la matriz:

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

Todo lo que queda es agregar el encabezado con el botón para crear una nueva tarea nuevamente. El elemento <Navbar> ya existe, así que agregue <Link iconOnly> al elemento <NavRight> :

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

En React, agrega controladores de toque utilizando la propiedad onClick y configurando el puntero de devolución de llamada en ella. Implemente el controlador para mostrar el cuadro de diálogo del nombre de la tarea.

Cada elemento en Framework7 tiene acceso a la instancia de la aplicación a través this.$f7 . Puede usar el método dialog.prompt() esta manera. Antes de cerrar el cuadro de diálogo, llame al método setState() del componente React y pásele la copia de la matriz anterior con un nuevo elemento. Esto actualizará la lista de forma reactiva.

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

Aquí está el código completo del componente:

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

Compruebe el resultado:

Todo lo que queda es reconstruir e implementar en el dispositivo:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

¡Hecho!

El código final para ambos proyectos está disponible en GitHub:

• ionic-todo-app
• framework7-react-todo-aplicación

Resultados

Ahora que ha visto el tutorial completo con cada marco Cordova. ¿Cómo se compara Framework7 con Ionic?

Configuración inicial

Ionic es mucho más fácil de instalar gracias a su CLI, mientras que F7 requiere más tiempo para seleccionar y configurar una plantilla o una instalación paso a paso desde cero.

Diversidad de componentes

Ambos marcos tienen un conjunto completo de componentes estándar maravillosamente diseñados en dos temas: iOS y Material Design. Ionic también ofrece estos elementos en el tema de Windows y en un enorme mercado de temas de usuario.

Además de imitar por completo el diseño y las animaciones nativos, se presta mucha atención a la optimización del rendimiento, lo que brinda resultados fantásticos: a menudo, es casi imposible distinguir las aplicaciones en cualquiera de los marcos de las nativas.

Framework7 proporciona una lista adicional de componentes más complejos y útiles, como Smart Select , Autocompletar , Calendario , Lista de contactos , Pantalla de inicio de sesión , Mensajes y Explorador de fotos . Por otro lado, Ionic ofrece una gran selección de componentes creados por el usuario.

Ecosistema y Comunidad

Ionic obviamente gana en estos parámetros gracias a su mayor vida útil, fuerte respaldo financiero y comunidad activa. La infraestructura de Ionic está en constante evolución: los servicios de soporte y las soluciones en la nube dan paso a otros nuevos y la cantidad de complementos sigue creciendo.

Framework7 es mejor que nunca, pero carece de apoyo de la comunidad.

Dependencias de terceros

Framework7 es más flexible con respecto a las soluciones de terceros. Su mayor fortaleza es probablemente la capacidad de elegir si usa Vue o React en el proyecto, así como Webpack o Browserify. Ionic se basa en Angular y requiere conocimiento en él (y, por lo tanto, TypeScript también).

Sin embargo, recientemente, los desarrolladores de Ionic anunciaron una nueva versión beta de Ionic 4, afirmando ser completamente independiente del marco de la interfaz de usuario: no más dependencias de Angular si no las desea.

Cordova Frameworks: sigue siendo una forma poderosa de desarrollar aplicaciones móviles multiplataforma

El uso de Cordova depende del proyecto específico. De hecho, la velocidad del desarrollo de aplicaciones móviles híbridas y su compatibilidad con múltiples plataformas son sus principales ventajas. Pero siempre es una compensación y, a veces, es posible que se enfrente a algunos defectos que no existirían con un enfoque nativo. Estos marcos maravillosos y sus comunidades hacen un gran trabajo para reducir esos defectos y hacernos la vida más fácil. Entonces, ¿por qué no darles una oportunidad?