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.
Conoce los principios de Clean Architecture o arquitectura limpia
¿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:
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.
class CourseViewModel {
lazy var course = Observable<Course>()
func getCourse() {
repo.getCourse { courseRes in
guard let courseRes = courseRes else { return }
self.course.value = courseRes
}
}
}
Repository:
Se encarga de pedir la información a la API, Base de Datos, etc.
class CourseRepository {
func getCourse(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.
class CourseViewController: UIViewController {
lazy var viewModel = CourseViewModel.shared
var course: Course?
override func viewDidLoad() {
super.viewDidLoad()
viewModel.getCourse()
viewModel.course.observe = { course in
self.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 (2019)
