Anunciando Dart 2.3: Optimizado para construir interfaces de usuario

Hoy anunciamos el lanzamiento estable del SDK de Dart 2.3, con nuevas características del lenguaje que mejoran tu experiencia de programación al…

Hoy anunciamos la versión estable del SDK de Dart 2.3, con nuevas características del lenguaje que mejoran tu experiencia de programación al desarrollar interfaces de usuario, nuevo soporte de herramientas para desarrollar UI de Flutter, y dos nuevos sitios web: dart.dev y pub.dev.

Banner de la versión Dart 2.3 destacando soporte del lenguaje de UI, soporte de IDE y los nuevos sitios web dart.dev y pub.dev.

El impulso de Dart

#

Uno de los informes de investigación de desarrolladores que esperamos cada año es la Encuesta de Desarrolladores de StackOverflow, que proporciona un conjunto de datos integral sobre las tendencias de desarrolladores y la percepción hacia diferentes tecnologías. La edición de este año demostró el crecimiento en popularidad y conciencia de Dart, que entró en la lista de Lenguajes Más Amados por primera vez y se ubicó junto a otros lenguajes populares como JavaScript, C# y Go y por delante de C++, F# y R. Al mismo tiempo, nuestros buenos amigos de la comunidad de Flutter ocuparon el tercer lugar en la lista de Frameworks Más Amados. La encuesta del mes pasado de Codementor sobre qué lenguajes de programación aprender y no aprender tuvo noticias positivas similares:.

Dos ejemplos de lenguajes que realmente se destacaron para el título de Más Mejorados son Dart y Ruby”. Codementor, abril 2019 [fuente]

Nos gustaría extender un gran gracias a todos los desarrolladores de la comunidad de Dart. Realmente significa mucho para nosotros verte adoptar Dart, ofrecer tus comentarios y continuar el viaje con nosotros mientras intentamos construir el mejor lenguaje optimizado para cliente para apps rápidas que se ejecutan en cualquier plataforma.

Nuevas características del lenguaje para construir interfaces de usuario

#

Hablando de desarrollo de cliente, uno de los proyectos conjuntos de larga data entre los equipos de Dart y Flutter es crear un excelente soporte para capturar código de interfaz de usuario usando Dart, sin necesidad de un lenguaje de marcado. Creemos que usar un solo lenguaje tanto para el comportamiento como para el layout tiene grandes ventajas. Estas incluyen reducir el cambio de contexto, no tener que aprender dos lenguajes, y permitir todas las características de abstracción de un lenguaje de programación de propósito general al construir tu UI.

Hemos hecho varias mejoras en los últimos lanzamientos, como simplificar el código para construir widgets, añadir conversión automática de int a double, y añadir literales set. En Dart 2.3 damos otro gran paso adelante, con tres nuevas características para expresar UI basada en listas, condicional o repetida.

Puedes pensar en una UI como un árbol de nodos widget. Algunos nodos contienen listas de widgets — por ejemplo una lista de elementos desplazables. A menudo, estas listas se construyen a partir de otras listas. Para eso, hemos añadido una nueva característica de operador spread para desempaquetar los elementos de una lista en otra. En el siguiente ejemplo, buildMainElements() retorna una lista de widgets, que luego se desempaqueta en la lista circundante usando el operador spread :

dart
Widget build(BuildContext context) {
  return Column(children: [
    Header(),
    ...buildMainElements(),
    Footer(),
  ]);
}

Otra tarea común de UI es incluir un elemento específico basándose en una condición. Por ejemplo, puedes querer incluir un botón de Siguiente en todas las páginas excepto en la última. Con Dart 2.3, puedes hacer esto usando un collection if:

dart
Widget build(BuildContext context) {
  return Column(children: [
    Text(mainText),
    if (page != pages.last)
      FlatButton(child: Text('Next')),
  ]);
}

Finalmente, las UIs a menudo construyen elementos repetidos a partir de otros elementos repetidos. Puedes expresar esto usando la nueva característica collection for:

