Guía para principiantes de Flutter

Fuera de mediados de 2019, la plataforma cruzada entró firmemente en la vida de las nuevas empresas en todo el mundo, pero con mayor frecuencia tanto los equipos de desarrollo de outsourcing como los clientes que confían en la reducción de costos lo están analizando. Alguien está apostando por React Native, alguien está explorando las posibilidades de Kotlin Multiplatform, y Evgeny Saturov saturovv , el nuevo invitado de podcast de AppsCast, ha estado desarrollando activamente Flutter durante los últimos seis meses, monitoreando las actualizaciones del marco y promocionando la tecnología a las masas. Una gran cantidad de enlaces y consejos útiles para el desarrollador principiante de Flutter: desde pautas hasta el repositorio con ejemplos de implementación de arquitectura, en una conversación con Eugene.



AppsCast es un podcast de desarrollo móvil lanzado con el apoyo de la conferencia AppsConf . Cada dos semanas, un nuevo invitado con el que estamos con Daniil Popov ( int02h ) habla sobre tecnologías, mejores prácticas, la vida de los desarrolladores, así como sobre holívar y comparte experiencias.

Alexei Kudryavtsev : Hola a todos, hoy estamos visitando a Zhenya Saturov, desarrollador de Surf y presentador de Flutter Dev Podcast . Zhenya, cuéntanos un poco más sobre ti.

Evgeny Saturov : Toda mi vida consciente he sido un desarrollador de Android, pero no estoy tan seguro de mi futuro sin nubes como antes. En los últimos seis meses, en la empresa nos hemos interesado activamente en Flutter, estamos tratando de integrarlo en el proceso de desarrollo de la producción.

Alexei Kudryavtsev : ¿Cómo cambiaste repentinamente a Flutter desde un desarrollo de Android?

Evgeny Saturov : Una pregunta difícil. Yo mismo a veces me pregunto. Accidentalmente escuché sobre Flutter de su propagandista más importante del país, Zviad Kardava, en un evento en Novosibirsk. Estudiamos y decidimos probar, durante seis meses hemos estado escribiendo en Flutter, nos hemos hecho amigos con una IU declarativa.

Flutter atrapa

Daniil Popov : ¿Qué te atrajo de Flutter?

Evgeny Saturov : Flutter tiene un umbral de entrada bajo, carece de los conceptos de Actividad y Fragmento, y el ciclo de vida es elemental y consta de tres etapas. Todo en Flutter es un widget: la aplicación en sí, que solíamos representar como una clase de aplicación, cualquier bloque es un widget en el que está incorporado otro widget. Todas las pantallas están construidas exclusivamente por composición. La estructura de una aplicación Flutter requiere una arquitectura más racionalizada, un flujo de datos más coherente.

Tu cabeza se rompe un poco cuando intentas escribir una vista personalizada en Flutter después del desarrollo de Android. No funciona ahí. Debe incrustar vistas entre sí y obtener elementos combinados más complejos.

En Google I / O introdujo Jetpack Compose para Android, que le permite escribir la interfaz de usuario de manera declarativa. La idea está totalmente tomada de Flutter, incluso los nombres se reutilizan.

Alexei Kudryavtsev : Existe una teoría de la conspiración que Google está preparando a los desarrolladores de Android para Flutter.

Evgeny Saturov : Puedo arrojarte otra teoría de la conspiración: Apple está preparando a sus desarrolladores para Flutter.

La diferencia entre Flutter y otras soluciones multiplataforma

Alexei Kudryavtsev : Todo lo que dijiste es similar a la característica de los productos React Native o Xamarin. Cual es la diferencia

Evgeny Saturov : Escribir una buena aplicación productiva en React Native es difícil debido a las soluciones técnicas que lo sustentan. La interacción con la plataforma solo es posible a través de JavaScript Bridge. En el proceso, esta operación reduce significativamente el rendimiento, lo cual es crítico cuando se procesa la IU.

Flutter, sin embargo, se ocupó del problema de rendimiento a un alto precio: los desarrolladores del marco tuvieron que escribir sus paquetes de widgets en Dart (Flutter también está escrito en él). Al renderizar, el problema de subsidencia por fps no solo desapareció, sino que el equipo de Flutter también asegura que, en teoría, es posible lograr no solo 60 fps, sino también 120 fps en dispositivos compatibles con esto.

Muchos discuten el tema de por qué el marco no es compatible con Kotlin y si aparecerá, pero los desarrolladores de Flutter dicen que no tienen esa tarea, pero tal vez alguien más lo haga, como JetBrains.

