Únete a mí en esta retrospectiva de 4 años mientras exploramos las lecciones aprendidas al construir un reproductor de video desde cero con React Native. Compartiré ideas, obstáculos y conclusiones clave de este proceso de desarrollo.
Exploraremos consideraciones esenciales antes de adentrarnos en el desarrollo personalizado de un reproductor de video con React Native, incluyendo desafíos como la gestión de audio en segundo plano, las diferencias entre Android e iOS, la implementación de subtítulos y los controles personalizados.
Ya seas un desarrollador experimentado o nuevo en React Native, esta retrospectiva te ayudará a navegar por los desafíos que enfrentamos al desarrollar un reproductor de video, asegurando un proceso de desarrollo más fluido para tus propios proyectos.
This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.
Hola, React Summit. Bienvenidos a esta charla, una retrospectiva de cuatro años en la creación de nuestro reproductor de video React Native. Cubriremos lo que salió bien, lo que no salió bien y las lecciones aprendidas. Utilizamos React Native Video 5.2.1 y componentes personalizados para optimizar el reproductor. La transmisión de HLS, los subtítulos y las transcripciones funcionaron bien. El rendimiento en iOS fue bueno, pero el reproductor de Android y la gestión de audio en segundo plano causaron problemas. Diferentes reproductores de medios y la sincronización de reproductores de audio fueron desafíos. La gestión de dependencias y versiones fue difícil. La actualización de React Native Video a la versión 6.4 mejoró la estabilidad y agregó funciones de notificación. Las actualizaciones futuras incluirán soporte para DLL y separación de control del reproductor.
1. Retrospectiva del reproductor de video React Native
Short description:
Hola, React Summit. Bienvenidos a esta charla, una retrospectiva de cuatro años en la creación de nuestro reproductor de video React Native. Cubriremos lo que salió bien, lo que no salió bien y las lecciones aprendidas. Comenzaremos con una revisión. Soy un líder técnico en Learn, especializado en desarrollo de productos. Learn es una aplicación compleja con un enfoque en el lado móvil hecha con React Native. Comenzamos en 2020 con una versión simple del reproductor y desde entonces hemos agregado varias características.
Hola, Summit de React. Es muy agradable estar aquí y no puedo esperar para comenzar esta charla. Así que, bienvenidos a esta charla, que será una retrospectiva de cuatro años en la creación de nuestro reproductor de video React Native desde cero. Entonces, sin más preámbulos, comencemos. ¿Qué es una retrospectiva? Así que, me gustaría estructurar esta charla como una retrospectiva. Una retrospectiva es la oportunidad que tiene un equipo de reflexionar sobre el pasado dentro de una reunión estructurada. Así que, con suerte, les ahorraré algo de tiempo porque veremos lo que hicimos bien en la construcción de este reproductor, qué salió mal y con suerte les ahorraré algo de tiempo si quieren construir un reproductor desde cero. Entonces, el objetivo es ahorrarles algo de tiempo y resaltar las áreas en las que hemos tenido éxito y facilitar su experiencia en la construcción de un reproductor como este. Comenzaremos con una revisión, luego veremos una descripción general del proyecto. Avanzaremos y veremos qué salió bien y después veremos la parte más interesante, que es lo que no salió bien. Luego pasaremos a las lecciones aprendidas y finalmente tendremos una descripción general de las acciones a tomar. Así que, una buena retrospectiva termina con acciones concretas.
Entonces, comencemos con una revisión. ¿Quién soy yo? Soy un líder técnico en Learn, que es una empresa italiana que tiene como objetivo hacer que las competencias digitales sean accesibles para todos. Y una de mis mayores especialidades es la construcción de productos, aparte de cosas relacionadas con la ingeniería de software. Pero me encantan los productos y el desarrollo y la gestión de productos. Así que, todo lo que tiene que ver con productos. Comencemos con una descripción general del proyecto. El proyecto es este, que es Learn. En este momento, Learn es una aplicación compleja que tiene tanto una plataforma móvil como una aplicación web. El enfoque estará en el lado móvil de Learn, es decir, la aplicación móvil hecha con React Native. Comenzamos en 2020 con una aplicación hecha desde cero con React Native sin dependencias particulares. Y esta es la primera versión del reproductor. Como pueden ver, es bastante simple y ni siquiera tenía la barra de desplazamiento en este tipo de reproductor.
Avanzamos y desarrollamos esto. En el futuro, tenemos muchas cosas que pueden ver. Pueden tomar notas, pueden ver y dar los subtítulos de la lección y la transcripción. Así que, es una interfaz de usuario realmente compleja, pero tiene muchos componentes. Hay muchos componentes en esta aplicación.
2. Optimizando el Reproductor con Componentes Personalizados
Short description:
Utilizamos React Native Video 5.2.1 y componentes personalizados, incluyendo React Native bottom sheet, para optimizar el reproductor. La transmisión de HLS funcionó bien, al igual que los subtítulos y transcripciones. El rendimiento también fue bueno. Logramos una compatibilidad total con listas de reproducción de transmisión y desarrollamos una utilidad para manejar los subtítulos.
Está hecho completamente con React Native Video. Se hizo con React Native Video 5.2.1, y luego hicimos muchos componentes personalizados como el que has visto, y utilizamos React Native bottom sheet para animar todo lo que está sucediendo con las notas y transcripciones y cosas así. Entonces, el objetivo es hacer que entiendas qué podemos mejorar en la creación de este reproductor y qué se puede hacer para optimizar este tipo de reproductor y cómo logramos las optimizaciones. Así que, comencemos con lo que salió bien. Entonces, ¿qué salió bien? Bueno, la transmisión de HLS fue muy bien porque desarrollamos la infraestructura, que está hecha en AWS, pero tengo una charla separada para eso y puedes verla en mi sitio web. Luego los subtítulos y transcripciones, como puedes ver, salieron bastante bien, y lo explicaré más adelante. Y luego el rendimiento fue bastante bueno. Entonces, en cuanto a la transmisión de HLS, como dije antes, puedes ver aquí que es totalmente compatible con todo tipo de listas de reproducción de transmisión que desees. Así que, fue bastante sencillo, aparte de la parte de la infraestructura. Luego, en cuanto a los subtítulos, bueno, al principio, no había compatibilidad con los subtítulos porque no había estilos y ni siquiera podías establecer la posición. Así que, terminabas con subtítulos que se posicionaban en la parte superior del video, pero queríamos tener un control total sobre esa parte. Entonces, lo que hicimos fue traducir y crear una utilidad para convertir el formato de archivo VTT en objetos de una manera fácil. Así que, creamos esta función que analiza los VTT y crea un objeto particular, que es muy, muy comprensible y reutilizable, y construimos un hook personalizado para manejar los subtítulos, porque, como puedes ver aquí, tenemos una utilidad en la que puedes obtener el punto actual de los subtítulos en el que se encuentra el
3. Problemas del Reproductor de Audio y Rendimiento
Short description:
Puedes usar un hook para sincronizar el reproductor y controlar la posición de los subtítulos. El rendimiento en iOS fue bueno sin fallos. El reproductor de Android, la gestión de audio en segundo plano y las diferencias entre iOS y Android causaron problemas.
se está pronunciando el texto y luego expones el texto actual. En otras palabras, usas este tipo de hook. Es bastante simple. Pasas el reproductor, para que esté sincronizado con el reproductor, y puedes exponer los subtítulos y usarlos en tu UI como lo hicimos aquí. Por ejemplo, si una persona está hablando una palabra en el minuto tres, en el minuto tres, la palabra se imprime en la pantalla y el resultado final es así. Puedes tener un control total sobre la posición, porque la UI la manejas tú.
¿Y qué hay del rendimiento en iOS? Bueno, el rendimiento en iOS fue bastante bueno, como dije, porque tuvimos un 99% de sesiones sin fallos. Así que estábamos bastante satisfechos, pero incluso en cuanto al rendimiento, no tuvimos ningún problema particular con la transmisión, con los videos, la fluidez y con la animación, porque fue bastante, bastante fluida y todo iba bien. Pero pasemos a la parte más interesante, en mi opinión, que es lo que no salió bien. Esta imagen es bastante autoexplicativa, porque como puedes ver aquí, hay un pequeño reproductor en segundo plano, y en primer plano tienes a esta linda niña, una niña pequeña, que creo que ha hecho un desastre. Pero el nombre de esta niña es Android. Sí, Android arruinó por completo nuestro reproductor, porque tuvimos muchos problemas, y veremos qué tipo de problemas tuvimos en la creación del reproductor. Entonces, el propio reproductor de Android fue un problema, y lo explicaré más adelante. Tuvimos problemas con la gestión de audio en segundo plano y tuvimos muchos problemas con muchas diferencias entre iOS y Android en términos de comportamiento. Así que, veamos uno por uno los puntos. Así que, con el reproductor de audio... Sobre el reproductor de audio, debes saber
4. Reproducción de Audio y Audio en Segundo Plano
Short description:
El reproductor multimedia y el reproductor exo tienen diferentes características y rendimiento. La versión inicial tenía problemas de audio y almacenamiento en búfer, pero se resolvió con dos líneas de código. Descubrimos que el uso incorrecto del reproductor multimedia causaba el problema. Para implementar el audio en segundo plano continuo, utilizamos React Native Video con el audio en segundo plano desactivado y React Native Track Player, sincronizando los dos reproductores según el estado de la aplicación.
que utiliza Android... puedes usar en Android nativamente dos tipos de reproductores. El reproductor multimedia, que es una versión más antigua, que tiene controles limitados y no es tan personalizable, y no es tan estable. Luego tienes el reproductor exo, que es un reproductor más robusto y más nuevo. Y en comparación con el reproductor multimedia, tiene soporte para múltiples protocolos de transmisión y listas de reproducción, y es aún mejor. Pero la primera versión que usamos con React Native Video 5.2, estábamos utilizando un reproductor multimedia en segundo plano, pero no lo sabíamos. Entonces, la primera versión tenía audio distorsionado o faltante. Tenía, en algunos casos, una respuesta en el reproductor, e incluso problemas de almacenamiento en búfer. Así que, a la derecha, puedes ver muchas quejas y comentarios que recibimos en ese momento. Pero teníamos una solución. La solución eran dos líneas de código. Sí, ¿verdad? Dos líneas de código. Fácil, ¿no? Bueno, el problema fue que nos llevó meses descubrir que React Native Video estaba utilizando en segundo plano un reproductor multimedia y cómo forzarlo, porque al principio no se mencionaba en la documentación, y no sabíamos que la causa raíz era el tipo de reproductor. Así que seguimos depurando y debatiendo sobre cuál podría ser el problema. Y el problema era que estábamos utilizando el reproductor incorrecto. Entonces, probamos con los usuarios, con la solución forzada, y todo salió bien, porque el rendimiento del reproductor mejoró. Y hicimos un PR en el repositorio. Y así, con suerte, para ahorrar tiempo a otros usuarios de este tipo de modelo. Pero pasemos al audio en segundo plano. Entonces, el audio en segundo plano significa que cuando bloqueas la pantalla del teléfono y comienzas a reproducir el video, el video debería funcionar continuamente como lo hace Spotify. Por ejemplo, cierras el teléfono y el audio sigue reproduciéndose. Bueno, queríamos implementar esta función. La primera solución fue usar React Native Video, porque era compatible con, era compatible con React Native Video. Pero no tenía controles en la pantalla de bloqueo de notificaciones. Así que queríamos tener control sobre esa parte. Entonces, la solución fue usar React Native Video en modo desactivado de audio en segundo plano. Entonces, sin controles y sin audio en segundo plano. Y usamos otro reproductor, que era React Native Track Player, que es otro modelo que permite reproducir archivos MP3. Así que tuvimos que sincronizar dos reproductores. La parte difícil de esta solución fue mantener la sincronización entre los dos reproductores. Porque, como puedes ver aquí, cambiamos de un reproductor a otro según el estado de la aplicación. Entonces, si la aplicación se mueve de
5. Solución Alternativa para Audio en Segundo Plano
Short description:
Utilizamos React Native Video con audio en segundo plano habilitado y React Native Music Control para mostrar controles en el centro de notificaciones. La solución funcionó bien pero tenía algunas desventajas, como un mayor consumo de datos y el modelo que ya no se mantiene. También hubo diferencias en el comportamiento entre iOS y Android.
de segundo plano a primer plano, cambias al video y viceversa. Pero esto no fue tan sencillo. Por lo tanto, optamos por otra solución. Solución 2. La solución 2 consistía en utilizar React Native Video con el audio en segundo plano habilitado, porque no tenía controles. Pero utilizamos otro control, que era React Native Music Control, que en realidad no es un reproductor, sino un modelo que te permite mostrar controles en el centro de notificaciones. Entonces, no es un reproductor. Sincronizamos React Native Video con los controles de música y pudimos encontrar esta solución que funcionó para la mayoría de los usuarios, porque te permite vincular el módulo a los controles. Entonces, cuando haces clic en el control de notificación, puedes llamar, como puedes ver a la derecha, al reproductor. Entonces, puedes iniciar el reproductor. Y tiene muchos listeners, incluso los que se usan cuando quitas los auriculares o los audífonos que detienen el video. Y así, fue bastante personalizable y funcionó bastante bien. Pero también tuvimos algunas desventajas. Porque, lo siento. Tuvimos muchas ventajas, porque no había tiempo de retraso entre el cambio de los reproductores. A diferencia de la primera solución, la pantalla no se vuelve a renderizar cuando cambias el video. Así que fue bastante bueno. Pero como dije antes, la gestión del sistema de eventos nativos. Así que fue bastante bueno. Pero también tuvimos algunas desventajas, que fueron el consumo de datos. Porque cuando bloqueas la pantalla, el video sigue reproduciéndose. Y no estás reproduciendo un archivo mp3. Así que es más pesado en los datos del usuario. Y la desventaja de esto es que el modelo en la actualidad, en el momento de hablar, ya no se mantiene. Entonces, si tienes que lidiar con algún problema, tienes que, uno, desarrollarlo por tu cuenta e incluso interactuar con la parte nativa. Porque en la actualidad, ha tenido algunos problemas con muchos dispositivos en Android, especialmente después de Android 13 y se bloquea. Así que terminamos con muchos bloqueos en producción. Y tuvimos algunos problemas al respecto. Y más adelante te mostraré las estadísticas de los bloqueos. Así que también hubo muchas diferencias en el comportamiento entre iOS y Android. Y créeme, no quieres tener cosas así en tu código base.
6. Lecciones Aprendidas y Desafíos
Short description:
Controlar la reproducción de video en diferentes plataformas fue desafiante debido a las numerosas diferencias. Hubo una diferencia significativa en las tasas de bloqueo entre iOS (99%) y Android (89%). Gestionar dependencias y versiones fue difícil, y el uso de muchos módulos inicialmente tuvo beneficios a corto plazo pero causó problemas a largo plazo. Eliminar una función es peor que no desarrollarla en absoluto.
En el que controlas muchas veces si la plataforma es Android o la plataforma es iOS, no es tan bueno porque hay muchas diferencias. Como puedes ver aquí, pasamos como siete días tratando de descubrir por qué deberíamos cambiar y detener el video antes o después en una plataforma u otra. Así que no es fácil depurar este tipo de cosas. E incluso aquí, cambiamos el reproductor, pero es una solución alternativa para mostrar el video cuando regresas del fondo y mostrar la imagen. Porque en iOS, al principio, no funcionaba. Pero sí, tuvimos muchos problemas y muchas diferencias entre los dos sistemas operativos. Y después de eso, incluso aquí, puedes ver que en iOS, la tasa de bloqueo... Lo siento. Las sesiones sin bloqueos fueron del 99%. En Android, fue del 89%. Así que hay una gran diferencia. Y tuvimos problemas, como dije, en Android y quejas en las tiendas por este tipo de problemas. Porque además de la estabilidad, tuvimos bloqueos. Y no es bueno tener una aplicación que tenga una alta tasa de bloqueo en producción. Pero sí, aprendimos mucho. De hecho, pasemos a las lecciones aprendidas en este proceso. Por lo tanto, gestionar dependencias y versiones es difícil. Comenzamos desde la versión 0.6 de React Native. Hoy en día, estamos en la versión 0.75, 0.76. Y muchas veces tuvimos que frenar el trabajo porque tuvimos que actualizar masivamente muchas dependencias. Y sí, pasemos al siguiente punto, que es que usar muchos módulos es rápido a corto plazo, pero puede ralentizar las cosas a largo plazo. Porque comenzamos con muchas dependencias, muchos módulos. Pero a corto plazo, sí, es fácil. Tienes muchas dependencias que puedes usar y no tienes que desarrollar algunas cosas. Por ejemplo, animaciones, hojas inferiores y cosas así. Pero a largo plazo, debes seguir actualizando todas estas dependencias, lo cual es muy, muy complicado a largo plazo. Y el siguiente punto, la lección aprendida es que eliminar una función es peor que no desarrollarla en absoluto. ¿Qué quiero decir con eso? Comenzamos queriendo desarrollar muchas funciones para el
7. Diferencias y Soluciones en React Native
Short description:
Eliminar una función es peor que no desarrollarla en absoluto. Comienza con un MVP y pequeñas funciones que funcionen bien. Aprende una vez, ejecuta en cualquier lugar. Encuentra compromisos y diferentes comportamientos. Encuentra soluciones para las diferencias en React Native.
usuarios. Por ejemplo, el audio en segundo plano. Así que lo desarrollamos y lo lanzamos. Vale, para la mayoría de los usuarios, esto funcionó. Pero en Android, esto tuvo algunos problemas. Entonces, ¿qué sucede si eliminamos esta función en Android? Habrá muchas quejas porque los usuarios, que tienen dispositivos que pueden admitir esta función, la están utilizando y pueden quejarse. Entonces, te sugiero que comiences a desarrollar no muchas funciones complejas, sino que comiences con un MVP y pequeñas funciones que funcionen muy, muy bien. Y luego, aprende una vez, ejecuta en cualquier lugar. Bueno, no siempre. Porque tuvimos muchas diferencias en los comportamientos en React Native, especialmente cuando hablamos del lado nativo en la plataforma en el lado del video. Así que tuvimos que encontrar muchos compromisos y diferentes comportamientos. Pero afortunadamente, encontramos una solución y te mostraré más adelante cuáles son las soluciones en la actualidad. Porque esta charla se basa en una retrospectiva de la versión 5.2.1. Pero veremos qué está sucediendo en la actualidad.
8. Actualización y Estabilidad de React Native Video
Short description:
Acciones identificadas: actualizar React Native video. La actualización de la dependencia no fue sencilla debido a que la versión estable se lanzó dos años después. Nos asociamos con los mantenedores para abordar los problemas y reducir la tasa de fallos al 1%. Ahora, con la versión 6.4, el módulo es estable, tiene un buen soporte y cuenta con funciones de notificación integradas. Recomendamos encarecidamente su uso en producción.
Entonces, ¿cuáles son las acciones identificadas? En la primera parte, hemos visto muchos problemas con las dependencias y hemos visto muchos problemas con los fallos en Android. Por lo tanto, queríamos mejorar la estabilidad en la plataforma de Android. Estas son las acciones identificadas. Y hemos completado estas acciones con una solución que puede parecer bastante sencilla, que es actualizar React Native video. Porque toda la presentación se trató de React Native video 5.2.1. Pero hay nuevas versiones de React Native video. Y podrías decir, oh, es fácil actualizar la dependencia. Podrías tener un React Native video y resolver todos tus problemas. Bueno, no es tan fácil. Porque como puedes ver aquí, la primera versión estable, la versión seis que fue la versión estable, se lanzó dos años después del inicio de nuestro desarrollo. Así que no confiábamos en incluir en nuestra aplicación versiones alfa o versiones que no fueran estables. Sí, el modelo era mantenido. Pero tuvimos que esperar mucho tiempo entre las versiones y no teníamos
9. Module Stability and Future Updates
Short description:
En la versión 6, los controles de notificación están parcheados y estables. Nos asociamos con los mantenedores para abordar problemas con Audio Background y reducir la tasa de fallos al 1%. Ahora, con la versión 6.4, el módulo está listo para producción, con características de notificación integradas. Funciona sin problemas en Android e iOS. El módulo también admite subtítulos, estilos, y añadirá soporte para DLL para la protección de contenido. Las futuras versiones introducirán cambios como módulos Nitro y separación de controles del reproductor.
Así que, tuvimos que esperar y hacer compromisos porque usamos otros modelos para parchear los problemas con los controles de notificación y todo eso. En la versión 6, todo eso está parcheado. Así que, los controles de notificación están listos para usar. Funciona muy, muy bien. Y es estable. Y algo cambió en el último año porque incluso nos asociamos con los mantenedores del modelo. Porque el grupo Vizsla es el nuevo grupo de mantenedores. Es una nueva empresa que se hizo cargo del proyecto hace un año y medio. Y puedes ver aquí que comenzaron a enviar y enviar y enviar muchos cambios nuevos y mejoras de rendimiento. Así que, incluso nos asociamos con ellos para resolver la mayoría de nuestros problemas con Audio Background porque parchearon nuestro módulo y nos ayudaron a tener éxito con los fallos en producción.
Así que, hoy en día, la tasa de fallos es del 1% como lo es en iOS. Así que, el módulo está bastante, consideraría que está listo para producción porque hoy en día con la nueva modificación, la versión 6.4, es bastante estable. Tiene mucho soporte e incluso tiene listo para usar la parte de notificación. Funciona sin problemas en Android, en iOS. Así que, te sugeriría usar este módulo en producción si quieres construir el proyecto desde cero. Tuvimos mala suerte porque era 2020. Comenzamos en 2020 a desarrollar esta aplicación. Y no era tan maduro, el módulo. Pero hoy en día, lo es. Y te sugeriría usarlo en producción si quieres construir el producto porque ni siquiera tienes que desarrollar los subtítulos desde cero, por ejemplo, porque están soportados y el estilo está soportado. Y también agregarán soporte para DLL. Así que, incluso puedes hacer protección de contenido directamente en el dispositivo. Así que, es bastante fácil implementar ahora mismo este tipo de infraestructura. Y incluso en el futuro lanzaremos la versión 7, que introducirá muchos cambios, como la implementación de módulos Nitro o la separación del reproductor de los controles. Y mira, sí, esto es beta, pero van a trabajar en eso.
Así que, esta fue la retrospectiva. Espero haberte ahorrado algo de tiempo. Y espero que en el futuro, si te gustaría comenzar a desarrollar una aplicación de video o si quieres agregar la funcionalidad de video a tu aplicación, podrías usar React Native Video porque ahora mismo, es bastante estable. Y si hay problemas, hay una gran comunidad alrededor de ello porque amo el código abierto, amo contribuir a las comunidades, y amo participar en este tipo de proyecto. Así que, con suerte, te ahorré algo de tiempo y aprendiste mucho sobre este lado del desarrollo de React Native Video. Así que, gracias por tenerme. Fue un placer estar aquí. Puedes contactarme en los enlaces aquí en las redes sociales. Puedes visitar mi sitio web. Y si eres rápido, curioso y quieres hacerme algunas preguntas, no dudes en hacerlo. Contáctame, y te responderé siempre. Así que, gracias de nuevo, y nos vemos.
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.
This Talk is about the development of MDX, a combination of Markdown and JSX, by a freelance full stack JavaScript developer. MDX is a powerful technology that allows for the creation of interactive content within blog posts and supports React components. The speaker developed RnMDX, a proper and polished MDX library for React Native, which can be dropped into any React Native app. RnMDX provides solutions for common issues with Markdown content in React Native and allows for the rendering of MDX content into native views. Bringing MDX into native apps is now easier, and it can be used for various purposes, such as serving the app layout from a CMS or creating interactive online magazines or blogs.
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
WorkshopFree
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
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
- 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
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.
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena? En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario. Tabla de contenidos: - Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local Prerrequisitos - Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web? ¡Para escribir una aplicación para Android, iOS y la web en un solo código base! Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas. En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web! Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil Requisitos previos- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/
Comments