PWA vs React Native: una mirada detallada

De manera similar a PWA y Flutter, PWA y React Native se encuentran entre los enfoques más populares para desarrollar aplicaciones multiplataforma en este momento. Y al investigar sobre este tema, es comprensible que se sienta confundido al tratar de decidir el camino de desarrollo adecuado para su negocio. En este artículo, entraremos en los detalles de cada enfoque de desarrollo, desde lo que son, sus casos de uso y los detalles sobre cómo cada enfoque de desarrollo puede ser beneficioso para su negocio.

Los breves detalles

Aquí están los resúmenes rápidos de cada enfoque de desarrollo, así como los casos de uso a los que.

Aplicación web progresiva (PWA)

Definiciones

Progressive Web App (PWA) es una solución prometedora para desarrollar aplicaciones basadas en web . En esencia, las PWA se basan en trabajadores de servicios y manifiestos de aplicaciones web para brindar experiencias similares a las de las aplicaciones, que incluyen funciones que antes eran exclusivas de las aplicaciones, como notificaciones automáticas, disponibilidad sin conexión, instalabilidad, etc.

Casos de uso y ejemplos

Debido a su naturaleza basada en la web, las PWA son más adecuadas para sitios web cuya principal preocupación es brindar experiencias más atractivas e independientes de la conectividad, o simplemente para sitios web que desean llegar a una audiencia más amplia.

A partir de ahora, las PWA están experimentando una amplia adopción en la industria del comercio electrónico, donde las características como las notificaciones automáticas y la disponibilidad fuera de línea son necesarias para mejorar las tasas de conversión de compra y crear una base de clientes más leal.

 Lectura recomendada: 12 mejores ejemplos de aplicaciones web progresivas (PWA) en 2021

reaccionar nativo

Definiciones

React Native es un marco para desarrollar aplicaciones nativas verdaderas multiplataforma basadas en JavaScript. Las aplicaciones creadas con React Native pueden interactuar con las API nativas a través del paradigma de IU declarativo de React y JavaScript, y esto significa que se puede usar una única base de código de React para mantener dos plataformas (iOS y Android), todo sin comprometer las experiencias de los usuarios.

Casos de uso y ejemplos

Es difícil definir un caso de uso específico para React Native, ya que se utiliza para crear varios tipos de aplicaciones, como aplicaciones de redes sociales populares (p. ej., Facebook, Instagram, Pinterest, etc.) o aplicaciones de comunicación digital (p. ej., Skype, Discord , Tencent QQ, etc.). Para obtener una lista de aplicaciones creadas con React Native, consulte el escaparate de aplicaciones React Native.

Entrando en detalles

En la siguiente parte, analizaremos los detalles de cada enfoque de desarrollo, así como información sobre cómo cada enfoque de desarrollo puede encajar en el plan de su negocio.

Idioma

Las PWA se basan en tecnologías web para ofrecer experiencias similares a las de una aplicación. Por lo tanto, los lenguajes web como HTML, CSS y JavaScript siguen siendo los lenguajes principales que componen una PWA, mientras que las aplicaciones React Native usan React.js (una biblioteca de JavaScript) como su lenguaje principal.

Esta es la razón por la que al examinar el código de una aplicación React Native, debería ver que comparte algunas similitudes con los lenguajes web, con la única diferencia importante es que las aplicaciones React Native usan componentes nativos en lugar de componentes web para crear la interfaz de usuario.

Interfaz de usuario

Debido a que las PWA se basan en tecnologías web y se ejecutan en el motor del navegador , la interfaz de usuario de una PWA típica puede no parecer tan nativa para los ojos entrenados. Sin embargo, para los usuarios típicos, las diferencias entre la interfaz de usuario similar a una aplicación de PWA y la interfaz de usuario de la aplicación nativa real son minúsculas como mucho.

Una aplicación React Native, en cambio, es capaz de brindar verdaderas experiencias nativas , gracias a su uso de componentes nativos, y estos incluyen componentes específicos de la plataforma como <DatePickerIOS> y <ProgressViewIOS> para iOS, o <ViewPagerAndroid> y <ToastAndroid> para Android.