Daniil Popov : Es obvio que hay Kotlin Multiplataforma. Debe formar parte del compilador que compila Kotlin en Dart, y habrá ganancias.

Alexei Kudryavtsev : Tú lo dices, como si fuera como chasquear los dedos.

Evgeny Saturov : La mayor parte del trabajo ya se ha hecho. En Google I / O, hablaron sobre la optimización del recolector de basura en Kotlin, lo que le permitirá utilizar toneladas de objetos en un milisegundo. Esto es importante, porque al representar la interfaz de usuario, se regeneran miles de gráficos de widgets cada 16 milisegundos y deben eliminarse con urgencia para evitar la obstrucción de la memoria. Anteriormente, Kotlin no sabía cómo, a diferencia de Dart, pero ahora nada impide arrastrarlo hacia Flutter.

Alexei Kudryavtsev : La primera parte del proceso de reciclaje es la asignación de muchos objetos. No, ¿el rendimiento disminuye en este punto?

Evgeny Saturov : Los objetos en sí mismos son ligeros. Profundizando, la aplicación Flutter es una gran vista del reciclador, una lista con elementos reutilizables que se representan solo cuando cambian los datos detrás de ellos. Al mismo tiempo, los widgets que se recrean cada 16 milisegundos no tienen nada que ver con los widgets que están en Android y son responsables de dibujarse en el lienzo.

Aquí el widget es una clase de datos, en la que hay datos que describen este widget. El widget que se dibuja en el lienzo existe en una sola copia durante todo el ciclo de vida. Solo su contenedor de datos se vuelve a crear por completo. Esto le permite trabajar rápidamente sin obstruir su memoria.

Flutter es un proyecto de código abierto.

Este no es el tipo de código abierto que se refleja una vez por trimestre desde un repositorio cerrado a un github público. Este es un verdadero código abierto, donde el desarrollo se lleva a cabo directamente en el repositorio abierto en el github. Puede realizar cambios en los widgets, escribir su paquete de widgets y usarlo en su empresa.

Alexei Kudryavtsev : Si hicieron sus propios widgets por completo, ¿cómo van las cosas con las animaciones y las transiciones entre pantallas, por ejemplo, en iOS?

Evgeny Saturov : La pregunta más importante es cómo hacer que la aplicación parezca familiar para los usuarios de esta plataforma. Fuera de la caja, esto no sucede en casi ningún caso. Si escribe una aplicación en Dart y utiliza algún tipo de paquete de widgets, al inicio, la aplicación en Android e iOS tendrá el mismo aspecto.

Para obtener la experiencia nativa en la plataforma, debe probar manualmente la plataforma en la aplicación en ejecución. Si se trata de iOS, utilizará widgets del Cupertino Pack, si es Android, widgets del Material Pack. Lo mismo con las transiciones: puede activar el deslizamiento hacia atrás para iOS, pero en Android habrá navegación nativa.

Alexei Kudryavtsev : ¿Cómo va el cambio entre paquetes? ¿Realmente necesita escribir "si iOS, use esto", "si Android, entonces esto"?

Evgeny Saturov : Sí, exactamente, literalmente. En Google I / O, pregunté a los desarrolladores de Flutter por qué no cambiar de la caja, coser un cheque dentro de la plataforma que está funcionando actualmente y configurar automáticamente widgets. Después de todo, la gente espera que un marco de interfaz de usuario multiplataforma haga todo esto por sí mismo. Respondieron que querían dar a los usuarios la libertad de elegir cómo debería verse la aplicación.

Dado el hecho de que es posible escribir paquetes de widgets de marca para su sistema de diseño, puede escribir una aplicación con la misma apariencia en ambas plataformas.

Acerca de los componentes internos de Flutter

Daniil Popov : Entonces, ¿Flutter tiene su propio motor de renderizado, que dibuja independientemente todos los widgets?

Evgeny Saturov : Sí, pero "tu" no es la palabra correcta. Este es Skia, un conocido motor que ha estado funcionando en Chrome, Firefox y otros navegadores durante mucho tiempo.

De hecho, el equipo Flutter es un equipo derivado de Chromium.

Los desarrolladores tuvieron la tarea de acelerar el motor Chromium al máximo. Al mismo tiempo, no había ningún requisito para preservar la capacidad de representar la página html. Con esta condición, pudieron acelerarlo casi veinte veces y comenzaron a pensar qué hacer con tal resultado.

