{"id":2143,"date":"2020-02-27T19:40:56","date_gmt":"2020-02-27T18:40:56","guid":{"rendered":"https:\/\/strattonapps.com\/?p=2143"},"modified":"2020-02-29T10:14:36","modified_gmt":"2020-02-29T09:14:36","slug":"flutter-future-1","status":"publish","type":"post","link":"https:\/\/strattonapps.com\/es\/mobile-development\/flutter\/flutter-future-1\/","title":{"rendered":"Flutter, presente y futuro del desarrollo m\u00f3vil multiplataforma #1"},"content":{"rendered":"

Explicar por qu\u00e9 este marco innovador podr\u00eda ser el mejor soluci\u00f3n para desarrollo m\u00f3vil<\/strong> vamos a separar los motivos en dos art\u00edculos diferentes para profundizar en cada motivo sin confundir ni aburrir al lector. Esta es la primera parte, y al final tendr\u00e1s un enlace a la segunda parte de esta narraci\u00f3n.<\/p>\n\n\n\n

Si a\u00fan no lo ha hecho y especialmente si no sabe nada al respecto, le recomiendo encarecidamente leer nuestro art\u00edculo sobre Flutter essentials<\/a>. Sin embargo, daremos una peque\u00f1a definici\u00f3n para entrar en contexto para quienes no quieran leerlo.<\/p>\n\n\n\n

Sobre Flutter<\/h2>\n\n\n\n

Flutter es un SDK innovador<\/strong> para crear principalmente aplicaciones para Android e iOS<\/strong> (m\u00e1s plataformas actualmente en versi\u00f3n beta y alfa). Este marco permite a los desarrolladores crear aplicaciones m\u00f3viles nativas multiplataforma hermosas y de alto rendimiento solo codificando una vez, en Flutter.<\/p>\n\n\n\n

Y cuando una nueva tecnolog\u00eda sale al mercado de desarrollo, lo primero que hay que tener en cuenta es cuales son sus ventajas<\/strong>. Es decir, la primera pregunta que debe hacerse es por qu\u00e9 usarlo. En el campo del takeit para el desarrollo de aplicaciones multiplataforma, adem\u00e1s, ya existen muchas tecnolog\u00edas. Cordova, PhoneGap, el nuevo Ionic, etc.<\/p>\n\n\n\n

El atributo "nativo" mencionado anteriormente, en caso de que no lo hayas notado. Pero primero, explicaremos el problema al revisar c\u00f3mo funcionan todas las dem\u00e1s tecnolog\u00edas.<\/p>\n\n\n\n

Relaci\u00f3n marco-dispositivo<\/h2>\n\n\n\n

El primer argumento ser\u00e1 el camino Flutter y los dispositivos m\u00f3viles interact\u00faan<\/strong>. Vamos a repasar c\u00f3mo el framework o el software interact\u00faa con el dispositivo en todas las tecnolog\u00edas para saber c\u00f3mo es este v\u00ednculo, c\u00f3mo funciona realmente.<\/p>\n\n\n\n

Los SDK de la plataforma (Android y iOS)<\/h3>\n\n\n\n

Tanto Android, el sistema operativo de Google lanzado en 2009 como iOS, lanzado en 2008, funcionan de la misma manera. Est\u00e1n basados en diferentes lenguajes (Objective-C y Java) pero su funcionamiento es el mismo.<\/p>\n\n\n\n

\"Native
Plataforma nativa<\/figcaption><\/figure>\n\n\n\n

Su aplicaci\u00f3n puede ordenar a la plataforma que haga dos cosas diferentes: crear widgets o acceder a servicios<\/strong> del dispositivo m\u00f3vil (c\u00e1mara, ubicaci\u00f3n, bater\u00eda, sensores, etc.). Esos widgets se representan en un lienzo de pantalla y algunos eventos se devuelven a los widgets. <\/p>\n\n\n\n

Aunque es una arquitectura simple, el problema con esto es el hecho de que tienes que crear aplicaciones separadas<\/strong> con dos c\u00f3digos diferentes porque tienen diferentes idiomas nativos y widgets.<\/p>\n\n\n\n

WebViews<\/h3>\n\n\n\n

Cuando Android e iOS crecieron y, por lo tanto, el desarrollo m\u00f3vil lo hizo, sus clases para administrar contenido web<\/strong> sin salir de la aplicaci\u00f3n se volvi\u00f3 cada vez m\u00e1s vers\u00e1til, y permiti\u00f3 la creaci\u00f3n de frameworks que aprovechan esa vistas web<\/strong> para mostrar contenido en ambas plataformas a trav\u00e9s de ellas. As\u00ed es como surgieron Phonegap y Apache Cordova.<\/p>\n\n\n\n

\"WebView
Tecnolog\u00edas WebView<\/figcaption><\/figure>\n\n\n\n

Usando las clases WebView (Android) y UIWebView (iOS, ahora en desuso para WKWebView), renderizan c\u00f3digo HTML, CSS y JavaScript, y existe una comunicaci\u00f3n entre el JavaScript de la vista web y el c\u00f3digo nativo para acceder a los servicios. Sin embargo, dado que es dif\u00edcil para lenguajes como JavaScript comunicarse directamente con el c\u00f3digo m\u00f3vil nativo, implementan un "puente"<\/strong> que hace conexi\u00f3n entre el reino de JavaScript y el reino nativo.<\/p>\n\n\n\n

Al ver que los servicios de plataforma normalmente no se llamaban con tanta frecuencia, esto no caus\u00f3 demasiados problemas de rendimiento al principio. Pero cuando el mercado de aplicaciones creci\u00f3 cada vez m\u00e1s, esta tecnolog\u00eda se revel\u00f3 como bastante limitado<\/strong>, especialmente por el rendimiento (es por eso que el prop\u00f3sito de Flutter era hacer una aplicaci\u00f3n fluida para ambas plataformas renderizando a 120 FPS, leer m\u00e1s aqu\u00ed<\/a>).<\/p>\n\n\n\n

Vistas reactivas<\/h3>\n\n\n\n

A medida que lleg\u00f3 la programaci\u00f3n reactiva, los marcos web reactivos como ReactJS<\/a> (y otros) se han vuelto populares principalmente porque simplifican la creaci\u00f3n de vistas web. En 2015, la creaci\u00f3n de React Native trajo los muchos beneficios de vistas de estilo reactivo<\/strong> a aplicaciones m\u00f3viles y ahora es popular.<\/p>\n\n\n\n

\"React
Reaccionar nativo<\/figcaption><\/figure>\n\n\n\n

En React Native, el \u00e1mbito de JavaScript accede a los widgets de la plataforma en el \u00e1mbito nativo, en lugar de utilizar WebView. Sin embargo, tiene que irse a trav\u00e9s del puente<\/strong> para ellos tambi\u00e9n, y ahora no solo para acceder a servicios nativos, sino tambi\u00e9n para renderizar<\/strong>. Y debido a que normalmente se accede a los widgets con bastante frecuencia (hasta 60 veces por segundo) especialmente durante animaciones, transiciones, etc., esto puede causar problemas de rendimiento<\/a> y generalmente son dif\u00edciles de resolver. La parte nativa es r\u00e1pida, la parte JS es r\u00e1pida, pero moverse de una a otra causa una cuello de botella de rendimiento<\/strong>y debe mantener el flujo de datos entre ellos al m\u00ednimo.<\/p>\n\n\n\n

Aleteo<\/h3>\n\n\n\n

Flutter se ha inspirado en React Native y tambi\u00e9n utiliza vistas de estilo reactivo. Sin embargo, los creadores tuvieron una gran idea para evitar el puente de conexi\u00f3n<\/strong>. En lugar de usar JavaScript, usaron el lenguaje compilado llamado Dart, tambi\u00e9n desarrollado por Google. Dart se compila con anticipaci\u00f3n (AOT) directamente en c\u00f3digo nativo, y as\u00ed es como no solo solucionaron problemas de rendimiento, sino tambi\u00e9n tiempos de inicio de aplicaciones mejorados<\/strong>.<\/p>\n\n\n\n

Esto solo (vistas reactivas sin puente) ya deber\u00eda ser una raz\u00f3n para hablar de Flutter como una tecnolog\u00eda de desarrollo interesante e innovadora que vale la pena probar, pero es solo el aperitivo de la revoluci\u00f3n de Flutter. El plato principal es su implementaci\u00f3n de widgets<\/strong>. La importancia es tal que discutiremos el funcionamiento de flutter en la siguiente secci\u00f3n, la secci\u00f3n de Widgets.<\/p>\n\n\n\n

Widgets de Flutter<\/h2>\n\n\n\n

Los widgets son uno de los elementos m\u00e1s importantes de una aplicaci\u00f3n. Ellos crear y modificar la vista<\/strong> y son el comportamiento principal y pueden hacer o deshacer una aplicaci\u00f3n. Los servicios son funciones complementarias que sirven a los widgets para completar una aplicaci\u00f3n y darle funcionalidad.<\/p>\n\n\n\n

(gif)<\/p>\n\n\n\n

Entre otros, deben ser<\/p>\n\n\n\n