Actuación

El rendimiento es un tema delicado, ya que es difícil llegar a la verdad de esto. Sin embargo, desde ambos enfoques de desarrollo usan JavaScript en gran medida, puede esperar que el rendimiento sea bastante similar en todos los extremos, con una ligera ventaja que pertenece a React Native, ya que está más integrado con el sistema en uso y no tiene que comunicarse a través de un navegador.

Sin embargo, el hecho de que las PWA vivan en el entorno del navegador no significa que funcione como un sitio web promedio. Gracias al método de almacenamiento en caché avanzado empleado en las PWA, ya no hay contratiempos ocasionales al cargar entre páginas como se encuentran en los sitios web/aplicaciones web promedio; y junto con el hecho de que las PWA son esencialmente aplicaciones mejoradas de una sola página, el rendimiento percibido de las PWA es lo más parecido a una verdadera experiencia de aplicación nativa que se puede obtener.

Un ejemplo de esto es Temoorst, la marca con sede en Kuwait en la industria de artículos desechables. Con SimiCart como su proveedor de soluciones preferido, la marca optó por una aplicación nativa y una PWA para obtener los mejores ROI posibles, y el aspecto de rendimiento de la PWA sigue siendo algo que la marca no esperaba. En una prueba a ciegas, será difícil encontrar diferencias visuales y de rendimiento entre su PWA y su aplicación React Native.

Para probar la diferencia de rendimiento entre una aplicación React Native y una PWA, le recomendamos que pruebe las aplicaciones de Temoorst. Las aplicaciones en sí mismas son testimonios de cómo se vería una aplicación React Native o una PWA bien optimizada cuando se la lleva al máximo.

• Aplicación React Native : Google Play Store | Tienda de aplicaciones de Apple
• PWA : https://temoorst.com/

Seguridad

Debido al mayor nivel de integración con el dispositivo en uso, una aplicación React Native es naturalmente más segura y menos propensa a vulnerabilidades. Para agregar más capas de seguridad a una aplicación React Native, existen varios enfoques para emplear durante el proceso de desarrollo, como:

• Fijación SSL: para proteger las conexiones de la aplicación al servidor
• Llavero/información confidencial: proporcione almacenamiento local seguro junto con autenticación biométrica/facial
• Jscrambler: evite la manipulación del código agregando una capa de autodefensa

Dado que las PWA viven en el entorno del navegador y aprovechan la mayoría de las capacidades del navegador, la mayor parte del trabajo de seguridad lo realiza el propio navegador. En comparación con un sitio web normal, una PWA es más segura, ya que el componente central de la PWA (trabajador de servicio) solo se ejecuta en HTTPS, lo que significa que la comunicación entre el lado del cliente y el lado del servidor siempre está encriptada.

Los trabajadores del servicio solo se ejecutan a través de HTTPS. Debido a que los trabajadores del servicio pueden interceptar solicitudes de red y modificar las respuestas, los ataques de "intermediario" pueden ser muy malos.

Introducción al trabajador de servicio

Visibilidad

Aquí es donde brillan las PWA. Los PWA no solo están disponibles en la Web y están expuestos a los motores de búsqueda, sino que también se pueden publicar en las tiendas de aplicaciones. Google, Microsoft e incluso Samsung se han unido al carro para impulsar una mayor adopción de PWA al adoptar PWA reempaquetados en sus tiendas de aplicaciones. Microsoft Store, por ejemplo, incluso va un paso más allá y planea volver a llenar automáticamente su tienda de aplicaciones con PWA de calidad indexados por sus propios rastreadores de Bing:

Microsoft Store, impulsado por el rastreador de Bing, indexará automáticamente la aplicación web progresiva de calidad seleccionada

Dando la bienvenida a las aplicaciones web progresivas a Microsoft Edge y Windows 10