Quedó claro que la web no es la única aplicación para este motor, e intentaron hacer algo para el desarrollo móvil. Apreté Skia, escribimos sus widgets y obtuvimos aplicaciones bastante potentes. Luego lo terminaron iterativamente hasta el estado actual, cuando podemos escribir aplicaciones completas, con una implementación meticulosa indistinguible de las nativas.

Alexei Kudryavtsev : ¿Qué más hay bajo el capó de Flutter? ¿Puede decirme en qué más consiste, dónde está la optimización allí, que permite lograr dicho rendimiento?

Evgeny Saturov : Si hablamos de la arquitectura de la plataforma en sí, entonces hay que distinguir dos capas principales. La base está escrita "en los profesionales". Incluye Skia, un motor de gráficos que dibuja toda esta belleza, un motor de texto completamente prestado de Android y Dart VM. La segunda capa está escrita completamente en Dart. Contiene todos los paquetes de widgets: animaciones, procesamiento de gestos, Foundation Pack con todo tipo de cosas. Debido al hecho de que todo está escrito en Dart, se proporciona un buen rendimiento.

Inmediatamente insertaré cinco centavos: si después de esta versión decide intentar hacer algo en Flutter, instale el complemento en Android Studio, recopile su primera aplicación y diga que ha sido cruelmente engañado, ya que todo es lento, tendrá razón. Esto sucede durante la compilación de depuración, que realmente se ralentiza, las animaciones se retrasan, las listas apenas se desplazan y la aplicación pesa unos 60 MB. El hecho es que en la versión debut estás tirando una gran pieza de Dart VM. Esta es una tarifa por la capacidad de recompilar sobre la marcha. Cuando ensambles la versión de lanzamiento, todos estos megabytes serán arrastrados por el viento, la aplicación funcionará mucho más rápido, sin hundimiento de fps. Este comentario es muy importante para no asustar a los desarrolladores principiantes de Flutter.

Dart VM es un tema aparte. Es de destacar que el principal contribuyente es nuestro desarrollador ruso Slava Egorov, con quien grabaron el lanzamiento de Flutter Dev Podcast . Dart VM le permite actualizar rápidamente el código cuando se realizan cambios. Esto se llama Hot Reload: realiza cambios en el código, hace clic en el botón y, después de un segundo, los cambios ya están visibles en el dispositivo. Esto acelera enormemente el desarrollo y crea una atmósfera favorable en el equipo.

Alexei Kudryavtsev : Me parece que es importante que durante la recarga en caliente permanezca en un estado de flujo. Es divertido en pequeños proyectos. Pero cuando el proyecto es grande, mueve una vista y espera diez minutos.

Evgeny Saturov : Sí, escuché quejas de ayosnikov de que la asamblea puede demorar entre 10 y 15 minutos.

Uno de los puntos fuertes de Flutter es el peaje.

No sé cómo en iOS, pero en Android, el peaje es un fastidio. Cada actualización de Android Studio rompe algo, y funciona lentamente, requiere recursos poco realistas, el último procesador y una montaña de RAM. Flutter ofrece inmediatamente peaje ligero. No es necesario trabajar en Android Studio, puede descargar VS Code, instalar un complemento y esto será suficiente para el desarrollo. Debo decir de inmediato que para un trabajo completo con Flutter, todavía necesita equipo de Apple, ya que de lo contrario no podrá verificar su ensamblaje en el iPhone.

Daniil Popov : Dijiste que Flutter se está desarrollando a pasos agigantados, pero ¿habrá problemas de compatibilidad con versiones anteriores debido a esto? Por ejemplo, convencí al negocio de hacer una aplicación en Flutter, escribimos, depuramos, y aquí viene la nueva versión de Flutter o Dart, y nuestro código no se compila, todo se desmorona. Me senté en un charco frente al cliente.

Evgeny Saturov : Esto podría muy bien suceder. Hay algo tan interesante como las encuestas UX realizadas por el equipo de Flutter.

La última encuesta preguntó: "¿Está listo para cambios no compatibles sin compatibilidad con versiones anteriores en nombre de la simplicidad y la pureza del marco?" Más del 80% dijo que estaban listos.

No sé si pensaron bien antes de responder la pregunta, y qué tan legítimos fueron los resultados, pero la presencia de tal publicación dice que en adelante los desarrolladores permitirán cambios no admitidos. Sin embargo, ayosniki no se acostumbra. ¿Cuánto se ha actualizado Swift de manera radical?

Por donde empezar

Daniil Popov : ¿Por dónde empezar si decides probar Flutter por ti mismo? En aras del interés, abrí los codelabs de Google y hay ejemplos concretos de cómo transferir de Java a Dart. ¿Existe tal cosa para los desarrolladores de iOS?

