66

La app de Platzi ahora es nativa ¿Por qué dejamos React Native?

18351Puntos

hace 2 años

Curso de Introducción a Swift
Curso de Introducción a Swift

Curso de Introducción a Swift

Comienza a aprender Swift, domina los conceptos básicos del lenguaje de programación oficial de Apple. No importa si es para iOS u OS X, Swift será tu mejor aliado al crear increíbles aplicaciones para iPhone, Mac y más.

Hace 5 meses lanzamos la última gran versión de la app de Platzi. En este post puedes leer más de ese lanzamiento.

Después de hacer una prueba nativa, Platzi Lite, escrita 100% en Kotlin para Android y ver la diferencia de rendimiento, nos preguntamos ¿por qué no migrar todo a nativo?

Lo primero que hicimos fue identificar cuáles eran las funcionalidades más importantes para empezar a desarrollar. Después, comenzamos a armar el plan de trabajo para definir tiempos de desarrollo, lanzamientos beta y lanzamiento a producción.


¿Por qué abandonamos React Native?

React Native no escaló con las funcionalidades que queríamos implementar. Por ejemplo, hacer el seguimiento del porcentaje de cada descarga en los cursos causaba que la aplicación fuera inestable y se percibiera como lenta. Técnicamente, esto sucede porque la comunicación entre JavaScript y la parte nativa recibe muchos llamados al mismo tiempo que entorpecen el rendimiento de la aplicación.

Por otra parte, en iOS, cuando la aplicación pasa a un segundo plano el manejo de memoria es efectivo y mata cualquier actividad que consuma más de lo debido.


Nota:
En iOS, todos los módulos que se habían creado para React Native fueron escritos en Objective-C, así que tuvimos que crearlos de nuevo en Swift. La ventaja que teníamos era que ya sabíamos qué framework y APIs usar.


Usando React Native el proceso de javascript-core pasa por la limpieza y mata la actividad. Por eso, cuando regresas a la aplicación, la mayoría de veces, se reinicia al estado en el que quedó la aplicación y esto causa que al tener el player o una descarga en segundo plano el proceso sigue pero la interface no, generando procesos zombies y problemas de sincronización haciendo que tu, como estudiante, percibas la aplicación con bugs.

MVP

Para probar si esto iba a funcionar a buen ritmo, lo primero fue desarrollar el MVP (Minimum Viable Product) con toda la navegación. Este MVP consistía en mostrar el tab bar con la navegación principal y que cada tab tuviera su sub-navegación interna. Esto último fue la parte más compleja, pero una vez logrado y probado que funcionaba, nos dimos cuenta que iba a resultar y decidimos continuar con el producto completo.

Ahora lo más importante 🥁

Arquitectura

En React Native usábamos la arquitectura FLUX que constaba de:

  • un store
  • actions
  • dispatcher
  • views

Para aprender más de esto sigue la ruta de aprendizaje Desarrollo de Apps con React Native.


En el mundo de Swift existen cuatro tipos de arquitecturas famosas: el clásico y conocido MVC, MVP, MVVM, la mejor alternativa, y VIPER, que está tomando mucha fuerza. Aprende más con la ruta de aprendizaje iOS Mobile Developer.

Para nosotros, la mejor opción fue MVVM (Model-View-ViewModel) porque nos ayuda a que el código sea más fácil de testear, una organización limpia y un mejor entendimiento, gracias a que se divide en 3 partes bien definidas:

model.jpg

Model:

La estructura

struct Course : Codable {
    var id: Int
    var title: String
}

ViewModel:

Recibe información y acciones, los cuales los transmite de vuelta a la vista vía observables.

classCourseViewModel{
        
        lazyvar course = Observable<Course>()
        
        funcgetCourse() {
            repo.getCourse { courseRes inguardlet courseRes = courseRes else { return }
                
                self.course.value = courseRes
            }
        }
    }

Repository:

Se encarga de pedir la información a la API, Base de Datos, etc.

