Empecé como desarrollador web front-end y luego me convertí en aleteo desarrollador. Creo que hubo algunos conceptos que me ayudaron a adoptar Flutter más fácilmente. También hubo algunos conceptos nuevos que eran diferentes.
En este artículo, quiero compartir mi experiencia e inspirar a cualquiera que se sienta paralizado con la elección de un ecosistema sobre el otro, mostrando cómo se transfieren los conceptos y cómo se pueden aprender los conceptos nuevos.
Conceptos que se transfirieron
Esta sección muestra los lugares donde se parecen el desarrollo web front-end y Flutter. Explica las habilidades que ya tienes y que son una ventaja para ti si inicias Flutter.
1. Implementación de interfaces de usuario (UI)
Para implementar una interfaz de usuario determinada en la interfaz web, debe componer elementos HTML y diseñarlos con CSS. Para implementar interfaces de usuario en Flutter, compones widgets y péinalos con propiedades.
Al igual que CSS, el Color La clase en Dart funciona con "rgba" y "hex". También como CSS, Flutter usa píxeles para unidades de espacio y tamaño.
En Flutter, tenemos clases y enumeraciones de Dart para casi todas las propiedades de CSS y sus valores. Por ejemplo:
Flutter también tiene Column y Row widgets Estos son los equivalentes de Flutter para display: flex en CSS. Para configurar justify-content y align-items estilos, usas MainAxisAlignment y CrossAxisAlignment propiedades. Para ajustar el flex-grow estilo, envuelva los widgets secundarios afectados del Column/Row, en un Expanded or Flexible.
Para las interfaces de usuario avanzadas, Flutter tiene la CustomPaint clase - es Flutter lo que el Canvas API es al desarrollo web. CustomPaint te da un pintor para dibujar cualquier interfaz de usuario que desees. Usualmente usarás CustomPaint cuando quieres algo que es realmente complejo. También, CustomPaint es el camino a seguir cuando una combinación de widgets no funciona.
2. Desarrollo para Múltiples Resoluciones de pantalla
Los sitios web se ejecutan en navegadores y las aplicaciones móviles se ejecutan en dispositivos. Como tal, al desarrollar para cualquiera de las plataformas, debe tener en cuenta la plataforma. Cada plataforma implementa las mismas características (cámara, ubicación, notificaciones, etc.) de diferentes maneras.
Como desarrollador web, piensa en la capacidad de respuesta de su sitio web. Utiliza consultas de medios para manejar el aspecto de su sitio web en pantallas más pequeñas y más anchas.
Pasando del desarrollo web móvil a Flutter, tienes la MediaQuery clase auxiliar los MediaQuery la clase te da el dispositivo actual orientation (paisaje o retrato). También le da la ventana gráfica actual size, la devicePixelRatio, entre otra información del dispositivo. Juntos, estos valores le brindan información sobre la configuración del dispositivo móvil. Puede usarlos para cambiar el aspecto de su aplicación móvil en varios tamaños de pantalla.
3. Trabajar con depuradores, editores y herramientas de línea de comandos
Los navegadores de escritorio tienen herramientas para desarrolladores. Estas herramientas incluyen un inspector, una consola, un monitor de red, etc. Estas herramientas mejoran el proceso de desarrollo web. Flutter también tiene lo suyo DevTools. Cuenta con su inspector de widgets, depurador, monitor de red, entre otras características.
El soporte de IDE también es similar. Visual Studio Code es uno de los IDE más populares para el desarrollo web. Hay muchas extensiones relacionadas con la web para VS Code. Flutter también es compatible con VS Code. Entonces, durante la transición, no necesita cambiar IDE. Hay extensiones Dart y Flutter para VS Code. Flutter también funciona bien con Android Studio. Tanto Android Studio como VS Code son compatibles con Flutter DevTools. Estas integraciones IDE hacen que las herramientas de Flutter sean completas.
La mayoría de los marcos de JavaScript front-end vienen con su interfaz de línea de comandos (CLI). Por ejemplo: CLI angular, Crear aplicación React, Vista CLI, etc. Flutter también viene con un exclusivo CLI. La CLI de Flutter le permite compilar, crear y desarrollar proyectos de Angular. Tiene comandos para analizar y probar proyectos de Flutter.
Conceptos que eran nuevos
Esta sección habla sobre conceptos específicos de Flutter que son más fáciles o inexistentes en el desarrollo web. Explica ideas que debe tener en cuenta al ingresar a Flutter.
Cómo manejar el desplazamiento
Al desarrollar para la web, los navegadores web controlan el comportamiento de desplazamiento predeterminado. Sin embargo, puede personalizar el desplazamiento con CSS (usando overflow).
Este no es el caso en Flutter. Los grupos de widgets no se desplazan de forma predeterminada. Cuando sienta que los grupos de widgets pueden desbordarse, debe configurar el desplazamiento de manera proactiva.
En Flutter, configura el desplazamiento mediante el uso de widgets peculiares que permiten el desplazamiento. Por ejemplo: ListView, SingleChildScrollView, CustomScrollView, etc. Estos widgets desplazables le brindan un gran control sobre el desplazamiento. Con CustomScrollView, puede configurar mecanismos de desplazamiento expertos y complejos dentro de la aplicación.
Por el lado de Flutter, usando ScrollViews es inevitable. Android e iOS tienen ScrollView y UIScrollView para manejar el desplazamiento. Flutter necesita una forma de unificar la experiencia de renderizado y desarrollador mediante el uso de su ScrollViews, también.
Puede ser útil dejar de pensar en el flujo de la estructura del documento y, en su lugar, considerar la aplicación como un lienzo abierto para los mecanismos de pintura nativos de un dispositivo.
2. Configuración de su entorno de desarrollo
Para crear el sitio web más simple, puede crear un archivo con un .html extensión y ábralo en un navegador. Flutter no es tan simple. Para usar Flutter, debe tener instalado el SDK de Flutter y ha configurado Flutter para un dispositivo de prueba. Entonces, si desea codificar Flutter para Android, debe configurar el SDK de Android. También deberá configurar al menos un dispositivo Android (un emulador de Android o un dispositivo físico).
Este es el mismo caso para los dispositivos Apple (iOS y macOS). Después de instalar Flutter en una Mac, aún debe configurar Xcode antes de continuar. También necesitará al menos un simulador de iOS o un iPhone para probar Flutter en iOS. Flutter para escritorio también es una configuración considerable. En Windows, debe configurar el SDK de desarrollo de Windows con Visual Studio (no VS Code). En Linux, instalará más paquetes.
Sin configuración adicional, Flutter funciona en navegadores. Como resultado, podría pasar por alto la configuración adicional para los dispositivos de destino. En la mayoría de los casos, usaría Flutter para el desarrollo de aplicaciones móviles. Por lo tanto, querrá configurar al menos Android o iOS. Flutter viene con el flutter doctor dominio. Este comando informa el estado de su configuración de desarrollo. De esa manera, sabrá en qué trabajar, en la configuración, si es necesario.
Esto no significa que el desarrollo en Flutter sea lento. Flutter viene con un potente motor. los flutter run El comando permite la recarga en caliente en el dispositivo de prueba durante la codificación. Pero entonces tendrás que presionar R para recargar en caliente. Esto no es un problema. Extensión de código VS de Flutter permite la recarga automática en caliente en los cambios de archivo.
3. Empaquetado e implementación
La implementación de sitios web es más barata y fácil en comparación con la implementación de aplicaciones móviles. Cuando implementa sitios web, accede a ellos a través de nombres de dominio. Estos nombres de dominio generalmente se renuevan anualmente. Sin embargo, son opcionales.
Hoy en día, muchas plataformas ofrecen alojamiento gratuito.
Por ejemplo: Digital Ocean te da un subdominio gratis en .ondigitalocean.com.
Puede utilizar estos dominios si está creando un sitio web de documentación. También puede usarlos cuando no esté preocupado por la marca.
En el mundo de Flutter con aplicaciones móviles, por lo general, en la mayoría de los casos, implementa su aplicación en dos lugares.
Tienes que registrar una cuenta de desarrollador en cada una de estas plataformas. Registrar una cuenta de desarrollador requiere una tarifa o suscripción y verificación de identidad.
Para App Store, debe inscribirse en el programa Apple Developer. necesitas mantener una suscripción anual de $99. Para Google Play, debe realizar una pago único de $25 por la cuenta
Estas tiendas revisan cada aplicación revisada antes de que se publique.
También tenga en cuenta que los usuarios no consumen fácilmente las actualizaciones de la aplicación. Los usuarios deben actualizar explícitamente las aplicaciones instaladas. Esto contrasta con la web, donde todos pueden ver la última versión implementada de un sitio web.
Administrar aplicaciones implementadas es relativamente más exigente que administrar sitios web implementados. Sin embargo, esto no debería asustarte. Después de todo, hay millones de aplicaciones implementadas en cualquiera de las tiendas, por lo que también puede agregar la suya.
Pensamientos adicionales sobre Flutter
Flutter es una herramienta multiplataforma para crear aplicaciones de escritorio, móviles o web. Las aplicaciones de Flutter tienen píxeles perfectos. Flutter pinta la misma interfaz de usuario en cada aplicación, independientemente de la plataforma de destino. Esto se debe a que cada aplicación Flutter contiene el motor Flutter. Este motor representa el código de la interfaz de usuario de Flutter. Flutter proporciona un lienzo para cada dispositivo y te permite pintar como quieras. El motor se comunica con la plataforma de destino para manejar eventos e interacciones.
Flutter es eficiente. Tiene niveles de alto rendimiento. Esto se debe a que está construido con Dart y aprovecha las características de Dart.
Con todos estos beneficios, Flutter es una buena opción para muchas aplicaciones. Las aplicaciones multiplataforma ahorran dinero y tiempo durante la producción y el mantenimiento. Sin embargo, Flutter (y las soluciones multiplataforma) podrían no ser una opción óptima en algunos casos.
No use Flutter si desea que los usuarios usen herramientas de desarrollo de plataforma con su aplicación. Las herramientas de desarrollador de plataforma aquí significan herramientas específicas del dispositivo, como las opciones de desarrollador de Android. También incluye herramientas para desarrolladores de navegadores.
No use Flutter para la web si espera que las extensiones del navegador interactúen con el sitio web.
Además, no uses Flutter para sitios web con mucho contenido.
Conclusión
Esta fue una revisión de las habilidades que se transfieren del desarrollo web front-end al trabajo con Flutter. También discutimos los conceptos de desarrollo de aplicaciones que debe aprender como desarrollador web.
Flutter es más simple para los desarrolladores web porque ambos implican la implementación de interfaces de usuario. Si inicia Flutter, descubrirá que le brinda una buena experiencia de desarrollador. ¡Prueba Flutter! Úselo para crear aplicaciones móviles y, por supuesto, muestre lo que crea.
¡Aclamaciones!