Evgeny Saturov : El equipo de desarrollo de Flutter ha publicado una serie de artículos sobre cómo migrar a representantes de varios perfiles. Hay Flutter para desarrolladores de Android , Flutter para desarrolladores de iOS . Abro y veo, por ejemplo, "¿Cuál es el equivalente para la vista de interfaz de usuario en Flutter?" o "¿Dónde está mi Storyboard?". Todas estas preguntas son respondidas. Te aconsejo que comiences con estos artículos, todos están en la documentación de Flutter.

Todavía necesito tocar el tema de cómo hacer amigos con Dart como lenguaje de desarrollo para Flutter. Hay un Dart Language Tour para esto . Existen todos los conceptos básicos de Dart. Pero, sinceramente, algunas cosas difieren un poco más significativamente (especialmente si profundiza), faltan algunas cosas, por ejemplo, sobrecarga de funciones, aún necesita poner un punto y coma al final de la línea ...

Alexey Kudryavtsev : ¿Hay alguna documentación? ¿A quién puedo seguir en Twitter? Blogs en el medio?

Evgeny Saturov : Por supuesto, ahora hay mucha información. Hay un sitio web de Flutter con instrucciones detalladas sobre cómo configurar un entorno de desarrollo, qué descargar, qué SDK, complementos para instalar. Hay palabras de código, son bastante simples y razonablemente informativas, ya que no dan una centésima parte de lo que es Flutter. Pero primero, para comprender el concepto en principio, los codelabs funcionarán. No recomiendo pasar por todo, hay algunos bastante complicados que integran Google Maps en la aplicación. Esto también es interesante, pero hay más problemas con las claves que con el desarrollo real. Es suficiente pasar por los primeros tres. Hay ejemplos más funcionales: clones de Whatsapp reales, aplicaciones de Instagram con supuestos.

Alexei Kudryavtsev : Esto es genial, junto con las instrucciones de migración.

Evgeny Saturov : Sí, puedes ver cómo en realidad la gente hace esas cosas que estamos acostumbrados a ver en las aplicaciones. Ayuda a comenzar.
Además, hay muchos cursos pagos en Udemy, pero dudo que sea muy necesario. Observé en qué consisten y toda esta información (tal vez no tan estructurada) se puede encontrar absolutamente gratis.

También recomiendo el sitio https://itsallwidgets.com/ , que le permite instalar aplicaciones de exhibición en su dispositivo en este momento (no importa si va a desarrollar algo en Flutter o no) y ver cómo funcionan. Hay una aplicación Historia de todo que se escribió en tres meses. Este es un fan absoluto, animaciones locas. Hay una línea de tiempo gigante que puede ampliar, y varios episodios de la vida humana comienzan a aparecer en ella. Cada uno tiene su propia animación personalizada. Todo se hace en Dart sin bibliotecas nativas. En este sitio puedes entender dónde están las capacidades de Flutter: hay juegos escritos exclusivamente en Dart, prestados en Skia, también hay aplicaciones regulares.

El concurso Flutter Create se celebró recientemente: tenía que escribir su propia pequeña aplicación con la condición de que la fuente, incluidas todas las dependencias, no pesara más de 5Kb. El compañero ganó, quien dio un paso interactivo en la tierra, que puedes girar, pinchar en cualquier lugar y ver un pronóstico del tiempo real. Se ve completamente poco realista. Estas cosas pueden usarse para inspirarse.

Y aún puede usar varios repositorios en GitHub creados por entusiastas. Todos se llaman igual - Flutter impresionante. Estas son colecciones con todas las muestras, bibliotecas, artículos.

Sobre recursos de información. Recomiendo suscribirse al canal oficial de YouTube Flutter. Hay espectáculos que salen regularmente. Flutter Widget de la semana : cada semana una historia detallada sobre un solo widget, los principales casos de aplicación y características. El Boring Flutter Development Show es un formato de espectáculo interesante que dura una hora y sale sin editar. Todo este tiempo, los participantes están codificando. Parece que lo están haciendo sin mucha preparación, porque constantemente surgen errores, intentan hacer algo, son tontos, no entienden lo que está sucediendo. Ver esto es asombrosamente interesante.