classCourseRepository{
    
    	funcgetCourse(completion: (Course) ->Void) {
    
    		Fetch().get("course/\(id)") { courseRes in
    
    			completion(courseRes)
    
    	}
    
    }

View:

Se encarga de mostrar la información y recibir las interacciones por parte del usuario.

classCourseViewController: UIViewController{ 
    
    	lazyvar viewModel = CourseViewModel.shared
    
    	var course: Course?
    
    	overridefuncviewDidLoad() {
    		  super.viewDidLoad()
    			
    			viewModel.getCourse()
    	
    			viewModel.course.observe = { course inself.course = course
    			}
    	}
    }

Esta misma arquitectura la estamos usando para el desarrollo de la aplicación de Android, muy pronto recibirás buenas noticias.

Si quieres ser de los primeros en probarla puedes inscribirte como Beta Tester.

Aprendizajes

  • React Native es perfecta para equipos pequeños que necesitan hacer aplicaciones multiplataforma o hacer MVPs de alta calidad en tiempos muy cortos. Gracias a que la curva de aprendizaje es baja, un Frontend con conocimiento en React puede crear una aplicación en React Native.

  • Migrar a nativo nos ayudó lograr reducir más del 50% en consumo de los recursos, memoria RAM y CPU. También, a usar más rápidamente las APIs que nos ofrece cada plataforma.

Descárgala ahora mismo en App Store:‎Platzi - Cursos Online

Curso de Introducción a Swift
Curso de Introducción a Swift

Curso de Introducción a Swift

Comienza a aprender Swift, domina los conceptos básicos del lenguaje de programación oficial de Apple. No importa si es para iOS u OS X, Swift será tu mejor aliado al crear increíbles aplicaciones para iPhone, Mac y más.
Alejandro
Alejandro
alesanabriav

18351Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
15
14718Puntos

"generando procesos zombies y problema de sincronización, haciendo que tu como estudiante percibas la aplicación con bugs."
No, mil veces reporté esto como bug a través de emails y/o chats. Es un bug, no es una “percepción”. Es un conjunto de malas decisiones que afectan directamente al usuario/cliente. Que no pueda descargar correctamente un curso que quiero tomar en mis vacaciones y no puedo hacerlo, porque simplemente las clases no se descargan… díganme, dónde está la percepción? Hubiese preferido mil veces este tipo de respuesta, super clara y evidente, que el reiterativo: Qué versión de SO tienes? Qué celu tienes?

Que bueno que hayan cambiado la arquitectura de la app móvil.

4
18351Puntos
2 años

Lo sentimos mucho, pero gracias a tu feedback, hemos mejorado!

5
5275Puntos
2 años

este comentario refleja el sentir de todos los estudiantes que usamos la app jaja

2
4838Puntos
2 años

Yo también reportaba mucho los bugs y hasta con descripciones específicas y capturas de pantalla pero me respondían lo mismo: Qué versión de SO tienes? Qué cel tienes?

Simplemente ya no la uso.

0
14718Puntos
2 años

Yo dejé de usarla también. A esta altura no me interesa siquiera probar la nueva versión. Espero realmente que funcione mejor.

9
7755Puntos

Por lo visto entonces siempre será mejor con lo nativo👍🏿

7
7063Puntos
2 años

No siempre. Existen muchos factores que pueden influir en la decisión como:

  • Si puedes costearte dos desarrolladores (iOS y Android).
  • Si tu app necesita procesamiento en background o uso de librerías nativas como CoreML.
  • Si ya conoces previamente alguna de las otras tecnologías.
  • La facilidad para sacar updates en ambas versiones al mismo tiempo.
3
18351Puntos
2 años

Exacto, uno tiene que basarse no solo en que es lo mejor en “tecnología”, si no que también en el negocio, no se trata solo de usar la última tecnología fancy.

3
7755Puntos
2 años

Comprendo, siempre sera en base a la necesidad del proyecto.

5
18845Puntos

Por qué optaron por Nativo y no una opción como flutter?

3
29672Puntos
2 años

Aprendi dart y siempre me pregunte ¿Por que no es tan popular Flutter? asi que me fui por React…

5
19526Puntos
2 años

Anteriormente estaba con React Native, hasta ahora se decidieron en ir por completo a nativo, obviamente se iba a tener mejor rendimiento, en si todo es mucho mejor cuando te vas con nativo, la unica desventaja es el mantenimiento de los equipos para cada sistema operativo.

1
1923Puntos
2 años

que curioso tambien pienso q opciones como flutter pueden q considerarlo, pero funciones en background y uso de bateria y otras funciones pienso q es mejor una app nativa. Debieron considerar flutter algun momento pero tendra razones descartarlo

1
157Puntos
2 años

Flutter no esta tan maduro, en Github tiene +5.000 de issues y toca esperar que el equipo de Flutter los resuelva.

1
18351Puntos
2 años

No queríamos otra vez hacer un solo codebase, ya que en este momento tenemos necesidades únicas para cada plataforma. Y contamos con un equipo solido para poder hacer la app en cada plataforma.

5
23595Puntos

Acabo de probar la app desde un iPhone 5s con iOS 12 y si se siente más fluida, solo que en algunas pantallas al parecer está tomando un mayor size, supongo que lo mismo para el iPhone SE. 🤔

3
18351Puntos
2 años

Muchas gracias por tu feedback, lo solucionaremos en el siguiente release.

3
7868Puntos

Muy interesante esa experiencia. Particularmente le tengo algo de idea a ReactNative…empezando que React no me gustó mucho, me gustó más Vue y Angular (de los dos prefiero Vue) y segundo ese salto de JavaScript a nativo es muy grande y por lo tanto es costoso y si haces las cosas mal podrá ser un arma de doble filo. Por lo tanto yo me quedo con Ionic que funciona igual que una web y el usuario final ni se da cuenta (dependiendo tambien de los requerimientos, si se necesita control de hardware recomendaría desarrollo nativo).

1
18351Puntos
2 años

Así es. Y como siempre lo importante es solucionar con lo que tenemos y sabemos. pero date la oportunidad de aprender React Native si ya tienes conocimiento en Javascript. #nuncaParesDeAprender

1
16971Puntos
2 años

Lo qué pasa es que cuando eres un arabe que no sabe programar y tiene 1M de bugs en el código y siempre estás dando excusas claro que vas a preferir tecnologías chimbas jajajajajajaja 🤣🤣

3
5417Puntos

He estado probando la App y el cambio ha sido a mejor, mira que ganar la reproducción en background y el AirDrop es simplemente genial!

2
5417Puntos
2 años

Era AirPlay en vez de AirDrop

2
18351Puntos
2 años

Que genial que ya probaste AirPlay!

3
11346Puntos

Gracias por la explicación y por la transparencia!

1
18351Puntos
2 años

Uno de los grander valores de Platzi es la transparencia.

3

Ahora sólo les falta cambiar en la web React por Svelte

1

jeje, podrían echarle un ojo, igual que a .net core, aunque es una opinión personal basado en el performance, tanto en escalabilidad y rendimiento, aunque se puede relativizar, quizá toma demasiado tiempo tener personas que sepan trabajar en estas tecnologías

1

Aunque quizá digo tonterías, porque es difícil trabajar ciertas circunstancias sin virtual dom, y no conozco todos los casos de performance en .net core

2
5417Puntos
2 años

Lo que se viene bueno con .NET Core es el Web Assembly. 😏O eso parece

2
27847Puntos

Interesante, bueno compartir la experiencia. Sabes revisa el post porque creo que no carga una imagen.

2
3407Puntos

Que paso con la descarga de videos para poderlos ver offline?

2

Que curioso gigantes de la industria se estan moviendo a React Native y ustedes abandonandolo
https://engineering.shopify.com/blogs/engineering/react-native-future-mobile-shopify

1
38470Puntos
2 años

Las apps que necesitan mucho escalamiento y performance, tarde o temprano terminan mudándose a nativas :v

1
9269Puntos
2 años

Airbnb se pasó a nativo porque tenían el dinero para hacerlo (palabras de Freddy), pero siempre una aplicación va a ser mejor si es nativa.

2
29672Puntos

waooo…!! justamente esta semana me estoy empapando en React Native. Me encanto el post

3
19526Puntos
2 años

Deseo que actualicen ese curso junto con el de react navigation.

1
29672Puntos
2 años

si ya tiene un buen tiempo esos cursos

0
11420Puntos
6 meses

Pues ya no volvieron a tocar react native xd

2
4082Puntos

Gracias, me entró curiosidad por MVVM, como puedo aplicarlos en RN? qué ventajas me ofrece?..

1
7868Puntos
2 años

Si has trabajado con Angular o Vue o React tu trabajas con eso. Seguramente con RN también lo has hecho. Eso consiste en actualizar el render en función del modelo que tengas en el componente (sus atributos) y estos tu los puedes modificar también en función de los cambios en tu lógica de negocio (backend, servicios externos, etc)

2
127727Puntos

Yo no había estado utilizando mucha la app en gran parte porque por ejemplo cuando estaba ponía los platzi live y bloqueaba el cel solo para escucharlo cada cierto tiempo la app se pausaba sola y tenia que volver a abrir la app y darle play y así como cada 4 min, espero que eso ya se haya arreglado con este cambio

1
18351Puntos
2 años

Ya eso será cosa del pasado, estamos en este momento mejorando la experiencia del live. Gracias por tu feedback.

2

Hola porque a Nativo y no Flutter ?

1
18351Puntos
2 años

No queríamos tener de nuevo un solo codebase, ya que en este momento tenemos necesidades únicas para cada plataforma. Y contamos con un equipo solido para poder hacer la app en cada plataforma.

2
3106Puntos

Tenemos tantas opciones para desarrollar apps que aveces uno sale mareado cuando tiene que escoger una.

Este tipo de feedback es muy valioso.

2
18351Puntos
2 años

Esa es la idea aportar conocimiento con nuestra experiencia!

2
15329Puntos

Leer el post y que te entre una curiosidad inmensa por aprender acerca del mundo del desarrollo móvil.´
Bastante interesante!

2
4709Puntos

A comenzar se ha dicho

1
18351Puntos
2 años

Así es! #nuncaParesDeAprender

2
6024Puntos

y yo pensando en estudiar REACT!

1
18351Puntos
2 años

Sigue porque no hay mejor que React!

2
2427Puntos

Si la hubieran reescrito en Objective-C tendría todavía mejor performance ✌️

1
18351Puntos
2 años

Los componentes de React Native los hicimos en Objective-c, pero el lenguaje es muy de amor y odio, y toca aprovechar lo hermoso que es Swift!

2
13501Puntos

Acaso alguien tiene alguna experiencia con Xamarin? Nadie habla de Xamarin.Forms, y me encantaría saber sobre ella. Gracias de antemano! 😃

2
18351Puntos
2 años

Xamarin tiene algo bastante bueno y es que te impulsa desde el comienzo a trabajar con MVVM y aparte tiene buen performance.

2
13501Puntos
2 años

Gracias! Entonces le voy a dar una oportunidad y probarlo por cuenta propia!

2
44Puntos

Como usuario apoyo su desición ^-^. Justo ayer estaba tomando el curso de Jest en mi tablet (que tiene pocos recursos) y estuve sufriendo un poco empezando con las descargas y reproduciendo el video. Pero hay algo que me PREOCUPA: yo suelo mover las descargas que están en android/data/platzi/filesDownload a una USB porque no tengo mucho espacio, se podrá hacer lo mismo con las nuevas versiones?

2
18351Puntos
2 años

Esto no te lo puedo confirmar porque estamos trabajando en la seguridad de las descargas. Pero no vas a peder lo que hayas descargado en Android.

1
44Puntos
2 años

Ok, igual sólo era curiosidad. Es entendible que protejan uno de sus recursos más valiosos. Espero con emoción el release de la app nativa, seguro que estará genial 👩‍💻

2
29627Puntos

Gracias por compartir la experiencia.
Yo en lo particular me acostumbre a lidiar con la lentitud de la aplicación para descargar los cursos.
Si me gustaria que encontraran la forma de que cuando yo estoy viendo los cursos offline, al volver a conectarme a datos o un wifi entonces la app actualice los cursos que vi, en la plataforma web, pues me ha sucedido que a veces se me olvidad por donde voy y al entrar en la pagina web, no esta actualizado y tengo que revisar el celular de nuevo para ver donde me quede y luego marcar como vistos los videos en la web.

1
18351Puntos
2 años

Vamos a trabajar en ese feature, así que no dudes en verlo reflejado pronto!

2

y que paso con android studio?? no es nativo tambien?

2
18351Puntos
2 años

Android Studio es IDE donde trabajamos para crear al app de android,

2
2 años

entonce puedo usar android studio tranquilamente para armar mi apk nativa? que es casi similar que la de swift?

2
18351Puntos
2 años

Así es puedes armar tu apk sin ningún problema en Android Studio y al igual el ipa en Xcode

1

Pueden mostrar el código que tenían para mostrar la descarga? Es decir el seguimiento de descarga, por otro lado a qué se refieren con el player? pueden compartir código para saber como lo estaban haciendo?
Gracias por compartir su experiencia!

1
446Puntos

Estoy desarrollando una APP en react native con la funcionalidad de descargar videos en background para luego verlos offline y temo encontrarme con el mismo problema que ustedes. Usaron alguna librería para hacer el download? Tengo pensado usar https://www.npmjs.com/package/react-native-background-downloader , ustedes la probaron? tuvieron problemas con esa? Supuestamente esta pensada justamente para lidear con los procesos zombies en background