Más bien, esta es otra historia sobre cómo cambié a un nuevo marco) El
material no implica la verdad última. Aquí solo se describen las soluciones que elegí para mí y que, teniendo una gran experiencia en el desarrollo de React & React Native, me resultaron más fáciles de aplicar en un proyecto real.
Contexto
Para empezar, describiré, por así decirlo, el contexto. Ha aparecido una orden: escribir una pequeña aplicación móvil multiplataforma (alrededor de 15 pantallas). Naturalmente, por costumbre, comencé a hacerlo en React Native. En dos semanas, la aplicación se implementó en aproximadamente un 80%.
El fin de semana leí otro artículo de Surf en Habré con los resultados de la encuesta. Y vino el pensamiento, ¿por qué no intentarlo? ¿Podré repetir lo que ya se ha escrito en un nuevo marco para mí? Se decidió pasar el fin de semana probando esto. Como resultado, durante la semana siguiente, no solo se reescribió el 80% que había antes, sino también el 20% restante. ¡el tiempo de desarrollo se ha reducido a más de la mitad!
pros
En primer lugar, la ventaja es la velocidad del diseño. Las pantallas se remachan MUY rápido. Degradados lineales, svg, gif, prácticamente todo listo para usar. Componentes superpuestos ( posición: absoluta ): no hay problema en absoluto. Cualquier cosa que cause dolor en React Native se hace con un clic de los dedos. ¡Las animaciones son generalmente un cuento de hadas! La misma pantalla con componentes constantemente animados se pasó varias veces menos tiempo con Flutter.
Desventajas
Hay dos inconvenientes tangibles. El primero es la documentación. Muy poco en ruso. El inglés oficial no está muy bien estructurado, sí, da muchos ejemplos de código útiles, pero es difícil entender algo sensato a partir de la arquitectura general de la aplicación.
La segunda desventaja son los paquetes. Todavía hay un completo desastre allí. Elegir un paquete realmente bueno para el que desea no es una tarea trivial. En algún lugar, una función no funciona, en otro lugar. Se dedica mucho tiempo a la selección. Como opción, agregue algo usted mismo, pero aquí es cuando me acostumbro)
Experiencia: ganchos
Mi conocimiento de React se remonta a los días en que las clases normales acababan de aparecer en él. Ahora no puedo imaginarlo sin ganchos y ya me he olvidado de las clases. Para flutter, hay una maravillosa biblioteca flutter_hooks que le permite incorporar ganchos familiares a su proyecto. Para mí, reemplazó completamente a StatefulWidget . Hay muchos ganchos, puedes escribir los tuyos, pero la mayoría de las veces se usan useEffect , useState y useMemoized en mi código . Para animaciones, useAnimationController .
Tal vez esta no sea la mejor solución (estoy listo para leer sobre las desventajas en los comentarios), pero le permite usar el fondo de React en un nuevo marco para usted. Ni siquiera veo ninguna razón para dar ejemplos con código: ¡todos los desarrolladores de React conocen esto como nuestro padre!
Experiencia: gestión estatal
En un momento tuve que trabajar con redux , y con mobx , e incluso con exóticos, como storeon . Parece que (redux / mobx) también está bajo Flutter, pero, francamente, no lo dominé) En mi opinión, allí todo es demasiado complicado en comparación con lo que había en React. Por supuesto, puede pasar más tiempo y resolverlo, pero por qué, cuando encontré una solución mejor: riverpod .
Una biblioteca de Remi Rousselet , autor de flutter_hooks ; naturalmente, ambos funcionan muy bien). De hecho, es un Proveedor modificado . Simplemente agregue a su runApp ( ProviderScope (...))envoltorio sobre todo lo demás y obtenga el alcance global en toda la aplicación, accesible desde cualquier widget. Es suficiente escribir useProvider ( providerName ) en el método de compilación de HookWidget y tenemos datos disponibles del proveedor especificado.
Hay muchas opciones de proveedores en la biblioteca, pero las más básicas son ChangeNotifyProvider y StateNotifyProvider . Toda la lógica empresarial se puede eliminar de forma segura de los widgets y transferir a estos proveedores. Además, están perfectamente combinados entre sí y no será difícil acceder a los métodos y datos del otro desde uno.
El patrón es muy similar a los patos redux.el enfoque que, para mí personalmente, se ha convertido en el más cercano en el mundo de React. Sólo los "patos" son más pequeños. Lo principal que hay que recordar aquí es que es mejor tener muchos proveedores pequeños que se usarán en diferentes widgets que uno grande para ellos, porque los widgets que realmente se han cambiado se volverán a dibujar.
Decepción: web
Después del éxito abrumador (para mí) con el desarrollo de una aplicación móvil, como cualquier pila completa que se precie, decidí tocar Flutter para web. De nuevo, reescribiendo una de las aplicaciones corporativas que realmente funcionan.
Por supuesto, flutter web todavía está en beta, y todo lo que se describe a continuación se aplica específicamente a la versión beta. Realmente espero que con el lanzamiento muchas cosas cambien para mejor. Sin embargo, Flutter me decepcionó aquí.
Lo primero que necesita saber Flutter Web no se trata de sitios web, ¡sino de aplicaciones! Aquellos. es necesario escribir de la misma forma que para el móvil. Todos los widgets son iguales. No puede utilizar JS de terceros en su código. Solo acceda a él a través de dart: js . Accediendo a html también a través de dart: html... Esto corta casi todo lo que ya se ha hecho en el mundo web a la vez. Si quieres una animación genial que ya se haya implementado en algún lugar de css + js, entonces debes escribir un análogo en flutter o usar dart: js, lo cual no siempre es fácil. Es imposible usar sin dolor una biblioteca JS / css lista para usar.
¡El segundo inconveniente son los paquetes nuevamente! Aunque en pub.dev la mayor parte está marcada como compatible con web, android e ios, de hecho, uno u otro suele funcionar. Aquellos. no podrá crear un código completamente multiplataforma.
Los paquetes para la web suelen ser un envoltorio sobre sus contrapartes js. Pero casi siempre no se mantienen al día con la versión del paquete que están empaquetando.
Ejemplo:
La tarea consiste en realizar la autorización a través de MS y recibir datos del usuario.
En el buen JS antiguo, todo es simple: tome msal ymicrosoft/ microsoft-graph-client y disfrute del resultado. Encuentra msal_flutter en
Flutter , conéctalo ... y resulta que el paquete web no lo admite. De acuerdo, encontramos msal_js : este es un contenedor sobre el msal habitual, por lo que debe incluirlo en index.html a través de la buena etiqueta de script antigua. Pero si msal ya se ha actualizado a 1.4.2, ¡este paquete admite un máximo de 1.3.0!
Bueno, bueno, obtuvimos el token a la mitad con dolor, ¿qué pasa con los datos del usuario? Hay un paquete microsoft_graph , sin documentación al respecto. Para encontrar el método requerido, debe ingresar al código del paquete y buscar allí. ¡Y descubrir al final que solo un par de ellos se implementan allí para trabajar con tareas! Encuentra otro msgraph- ¡de modo que generalmente el único método es compatible!
Afortunadamente, el protocolo en sí no es muy complicado allí y puede escribir rápidamente algo propio cuando necesite trabajar y no escribir bibliotecas)
Ambiente
La tercera y mayor desventaja es la imposibilidad de configurar el entorno. Flutter web se ejecuta en un navegador o como un servidor web. Aún puede configurar el puerto en el que se ejecutará a través de los parámetros de la línea de comando (lo cual tampoco es muy conveniente, ¿dónde está la configuración?) Pero, ¿cómo puedo ejecutarlo como https con un certificado autofirmado? ¿Para que al mismo tiempo la carga caliente funcione y depure y otros chips que normalmente funcionan? ¡Hola! Chicos, 2k20 termina y todavía tienes http? ¡¿De Verdad?!
Conclusión
Definitivamente, Flutter como marco para el desarrollo móvil multiplataforma está destrozando React Native en todos los frentes. Estoy satisfecho, el cliente también está encantado, ¿qué más necesita?
Pero como herramienta para escribir aplicaciones web, todavía es húmedo y demasiado laborioso. Prepárate para que, donde conectaste un paquete js de terceros en un par de segundos, aquí escribirás un contenedor para él durante un par de días, o incluso tu propio análogo en Flutter.
PD
Lo repetiré nuevamente para aquellos que se olvidaron desde el principio del artículo. Las soluciones y conclusiones aplicadas que describí son las conclusiones de una persona con experiencia de 1 semana en Flutter y experiencia de 3 años en React. Así que no los tome por la verdad última. Estoy listo para discutir en los comentarios con el gurú lo que hice mal.