Arquitectura de React Native en Product Hunt

Rate this content
Bookmark

Voy a mostrar la arquitectura de React Native que utilizamos en nuestra nueva aplicación móvil en Product Hunt. Lo que aprendimos en el camino. Cómo trasladamos lo que sabemos de la web al móvil. Los temas serán el diseño de componentes reutilizables de React, GraphQL, enrutamiento en la aplicación, ciclo de vida de la aplicación, controles de teclado, mensajes de aviso y otros.

This talk has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Las principales tecnologías utilizadas en Produhunt incluyen React Native para el desarrollo móvil, GraphQL para las transferencias de datos a través de Apollo, TypeScript, Jest y Prettier para el ecosistema JavaScript, y Fastlane para las herramientas de desarrollo móvil.

Produhunt optó por React Native debido a la necesidad de soportar tanto iOS como Android con un equipo familiarizado con React y Apollo. Además, React Native había mejorado significativamente en estabilidad y rendimiento desde sus experiencias pasadas.

Los objetivos de la arquitectura en Produhunt son facilitar las operaciones comunes, organizar el código para una fácil incorporación de nuevos miembros del equipo, aislar las dependencias y garantizar la extensibilidad y reusabilidad de la aplicación.

La aplicación móvil de Produhunt está estructurada en tres pilares principales: soporte, componentes y pantallas. Estos elementos ayudan a construir componentes reutilizables y a organizar las pantallas de la aplicación.

GraphQL es utilizado en Produhunt para gestionar las transferencias de datos eficientemente. Se usa junto con Apollo, que facilita la integración de GraphQL en la aplicación, mejorando la gestión de datos y la seguridad de tipos con TypeScript.

Produhunt organiza su código para que sea intuitivo y accesible, permitiendo que los nuevos miembros del equipo se incorporen fácilmente. Utilizan una estructura clara y documentación adecuada para apoyar este proceso.

Produhunt utiliza React Native Navigation para manejar la navegación dentro de su aplicación móvil, debido a que se adaptó bien a su estilo de trabajo y ofreció una buena integración con el resto de su stack tecnológico.

Los componentes y pantallas en Produhunt se manejan mediante un sistema que permite reutilizar componentes en diversas pantallas y facilita la creación de pantallas con un comando que configura automáticamente los aspectos necesarios de la pantalla.

Radoslav Stankov
Radoslav Stankov
18 min
14 May, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El orador discute la arquitectura de React Native que utilizan en su nueva aplicación móvil, eligiendo React Native en lugar del desarrollo nativo debido a los recursos limitados y la necesidad de experimentar con la interfaz de usuario. La arquitectura consta de soporte, componentes y pantallas, con un enfoque en la organización del código y la extensibilidad. El orador explica el proceso de creación de pantallas, incluido el uso de React Native Navigation y un patrón de máquina de estados. También destacan el uso de GraphQL para la recuperación de datos y la navegación entre pantallas. La charla cubre la estructura de los componentes comunes, utilidades para el estilo y el soporte para el modo oscuro. En general, el orador enfatiza la importancia de aislar las dependencias y utilizar un enfoque de estructura de directorios.

1. Introducción a la Arquitectura de React Native

Short description:

Hola a todos. Mi nombre es Radoslav Stankov y vengo de Bulgaria. Hoy hablaré sobre nuestra arquitectura de React Native y cómo hemos estructurado nuestra aplicación de React. Produhunt es este sitio web. Cuando decidimos reconstruir nuestra aplicación móvil, teníamos dos opciones: usar Swift nativo o usar React Native. Tuvimos una experiencia terrible con React Native en el pasado, pero solo teníamos dos desarrolladores con experiencia en Swift y ninguno en Android. También necesitábamos experimentar con la interfaz de usuario y admitir Android, así que elegimos React.

Estoy aquí en Bulgaria, sentado en este momento. Y soy el jefe de ingeniería en Produhunt.

Hoy hablaré un poco sobre nuestra arquitectura de React Native y cómo hemos estructurado nuestra aplicación de React. Pero antes de entrar en los detalles técnicos, para una buena arquitectura, es necesario conocer el contexto, como de dónde viene el equipo, cuáles son los requisitos y cómo se construye todo.

Produhunt es este sitio web. Así es como nos vemos en la web. Y he dado presentaciones anteriores sobre la arquitectura de Produhunt. No entraré en detalles allí. Pero cuando decidimos reconstruir nuestra aplicación móvil a principios de este año, en realidad la lanzamos este año, comenzamos un poco más tarde que eso. Nos preguntábamos, bueno, ahora deberíamos hacer un gran reinicio en nuestra aplicación móvil. Y para nuestro caso, básicamente teníamos dos opciones.

