Los Prototipos rápidos con Flutter + Kotlin / Native

Wilber Ccori huaman
6 min readSep 7, 2018

--

Resultado de imagen para Flutter + Kotlin / Native
wilberdev

Con la tarea de hacer la aplicación para nuestra próxima conferencia interna de OLX Group y tener mucho en nuestro plato, mi equipo estaba pensando en cómo reducir el tiempo para que hagamos una aplicación para iOS y Android. Lo primero que me vino a la mente fue usar Kotlin, ya que tiene una forma de compilar en otras plataformas. No todo salió según lo planeado, pero (alerta de alerón) lo logramos a tiempo, ¡y aprendimos mucho!

Esta es una historia sobre cómo creamos la aplicación OLX Group Product & Tech Conference en un tiempo récord.

Ha habido un gran esfuerzo por parte de compañías como Google y Facebook en lo que respecta al desarrollo de plataformas cruzadas. Flutter y Kotlin / Native son marcos que surgieron de algunos de esos esfuerzos.

¿Qué es Flutter?

Flutter, desarrollado por Google, se anunció en el año 2017. Utiliza Dart como lenguaje de programación. Flutter admite la compilación tanto para Android como para iOS usando una base de código escrita en Dart. Flutter compila de forma nativa en lugar de usar vistas web dentro de las aplicaciones. Sin embargo, utiliza sus propios componentes de interfaz de usuario en lugar de utilizar los específicos de la plataforma nativa, por ejemplo, UIView en iOS, Fragmentos y ViewGroups en Android. Flutter también admite de forma nativa Material Design y Material Theming en sus componentes de interfaz de usuario.

No teníamos experiencia en Dart, no sentimos que tuviéramos tiempo para aprender un nuevo idioma (tenemos otras prioridades también). Realmente no empezamos a investigar el uso de Flutter hasta que nos dimos cuenta de que no nos quedaba mucho tiempo. Volviendo a la historia, comenzamos con el uso de Kotlin / Native, y desarrollamos algunos datos de simulación y lógica para comenzar:

Kotlin / Estructura de carpetas nativa. Observe que hay una carpeta común, para poner todo el código común, escrito en kotlin. Los proyectos de Android e iOS usan el código de la carpeta común.

¿Qué es Kotlin / Native?

Kotlin / Native es desarrollado por JetBrains, la misma compañía que creó Kotlin. Si no ha oído hablar de Kotlin, es posible que no esté utilizando Internet últimamente. Básicamente es un reemplazo más simple para Java y, además, funciona a la perfección con Java. Kotlin / Native permite tener código común escrito en Kotlin y compilaciones cruzadas para admitir otras plataformas que no son compatibles con Kotlin de forma nativa, como iOS.

El diseño

Le pedimos a nuestro diseñador algunos diseños rápidos para la aplicación de la conferencia, y ella rápidamente usó Material theming para generar un diseño agradable. Hay un complemento para que Sketch genere diseños compatibles con material teórico, que nos ahorraron mucho tiempo y esfuerzo.

Descripción general de los bocetos diseñados por nuestro diseñador. Pudo hacer 3 variaciones del diseño de una vez.

Material Theming permite crear diseños rápidamente y es compatible con iOS y Android

Inicialmente buscamos formas de implementar la interfaz de usuario por separado para Android e iOS. Existe compatibilidad con Material Theming para ambas plataformas, pero aún tendríamos que escribir UI. Pensamos que si podíamos usar Flutter para la interfaz de usuario, solo teníamos que tener una base de código UI y podríamos seguir usando la lógica de Kotlin con la que ya empezamos.

Haciéndolo Kotlin / Native y Flutter trabajan juntos

Como Flutter era nuevo para nosotros, necesitábamos estar seguros de si funcionaría con el código existente que tenemos. Parecía que nadie había intentado usar tanto Flutter como Kotlin / Native. Planeamos tener una arquitectura representada por la imagen a continuación. Esta arquitectura redujo la cantidad de código específico de la plataforma que debe escribirse, y también reduce la cantidad de código Dart, ya que podemos aislar la mayor parte de la lógica en el código común de Kotlin.