dart
Widget build(BuildContext context) {
  return Column(children: [
    Text(mainText),
    for (var section in sections)
      HeadingAction(section.heading),
  ]);
}

Y como las tres nuevas características son características del lenguaje y no comandos de marcado, son totalmente componibles y se pueden usar en cualquier contexto donde trabajes con colecciones. Las características están incluidas en el lanzamiento de Flutter 1.5, y están disponibles en el lanzamiento de Dart 2.3, que puedes descargar hoy. También hemos añadido nuevos lints que puedes configurar en el análisis estático para forzar el uso de las nuevas características spread, collection if y collection for.

Para detalles sobre todo el trabajo que se hizo para añadir estas características, consulta esta publicación reciente de Bob Nystrom (aka munificentbob), un ingeniero del equipo del lenguaje Dart.

También nos gustaría extender nuestro agradecimiento a los desarrolladores que participaron en los estudios de UX que fueron críticos para dar forma a estas nuevas características del lenguaje.

Características de IDE y editor

#

En línea con el tema de UI de Dart 2.3, también hemos añadido una nueva característica de UI Guides a nuestro soporte de IDE. Las UI Guides son líneas horizontales y verticales dibujadas dentro del código de UI, haciendo mucho más fácil ver la estructura de árbol de los métodos build() de UI de Flutter. Aquí hay un ejemplo (de una app de Calculator) donde las UI Guides ilustran claramente que la UI está construida a partir de un Column expandido que contiene varios KeyRows, cada uno de los cuales contiene NumberKeys.

IDE con Flutter UI Guides visualizando la estructura de árbol del código de UI.
IDE con UI Guides visualizando la estructura de árbol del código de UI

Las UI Guides están disponibles en la versión 35.2 del plugin de IntelliJ IDEA y Android Studio. Para habilitar la característica, elige la configuración Preferences > Languages & Frameworks > Flutter > UI Guides. Esperamos ofrecer soporte similar en VS Code en un lanzamiento posterior.

Finalmente, hemos observado que los desarrolladores a menudo usan el completado de código en su IDE como una forma de explorar APIs. El completado de código ha funcionado bien para explorar los APIs en las librerías que ya has importado, pero no ha estado disponible para APIs en librerías que aún no se han importado. Nuestras herramientas ahora pueden soportar este último caso de uso: puedes invocar el completado de código en cualquier prefijo, y verás completados para todos los APIs en el paquete actual, los paquetes de los que depende directamente, y el SDK. Si eliges un completado de una librería aún no importada (marcado como Auto import, como muestra la siguiente animación), entonces la herramienta añade la declaración de import por ti.

Un GIF animado mostrando completado de código e inserción de import automático en un IDE.
Animación mostrando completado de código y adición de import automático

Esta nueva característica de auto-import está disponible en VS Code con el plugin v2.26, en IntelliJ 2019.1, y el próximo lanzamiento de Android Studio 3.5.

Nuevos sitios web de Dart y Pub

#

Por último, pero ciertamente no menos importante, hemos estado muy ocupados en los últimos meses construyendo un nuevo sitio web para la plataforma Dart: dart.dev

Página principal de dart.dev rediseñada.
Página principal de https://dart.dev rediseñada

Este nuevo sitio presenta una página de inicio completamente nueva, enfocada en explicar los beneficios principales de la plataforma Dart. También hemos actualizado las páginas de documentación para tener mejor navegación y más atractivo visual. Por último, hemos hecho una gran reorganización de todo el contenido para facilitar el descubrimiento, y añadido nuevas páginas para contenido principal que faltaba antes.

En una línea similar, hemos actualizado visualmente el sitio de paquetes Pub, y lo hemos movido a una nueva URL conveniente: pub.dev.

Nos encantaría escuchar tus comentarios sobre ambos sitios. Si encuentras un problema o tienes una sugerencia, por favor crea un issue en el tracker de issues de dart.dev o en el tracker de issues de pub.dev. ¡Gracias por tu apoyo!

Más de Dart