Si miras todos estos programas (había relativamente pocos), puedes convertirte en una persona completamente diferente y creer que has estado escribiendo Flutter toda tu vida. Traen temas interesantes, problemas que enfrentan las personas y van en busca de una solución. Está protagonizada por todas las estrellas principales de Flutter: Emily Fortuna , Andrew Brogdon . Puede suscribirse a ellos en Twitter, están publicando activamente. Definitivamente debería suscribirse a Brian Egan , tiene un repositorio con 16 muestras con diferentes patrones arquitectónicos. Esto es algo indispensable cuando ya está escribiendo en Flutter y al comienzo del proyecto debe elegir la arquitectura que utilizará. Solo ve a Brian, y él ya ha preparado todo para ti. Estos muchachos están impulsando la industria de desarrollo de Flutter.

Aleteo en producción

Alexei Kudryavtsev : Digamos que soy el director técnico de la empresa. ¿Dónde puedo buscar desarrolladores de Flutter?

Evgeny Saturov : Es como la gente: hay salas de chat abiertas en un telegrama con suficientes personas que ya escriben en Flutter. Pero diría que no tiene que buscar un desarrollador de Dart. El lenguaje es una herramienta y su ignorancia no es un obstáculo para la contratación. Otra pregunta es que Flutter no es solo un código Dart. Aún necesita acceder a la plataforma. Y aquí está la pregunta: qué tan rápido los desarrolladores de Android descubrirán cómo hacer esto en iOS, y viceversa, qué tan rápido su desarrollador web lo resolverá, cómo hacerlo tanto allí como allí.

Actualmente, el equipo de desarrollo de Flutter más equilibrado está formado por desarrolladores de Android e iOS.

Otra cosa es que esto no siempre es posible de lograr, ya que los ayosniki aún desconfían de Flutter.

Alexei Kudryavtsev : ¿Cómo se usa Flutter en la producción? ¿Cuántos proyectos escribiste en él como estudio? ¿Y cuánto entra?

Daniil Popov : ¿Y quién más además de ti escribe sobre eso?

Evgeny Saturov : En nuestro caso de outsourcing, esto vuela con fuerza, porque podemos ofrecer un precio más bajo que para dos aplicaciones nativas. Durante los diez años de existencia de marcos nativos, todos los clientes están acostumbrados a tener que pagar dos veces por el mismo trabajo por defecto, lo cual es costoso, especialmente para las pequeñas empresas que cuentan dinero.

Para ellos, Flutter es un salvavidas, como cualquier plataforma cruzada, solo Flutter da un resultado realmente genial.

Y ya hay clientes que vienen y dicen: - Solo necesitamos Flutter. Recientemente, esto ha estado sucediendo cada vez más.

Todavía estamos recopilando análisis porque hemos completado un pequeño proyecto que hemos elegido como piloto. Resultó hacerse una vez y media más rápido que si estuviéramos haciendo dos proyectos nativos en paralelo. Debe tenerse en cuenta que esta fue nuestra primera experiencia seria y que muchos problemas se resolvieron durante mucho tiempo. Idealmente, puede lograr un doble aumento en la velocidad con las fuerzas de un equipo más pequeño. Y no olvide que entonces habrá la mitad de la depuración, no tendrá que corregir errores en dos plataformas.

Sobre quién más está usando Flutter. Recientemente descubrí que ciertos proyectos (por supuesto, no emblemáticos) están escritos en Odnoklassniki, en Grab, un taxi en el sudeste asiático, que Uber compró recientemente.

La tendencia general es esta: es muy adecuada para la creación de prototipos, adecuada para la experimentación, porque hay interoperabilidad con los nativos.

Flutter iOS Android-, A\B , , , .

-, ( json, , ).

Flutter ? , , , , , . Flutter — UI, , , .

: ?

: , iOS - , Flutter , . ?

: iOS , , , -, GPU. , iOS- — CPU. , , Flutter, CPU, GPU. - . opengl . Flutter , .

: . , Flutter Engine, . , : APK , 64- . , -.

( ), , iOS- , X-Code ( ).

. Cupertino Widgets 70%. view controller — , . — , .

, , : , . , res, , . Flutter Dart-, . , .

Flutter

: Flutter, roadmap?

: , . Google I/O Flutter for Web , Flutter- web- . Flutter Engine. , . roadmap — . , , .

, , — .

Flutter, , , , , .

, Flutter- . showcase Flutter Live, . flutter-: . , , - developer preview, .

, Flutter . , , .

Release Notes , . , , , , , . , , - , issues Flutter.

Conclusiones

: . Flutter , , . Xamarin, . , Flutter .

, Dart . , . , Dart — , . UI , Flutter.

: Android-, Flutter: « 2019 , , - , Flutter».

, , .

Flutter , AppsConf .