CapacitorJS: un enfoque completamente nuevo para crear aplicaciones nativas con la Web

CapacitorJS: un enfoque completamente nuevo para crear aplicaciones nativas con la Web

Si alguna vez ha intentado desarrollar aplicaciones móviles sin tocar en absoluto el código nativo como Java, Kotlin, C-Objective o Swift, seguramente ha oído hablar de fabulosos frameworks que le permiten desarrollar este tipo de aplicaciones utilizando tecnologías web como Ionic, Cordova, Phonegap, Flutter, etc. Lo crea o no, aproximadamente el 60% de todas las aplicaciones en la tienda de aplicaciones son multiplataforma (todas comparten la misma base de código para múltiples plataformas).

Bueno, hay un nuevo marco que se une al vecindario, estoy hablando de CapacitorJS, una API multiplataforma y una capa de ejecución de código que facilita la llamada a los SDK nativos desde el código web y la escritura de complementos nativos personalizados que su aplicación pueda necesitar. Además, Capacitor proporciona compatibilidad con aplicaciones web progresivas de primera clase para que pueda escribir una aplicación e implementarla en las tiendas de aplicaciones y la web móvil. Capacitor viene con una API de complemento para crear complementos nativos. Los complementos se pueden escribir dentro de las aplicaciones de Capacitor o empaquetarse en una dependencia npm para uso de la comunidad. Se recomienda a los autores de complementos que utilicen Swift para desarrollar complementos en iOS y Kotlin (o Java) en Android. CapacitorJS se basa principalmente en la naturaleza web (a diferencia de los nativos multiplataforma como React Native y Xamarin).  

Cuando usar CapacitorJS

CapacitorJS se usa tradicionalmente para convertir sus aplicaciones webb existentes en aplicaciones móviles. Ya sea que se hayan creado con Vue.js o React, esta herramienta ha sido diseñada para colocarse en cualquier aplicación web JavaScript moderna existente. Si ya tiene este tipo de aplicación o desea comenzar desde cero para diseñar una aplicación móvil nativa en iOS y Android, este marco lo ayudará a usar lenguajes web familiares para acceder a funciones nativas como la cámara sin meterse con la complejidad de el código nativo.

¿Cuáles son las diferencias entre Capacitor y Cordova?

En espíritu, Capacitor y Cordova son muy similares. Capacitor ofrece compatibilidad con versiones anteriores de la gran mayoría de complementos de Cordova.

Capacitor y Cordova difieren en ese capacitor:

  • adopta un enfoque más moderno para el desarrollo de herramientas y complementos
  • trata los proyectos nativos como artefactos de origen en lugar de construir artefactos
  • es mantenido por el equipo Ionic 💙😊

Consulta la documentacion para obtener más detalles.  

¿Necesito usar Ionic Framework con capacitor?

No, no es necesario utilizar Ionic Framework con condensador. Sin Ionic Framework, es posible que deba implementar la interfaz de usuario nativa usted mismo. Sin la CLI de Ionic, es posible que deba configurar las herramientas usted mismo para habilitar funciones como livereload . Consulte los documentos para obtener más detalles.   

Cómo utilizar CapacitorJS

Como se mencionó, puedes implementar CapacitorJS en cualquier aplicación JavaScript moderna. Por ejemplo, si tiene una aplicación VueJS que ya funciona, puedes simplemente instalar Capacitor con el siguiente comando:

npm install @capacitor/cli @capacitor/core

Después de instalar el núcleo, inicialice la instancia de Capacitor en su proyecto:

npx cap init

Ahora, agregue una plataforma para trabajar, por ejemplo, Android:

npm install @capacitor/android
npx cap add android

Cree su aplicación VueJS habitual para crear los recursos web. Como de costumbre, la compilación se almacenará en el directorio dist de su proyecto Vue y eso es exactamente lo que Capacitor usará como recursos web. Sincronice sus activos web con el proyecto de Android:

npx cap sync

Y, asumiendo que ya tienes instalado Android Studio, puede abrir el proyecto con el siguiente comando:

npx cap open android

Luego, puedes usar la interfaz de usuario de Android Studio para iniciar tu nueva aplicación móvil en tu propio dispositivo o en un emulador.

¿Estás dispuesto a probar CapacitorJS para desarrollar tu próxima aplicación? Visita el sitio web oficial o el repositorio oficial de GitHub para obtener más información.

Esto podria interesarte

Conviertete en un programador más sociable