Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

12H

03M

13S

32

React Native - App Nativa en Platzi

11316Puntos

hace 3 años

Este es el primer post de una serie de publicaciones en el blog sobre la transición de React Native a Nativo y la estructura técnica de la aplicación móvil de Platzi.

React Native en Platzi

Estamos evaluando continuamente nuevas tecnologías para mejorar la experiencia en nuestros estudiantes, movernos rápidamente y mantener una excelente experiencia de desarrollador. Una de esas tecnologías fue React Native. En aquel entonces, reconocimos cuán importante se estaba volviendo el la parte móvil para Platzi.

Cuando empezamos con React Native sabiamos que teniamos un gran reto, hacer una sola base de código para ambas plataformas Android y iOS y de paso empezar a pensar en móvil, patrones de uso, componentes y demás. Habíamos elegido este Framework porque teníamos la ventaja de tener un equipo con la experiencia en React y JavaScript. Nuestros objetivos con React Native fueron:

  1. Permitirnos avanzar más rápido como organización al lanzar la aplicación móvil.
  2. Mantener la barra de calidad establecida por nativos.
  3. Escribir el código del producto una vez para dispositivos móviles en lugar de dos veces.
  4. Mejora la experiencia del desarrollador.

Lo que funcionó bien

Multiplataforma

El beneficio principal de React Native es el hecho de que el código que escribe se ejecuta de forma nativa en Android e iOS.

Experiencia con React

Hay una razón por la que React es el marco web más querido. Es simple pero potente y escala bien a grandes bases de código.

Velocidad de iteración

Durante el desarrollo en React Native, pudimos usar de manera confiable el HotReloading para probar nuestros cambios en Android e iOS en solo un segundo o dos.

Estilos

React Native no provee muchos componentes por defecto, entonces eso nos permitía crear nuestros propios estilos que se acomodaban al estilo de Platzi, para las vistas como para los componentes, y así ser reutilizados en ambas plataformas.

Redux

Utilizamos Redux para la gestión del estado, lo que nos pareció eficaz e impidió que la interfaz de usuario no se sincronizara con el estado y permitimos compartir datos fácilmente en todas las pantallas.

Lo que no funcionó bien

Inmadurez nativa

React Native es menos maduro que Android o iOS. Es más nuevo, altamente ambicioso y se mueve extremadamente rápido. Si bien, React Native funciona bien en la mayoría de las situaciones, hay casos en los que su inmadurez se muestra y hace que algo que es trivial, en nativo sea muy difícil. Desafortunadamente, estas instancias son difíciles de predecir y pueden tomar desde horas hasta muchos días para solucionarlas.

Librerías nativas de código abierto

La implementación estás librerías en React Native se volvia complejo ya que habia que implementarla en 3 lados, Android, iOS y React Native, tales como mapas, video, descargas, etc. Es decir, se requiere el mismo conocimiento de las tres plataformas para tener éxito.

Tamaño de la aplicación

React Native también tiene un impacto despreciable en el tamaño de la aplicación.

Manejar el estado.

Android con frecuencia limpia los procesos en segundo plano, pero les da la oportunidad de guardar sincrónicamente su estado en un paquete . Sin embargo, en React Native, todo el estado solo es accesible en el hilo js, ​​por lo que esto no puede hacerse sincrónicamente

Puente nativo

React Native tiene una API puente para comunicarse entre nativo y React Native. Si bien funciona como se esperaba, es extremadamente engorroso escribir. En primer lugar, requiere que los tres entornos de desarrollo estén configurados correctamente.

Dependencias

Cuando queríamos agregar algo muy concreto para cada plataforma teníamos dos opciones, usar una librería de terceros o implementar la funcionalidad en Android y iOS, siempre pensábamos en la segunda opción la cual nos llevaba más tiempo al hacer código para Android, iOS y React Native, había veces que se salía de nuestras manos la funcionalidad y terminábamos usando una librería de tercero la cual, cada que actualizábamos la versión de React Native, tambien teniamos que darle soporte a estas librerías para que hubiera una sincronización entre versiones.

En el siguiente parte del blog, hablaremos sobre ¿Qué sigue para la App de Android en Platzi?

Ahora puedes descargar la nueva app de Platzi 100% nativa 👉Platzi - Cursos Online

Esteban
Esteban
aragonesteban

11316Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2

Muy interesante este post en lo personal prefiero Flutter para el desarrollo de apps para ambas plataformas moviles.

1
32503Puntos

Sin duda , un excelente Review de la experiencia con react-native. Gracias por compartir

1
38430Puntos

Me gusta su iniciativa, en tanto les comento de un inconveniente que tal vez no hayan respondido. Sucede con los exámenes, su temporizador y, sobre todo, su movimiento o transición sobre el mismo.
¿Es culpa de la conexión? Pudiera ser, pero nunca he podido completar un examen en el tiempo, debido a su lenta generación del examen.

1
51638Puntos

¡Gracias Team Platzi!, estoy feliz con las mejoras que han realizado en la App para aumentar la velocidad de la reproducción, la posibilidad de copiar en memoria externa y las mejoras en el seguimiento de la descarga de los cursos para ver offline y sé que continúan trabajando para ofrecernos un mejor producto.
Entre todos los cambios que están haciendo, ojalá desde la App móvil se pueda agregar la opción para acceder a la descripción de la clase y la opción de acceder a los archivos y enlaces, como material complementario al proceso de aprendizaje.

Poder acceder a nuestras clases desde el celular, a pesar del estado de la conectividad de red, nos permite Nunca parar de aprender!

Gracias por Nunca parar de mejorar!

1
4008Puntos

Buena Review, y yo empece a estudiar React native, pero el curso esta desactualizadisimo. y en si eso no ayuda para poder aprender muy bien las bases de ese gran framework

1
153Puntos

Thank you for your post. This article gives me a lot of advice it was very helpful for me!
fnaf world