Descripción general de la arquitectura de la aplicación para Android e iOS.

Podríamos reducir una gran cantidad del código específico de la plataforma usando Kotlin / Native y Flutter’s Dart. Aunque podría ser posible escribir la mayoría del código común en Dart, estamos más familiarizados con Kotlin, así que usamos más de eso.

¡Funciona!

Limitaciones

Ambos marcos tienen ciertas limitaciones que hacen que su uso no sea tan fácil como puede ser.

Limitación 1: Kotlin / Native solo admite clases Kotlin puras para el código común. Por ejemplo, si desea analizar un entero en una clase java.util.Date o usar esa clase en sí, no podría usarla, ya que la clase java.util.Date requiere JVM. Una forma de lidiar con esto es implementar los métodos en el código de plataforma (Android e iOS) y ‘esperar’ ese método de Kotlin / Native.

Limitación 2: Kotlin también usa objetos Companion para métodos estáticos, que se traducen en un objeto totalmente nuevo para iOS. Una forma de evitar esto es hacer que los métodos estáticos estén disponibles como métodos de instancia o hacer que el método de clase sea una función global.

Limitación 3: Kotlin / Native solo admite compilar para armar el código 64 en iOS. Los últimos dispositivos tienen esta arquitectura de CPU, pero los dispositivos más antiguos seguirán teniendo armv7. Sin embargo, compila a x86 y x86_64, por lo que también puede ejecutarlo en el simulador. Para configurar la compatibilidad con la arquitectura, solo vaya a Configuración de compilación y elimine las otras arquitecturas, aparte de arm64 en arquitecturas válidas.

También existen limitaciones en la comunicación entre el código común de Kotlin, el código de Flutter y el código específico de la plataforma. Flutter puede comunicarse con el código específico de la plataforma mediante canales, pasando un nombre de método y un conjunto de parámetros. Los parámetros están limitados a clases nativas como map, list, string, int y similar. Las cosas se vuelven un poco complicadas al pasar estos objetos, por lo que para manejar esto, se utiliza la serialización de un objeto personalizado. Sin embargo, tanto Flutter como Kotlin / Native tienen soporte limitado para la serialización, por lo que, por ahora, cuando la serialización no es compatible de forma nativa, usamos las clases nativas directamente.

Resumen

Los puntos clave de nuestra experiencia son:

  • Flutter es increíble para prototipos rápidos
  • Flutter y Kotlin / Native todavía están en versión beta pero ya se pueden usar con algunas limitaciones
  • Kotlin / Native funciona bien para reducir la cantidad de código específico de la plataforma
  • Se debe escribir un código de pegamento para pasar / serializar objetos

Hicimos nuestra aplicación con solo una semana de planificación y una semana y media de desarrollo. Pasamos alrededor de una hora al día con cuatro desarrolladores y un diseñador mientras hacíamos malabares con nuestro trabajo habitual.

Nos divertimos mucho creando una aplicación con Flutter & Kotlin, y esperamos que también pruebes estas dos tecnologías.

La misma base de código de Flutter + Kotlin / Native que se ejecuta en iOS.

Puede leer más sobre Kotlin / Native en estos enlaces:

https://kotlinlang.org/docs/reference/multiplatform.html

https://kotlinlang.org/docs/reference/native-overview.html

Y lea / vea sobre Flutter aquí:

https://flutter.io/docs/

MDC-103 Flutter: Material Theming con Color, Forma, Elevación y …

Codifique la interfaz de usuario hermosa con Flutter y Material Design (Google I / O ‘18)

Me gusta lo que lees? Dale una ronda de aplausos.

Desde un aplauso rápido hasta una ovación de pie, aplauda para mostrar cuánto disfrutaste de esta historia

Para conocer mas tecnologias pueden seguirme en mis redes sociales:

Facebook: https://web.facebook.com/wilbeDEV/

facebook: https://web.facebook.com/TechManiako/

Grupo_facebook: https://web.facebook.com/groups/166091130742535/

YouTube: https://www.youtube.com/c/WILBERCCORIDEVELOPER

Blogs: https://www.techmaniako.com/ED/

GitHub: https://github.com/wilberCcoriHuman

--

--