66

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

18225Puntos

hace un año

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

18225Puntos

hace un año

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
14
11800Puntos

"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
18225Puntos
un año

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

5
5275Puntos
un año

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

2
4832Puntos
un año

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
11800Puntos
un año

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

9
7712Puntos

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

7
6477Puntos
un año

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
18225Puntos
un año

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
7712Puntos
un año

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

5
18593Puntos

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

3
27516Puntos
un año

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

5
19437Puntos
un año

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
1613Puntos
un año

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
un año

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

1
18225Puntos
un año

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
22216Puntos

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
18225Puntos
un año

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

3
7267Puntos

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
18225Puntos
un año

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
un año

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
5410Puntos

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
5410Puntos
un año

Era AirPlay en vez de AirDrop

2
18225Puntos
un año

Que genial que ya probaste AirPlay!

3
11014Puntos

Gracias por la explicación y por la transparencia!

1
18225Puntos
un año

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
5410Puntos
un año

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

2
25888Puntos

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
34979Puntos
un año

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

1
8919Puntos
un año

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
27516Puntos

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

3
19437Puntos
un año

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

1
27516Puntos
un año

si ya tiene un buen tiempo esos cursos

0
8401Puntos
4 meses

Pues ya no volvieron a tocar react native xd

2
4026Puntos

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

1
7267Puntos
un año

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
114497Puntos

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
18225Puntos
un año

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
18225Puntos
un año

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
2055Puntos

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

Este tipo de feedback es muy valioso.

2
18225Puntos
un año

Esa es la idea aportar conocimiento con nuestra experiencia!

2
14265Puntos

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

2
4497Puntos

A comenzar se ha dicho

1
18225Puntos
un año

Así es! #nuncaParesDeAprender

2
5013Puntos

y yo pensando en estudiar REACT!

1
18225Puntos
un año

Sigue porque no hay mejor que React!

2
2427Puntos

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

1
18225Puntos
un año

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
11457Puntos

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

2
18225Puntos
un año

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

2
11457Puntos
un año

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
18225Puntos
un año

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
un año

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
29233Puntos

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
18225Puntos
un año

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
18225Puntos
un año

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

2
un año

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

2
18225Puntos
un año

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