Una era usar Swift nativo y la otra era usar React Native. Realmente tuvimos una experiencia terrible hace más de dos años cuando inicialmente comenzamos con React Native. Fue bastante desafiante. Por otro lado, solo teníamos dos desarrolladores que tenían algo de experiencia en Swift, no muy nuevos, y no teníamos ningún desarrollador con experiencia en Android. Y nuestra aplicación realmente necesitaba funcionar en Android también. Además, Apollo, así que usamos GraphQL para todas nuestras transferencias de datos y la mejor manera de usarlo es Apollo, en mi opinión. Apollo para Swift no es tan bueno como Apollo para JavaScript. Y nuestro equipo ya sabía cómo lidiar con React y Apollo. Lo otro que necesitábamos para esta aplicación era hacer muchas experimentaciones de interfaz de usuario, y nuevamente, también necesitábamos Android.

Entonces, a principios de 2020, estábamos haciendo experimentos de aplicaciones móviles para YourStack. A principios de 2000, trabajamos en dos aplicaciones para algunos de nuestros productos y experimentación. Una era YourStack, la otra se llamaba StackCamp. Ambas no se lanzaron porque eran solo internas. Probamos algunas ideas allí. Así que, sí, no se lo digas a nadie. A partir de eso, pudimos comparar los ecosistemas de React y Swift. Y decidimos ir con React simplemente porque necesitábamos Android.

2. Visión general de la arquitectura de React Native

Short description:

Nuestro equipo ya conocía React Native y decidió utilizarlo junto con GraphQL y Apollo. Priorizamos facilitar las operaciones comunes, organizar el código, aislar las dependencias y garantizar la extensibilidad y usabilidad. Nuestra arquitectura consta de tres pilares: soporte, componentes y pantallas. La estructura de directorios de nuestra aplicación móvil refleja esta arquitectura. Comenzamos con la capa superior, las pantallas, que se definen en la app GS y utilizan React Native Navigation.

y React Native realmente ha mejorado mucho en comparación con hace dos años y medio. Se ha vuelto mucho más rápido, mucho más estable y no hemos tenido los mismos problemas que antes. La pila tecnológica que decidimos utilizar fue React y React Native. Utilizamos GraphQL y accedemos a él a través de Apollo. TypeScript, Jest y Prettier son básicamente imprescindibles si utilizamos el ecosistema JavaScript. Y para todo lo relacionado con la aplicación móvil, utilizamos Fastlane para las herramientas.

En cuanto a la arquitectura, si no sabes por dónde empezar, es muy fácil encontrarse en una situación en la que te quedas atascado. Así que queremos avanzar rápido y desayunar, no romper cosas rápidamente. Queremos avanzar. Por tanto, en nuestra arquitectura tenemos cuatro objetivos. El primero es facilitar las operaciones comunes para que los ingenieros puedan añadir fácilmente nuevas funcionalidades. Luego, necesitamos organizar el código para que los nuevos miembros del equipo puedan incorporarse fácilmente al código base. Aislar las dependencias, como en el mundo JavaScript y en prácticamente cualquier mundo moderno en el que trabajemos con dependencias externas que pueden desincronizarse fácilmente, quedar obsoletas y romper muchas cosas sin nuestro control. Y por último, la extensibilidad y usabilidad. Queremos construir cosas que podamos ampliar y reutilizar a lo largo del tiempo. Pero lo más importante para nosotros es facilitar las operaciones comunes para que todo lo que un desarrollador tenga que hacer a diario sea muy fácil para ellos.

La forma en que veo las partes de la arquitectura es a través de tres pilares: el soporte, los componentes y las pantallas. Así es como lo veo en mi cabeza. Tenemos una gran área de soporte que nos ayuda a construir los componentes reutilizables principales y luego construimos las pantallas sobre eso. Para alguien más familiarizado, así es como puedes imaginarlo. Tienes los pilotos, los colocas en las líneas y forman a Voltron y lo hacen realmente bien. Si miras nuestro directorio, así es como se ve la estructura de directorios de la aplicación móvil y representa la arquitectura de esta aplicación. Y si te fijas, si lo marco con colores aquí, tenemos soporte, componentes y pantallas.

Entonces, una vez más, hablemos de código. Empecemos por la capa superior porque en realidad nos ayuda a entender las capas de ambas si empezamos al revés. Desde las pantallas. Todas las pantallas se definen en la app GS. Y aquí, lo que hacemos es utilizar la navegación de React Native

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.