A partir de ahora, Apple App Store es el único mercado de aplicaciones popular que queda donde PWA parece no poder llegar. Esto se debe a que Apple ha dejado en claro en sus pautas de revisión que, para ser aprobada, la aplicación debe estar "más allá de un sitio web reempaquetado", y esta es una discusión completamente diferente en sí misma, sobre cómo Apple está desalentando activamente el desarrollo de Internet por temor a perjudicar sus resultados.
En comparación con las PWA, la capacidad de descubrimiento de las aplicaciones creadas con React Native no es tan impresionante, pero la naturaleza multiplataforma del marco significa que con una sola base de código, aún puede hacer que su aplicación sea visible tanto en Google Play Store como en Apple App Store. Y teniendo en cuenta que los usuarios de iOS son la mayoría en algunos países (incluidos los EE. UU.), y que los PWA no se pueden publicar en Apple App Store, esto debería ser una razón suficiente para optar por el desarrollo de aplicaciones React Native para servir donde la mayoría de sus usuarios son...

Accesibilidad de hardware

Debido a que las aplicaciones React Native son verdaderas aplicaciones nativas, disfrutan de un acceso mucho más amplio a las API nativas. Y esto significa que incluso el acceso de bajo nivel al hardware del dispositivo (p. ej., acceso a NFC (comunicación de campo cercano), lista de contactos, etc.) y el acceso sistémico (p. ej., acceso a la configuración del sistema, registros, etc.) son posibles y pueden aprovecharse para mejorar la experiencia del usuario.
Y dado que PWA se basa en las API web para su accesibilidad de hardware, una PWA está naturalmente más restringida en la forma en que puede utilizar los recursos del sistema. En el mejor de los casos, es decir, si el navegador en uso es compatible con todas las API de acceso de hardware más recientes, una PWA puede tener acceso a varias funciones de hardware que antes eran exclusivas de las aplicaciones nativas, como la geolocalización, el acceso a la cámara y al micrófono, la realidad aumentada (con WebXR API del dispositivo).

 Lectura recomendada: aplicación web progresiva (PWA) y acceso de hardware

Costos de desarrollo

En términos de costos de desarrollo, los proyectos React Native tienden a ser costosos debido al alto nivel de complejidad involucrado. Por ejemplo, es común que un proyecto React Native básico cueste más de $ 15,000 , mientras que un proyecto básico de PWA debería costar solo entre $ 1000 y $ 10,000. Sin embargo, en comparación con otros marcos de aplicaciones nativas, React Native sigue siendo una solución rentable gracias a su arquitectura independiente de la plataforma. Con un solo código base de React Native, puede publicar su aplicación tanto en Google Play Store como en Apple App Store, lo que reduce significativamente los costos totales de desarrollo sin afectar la experiencia de los usuarios.

Y aunque normalmente es más barato que los proyectos React Native, el costo de desarrollo de un proyecto PWA puede variar significativamente según la ruta de desarrollo que elija seguir. Por ejemplo, si decide optar por la arquitectura sin cabeza (que es una solución más flexible y escalable en comparación con la arquitectura tradicional), puede esperar que los costos de desarrollo de su PWA aumenten significativamente debido al mayor nivel de experiencia técnica requerida en el proceso. .

Conclusión

Debido a que se trata de dos vías de desarrollo para necesidades muy específicas, elegir entre React Native y PWA puede ser una decisión difícil. Una PWA es liviana, con procesos de actualización e instalación sin esfuerzo, y las características y funcionalidades que proporciona la PWA deberían ser más que suficientes para el usuario promedio de la aplicación. Sin embargo, debido a las restricciones actuales que impone Apple en sus tiendas de aplicaciones, puede ser una buena idea invertir en una buena aplicación React Native si la mayoría de sus usuarios móviles usan iPhone.

Para los comerciantes de Magento que buscan crear aplicaciones React Native multiplataforma o PWA sin interfaz, aquí en SimiCart ofrecemos soluciones rentables para ayudarlo a obtener una ventaja competitiva sobre sus competidores.