Contenido
- PWA frente a aplicaciones nativas: ¿cuál es la diferencia?
- Aplicaciones web progresivas: creación para la web
- Fortalezas de las PWA
- Debilidades de las PWA
- Reaccionar nativo
- Fortalezas de React Native
- Debilidades de React Native
- NativeScript
- Fortalezas de NativeScript
- Debilidades de NativeScript
¿Qué enfoque debería adoptar al crear una aplicación? ¿Debería tomar la ruta de las tecnologías PWA / web o debería ser nativo y diseñar para plataformas específicas? Ambas opciones tienen sus pros y sus contras, y en este artículo nos concentramos en algunas de las opciones populares que se utilizan para crear aplicaciones web y nativas.
Las PWA (aplicaciones web progresivas), también conocidas como aplicaciones web, se crean con tecnologías web populares HTML, CSS y JavaScript y funcionan en un navegador web. (Consulte algunas de las etiquetas HTML esenciales para ayudarlo con sus compilaciones). Los PWA son sitios web móviles diseñados para parecerse a una aplicación, y el uso de API web les brinda una funcionalidad similar a una aplicación nativa.
Para obtener más consejos sobre la creación de aplicaciones, consulte nuestra publicación sobre cómo crear una aplicación, o si es un sitio que desea crear, consulte estos principales creadores de sitios web y servicios de alojamiento web.
PWA frente a aplicaciones nativas: ¿cuál es la diferencia?
Las aplicaciones web progresivas tienen la ventaja de que se pueden instalar y vivir en un dispositivo sin la necesidad de una tienda de aplicaciones. Y parte del proceso es el manifiesto de la aplicación web, que permite a los desarrolladores controlar cómo aparece una aplicación y cómo se lanza. Además, los diseñadores web / desarrolladores front-end ya tendrán las habilidades necesarias para comenzar a construir de inmediato. No es necesario aprender un nuevo idioma, a diferencia de las aplicaciones nativas.
Las aplicaciones nativas se crean con un sistema operativo específico en mente, es decir. iOS y Android, y use un marco o lenguaje para cumplir con ese propósito. Las aplicaciones de iOS suelen utilizar Xcode o Swift, y las aplicaciones de Android, JavaScript. Pero, para este artículo, nos concentramos en un par de marcos de código abierto basados en JavaScript, React Native y NativeScript, que funcionan para ambas plataformas.
Las ventajas de las aplicaciones nativas es que, por lo general, brindan una mejor funcionalidad, ya que hacen un mejor uso del hardware y el software de un dispositivo, son más rápidas y tienen mayor capacidad de respuesta y usted obtiene garantía de calidad a través de calificaciones en las tiendas de aplicaciones. Pero, significará tener que aprender a usar un marco o biblioteca específicos.
Aquí analizamos tres opciones diferentes, una para web (PWA) y dos para nativa (React Native, NativeScript), para crear una aplicación. Analizamos cómo operan, qué pueden hacer y analizamos sus fortalezas y debilidades para ayudarlo a decidir qué opción debe elegir para crear su aplicación.
Aplicaciones web progresivas: creación para la web
Fortalezas de las PWA
- Las aplicaciones también funcionan en el navegador
- Distribución: navegador, empresas y tiendas de aplicaciones
- Puede utilizar React, Angular, Vue, vainilla u otros marcos
Debilidades de las PWA
- Sin acceso a todas las API nativas
- Las capacidades y la distribución de la tienda en iOS y iPadOS son limitadas
- Esta en continua evolucion
Las PWA son el patrón de diseño actual para crear aplicaciones instalables fuera de línea de alto rendimiento utilizando solo la pila web: HTML, CSS, JavaScript y las API de los navegadores. Gracias al trabajador de servicio y las especificaciones del manifiesto de la aplicación web, ahora podemos crear una experiencia de aplicación de primera clase después de instalarla para Android, iOS, iPadOS, Windows, macOS, Chrome OS y Linux.
Para crear PWA, puede usar cualquier arquitectura: desde el lado del servidor, JavaScript vanilla, React, Vue, Angular u otros marcos del lado del cliente. Puede ser una aplicación de una sola página o una aplicación web de varias páginas y definimos cómo vamos a apoyar a los usuarios mientras están desconectados.
En este enfoque, no necesitamos empaquetar y firmar los recursos de nuestra aplicación: simplemente alojamos los archivos en un servidor web y el trabajador del servicio será responsable de almacenar en caché los archivos en el cliente y entregarlos después de la instalación. Esto también significa que si una aplicación necesita actualizarse, simplemente cambie los archivos en el servidor y la lógica del trabajador del servicio será responsable de actualizarlos en los dispositivos de los usuarios sin la intervención del usuario o de la tienda de aplicaciones.
En términos de distribución, el método más común es el navegador. Los usuarios instalan la aplicación desde el navegador usando el elemento de menú Agregar a la pantalla de inicio o Instalar, aceptando una invitación para instalar o usando una interfaz de usuario de aplicación web personalizada en plataformas compatibles. Vale la pena señalar que Apple rechaza los PWA puros publicados en la App Store y alienta a los desarrolladores web a distribuirlos a través de Safari.
La interfaz de usuario es administrada exclusivamente por el tiempo de ejecución web, lo que significa que el diseñador web es responsable de representar cada control en la pantalla. Si usa un marco de interfaz de usuario, como Ionic, o una biblioteca de Material Design, HTML y CSS imitarán las interfaces nativas en Android o iOS, pero no es obligatorio.Al realizar PWA, es obligatorio aplicar técnicas de rendimiento web para mantener una buena experiencia de usuario.
En términos de capacidades, una PWA tendrá acceso solo a las API disponibles en el motor del navegador en esa plataforma y no se puede extender con código nativo, con la excepción de las distribuciones de PWA de la tienda de aplicaciones. En este asunto, iOS y iPadOS son las plataformas más limitadas para PWA, mientras que Chrome (para Android y sistemas operativos de escritorio) tiene más disponibilidad y está trabajando arduamente para agregar todas las API posibles a JavaScript con el proyecto Fugu.
- El mejor almacenamiento en la nube: elija la opción adecuada para usted.
Reaccionar nativo
Fortalezas de React Native
- Mismos patrones que con React.js
- Algunas API web están expuestas
- Soporte web y de escritorio
Debilidades de React Native
- No se pueden reutilizar los componentes de la interfaz de usuario web
- El puente nativo necesita algo de trabajo.
- Se necesita experiencia de reacción
React Native es un marco de componentes de código abierto basado en JavaScript, patrocinado por Facebook, que utiliza patrones de diseño de React, así como lenguaje JavaScript para compilar aplicaciones nativas para iOS, iPadOS y Android a partir de un código fuente.
Pero no se aceptan elementos HTML para renderizar; solo son válidos otros componentes nativos. Por lo tanto, en lugar de representar un div> con un p> y un entrada> elemento con JSX, estará renderizando un Ver> con un Texto> y un Entrada de texto>. Para los componentes de estilo, todavía usa CSS y el diseño se define a través de Flexbox.
La interfaz de usuario no se representará en el DOM de un navegador, sino utilizando las bibliotecas de interfaz de usuario nativas en Android e iOS. Por lo tanto, un Botón> en ReactNative se convertirá en una instancia de UIButton en iOS y el android.widget.Button clase en Android; No hay tiempo de ejecución web involucrado en React Native.
Sin embargo, todo el código JavaScript se ejecutará en una máquina virtual JavaScript en el dispositivo, por lo que no hay conversión de JavaScript a código nativo real al compilar la aplicación. Existe un conjunto de API conocidas para desarrolladores web, como Fetch API, WebSockets y los temporizadores del navegador: setInterval y requestAnimationFrame. Otras capacidades se implementan en la plataforma a través de API personalizadas, como animaciones.
Puede iniciar un proyecto React Native rápido con dos CLI gratuitas: Expo o la CLI ReactNative más avanzada y oficial. Si usa la CLI oficial, también necesita Android Studio para compilar y probar la aplicación de Android y Xcode para hacer lo mismo en iOS y iPadOS, por lo que necesitará una computadora macOS para esa plataforma.
React Native compila aplicaciones nativas para iOS y Android, lo que significa que la distribución de su aplicación seguirá las mismas reglas que otras aplicaciones nativas: tiendas de aplicaciones para aplicaciones públicas, distribución empresarial y pruebas alfa / beta. Por lo general, no puede distribuir una aplicación a través de un navegador, aunque React Native para Web y las plataformas React Native de Microsoft para Windows pueden ayudar.
NativeScript
Fortalezas de NativeScript
- Buenas herramientas para codificar y probar
- Amplia galería de aplicaciones listas para jugar
- Todas las API de Android e iOS están expuestas en JS
Debilidades de NativeScript
- Pequeña comunidad
- No se pueden reutilizar los componentes de la interfaz de usuario web
- Sin soporte web, de escritorio o React
NativeScript no es tan conocido como React Native, pero compite en el mismo campo: aplicaciones nativas de iOS y Android de JavaScript y frameworks web. Le permite usar JavaScript o TypeScript y un archivo de interfaz de usuario XML para crear aplicaciones nativas. También es compatible con Angular y Vue desde el primer momento, por lo que es una gran solución para los desarrolladores acostumbrados a estos marcos.
Las ventajas de NativeScript son más claras cuando usa Angular o Vue. Para Angular, crea los mismos componentes a los que está acostumbrado, pero utilizando XML en lugar de HTML para la plantilla, incluidos todos los enlaces de datos. En el XML, en lugar de un div> con un p> y un img>, colocarás un StackLayout> con un Etiqueta> y un Imagen> componente.
CSS y Sass son compatibles con estilos similares a CSS en el navegador. El enrutamiento y la gestión de la red se realizan mediante implementaciones de los servicios Angular estándar. Para Vue, es algo similar; escribe la plantilla en XML en lugar de usar HTML en el mismo plantilla> elemento en su archivo .vue.
NativeScript incluye una colección de componentes que luego se asignan a un control nativo de Android o iOS, por lo que cuando renderice una lista o un selector, será la aplicación nativa, usando la misma idea que en React Native.
Su código JavaScript o TypeScript (transpilado) se ejecuta en una máquina virtual JavaScript en el dispositivo con un puente hacia / desde el entorno nativo. En ese puente, se exponen todas las API nativas de Android o iOS / iPadOS, por lo que, a pesar de tener acceso a las API multiplataforma, podemos crear una instancia o llamar a cualquier código Java u Objective-C desde JavaScript / TypeScript y NativeScript clasificará los tipos de datos.
NativeScript tiene un gran soporte para herramientas, incluidos los complementos de código VS, la CLI, un sistema de prueba de recarga en caliente y una aplicación de patio de juegos NativeScript, por lo que no es necesario instalar todas las dependencias durante la prueba, así como varios servicios adicionales, como una aplicación en línea. patio de recreo.
Finalmente, NativeScript solo compila una aplicación para Android e iOS que se puede instalar desde los canales de distribución oficiales y las tiendas de aplicaciones si cumple con sus reglas, distribución empresarial y pruebas alfa / beta. Por lo general, no habrá forma de distribuir aplicaciones desde un navegador y no hay soluciones para aplicaciones de escritorio para esta plataforma.
Este artículo fue publicado originalmente en número 325 of net, la revista más vendida del mundo para diseñadores y desarrolladores web. Comprar número 325 o suscribir a la red.
Únase a nosotros en abril de 2020 con nuestra línea de superestrellas de JavaScript en GenerateJS, la conferencia que lo ayudará a construir un mejor JavaScript. Reserva ahora engenerateconf.com
