Novedades en Dart 3.3: Tipos de extensión, JavaScript Interop, y más

¡Dart 3.3 ha llegado, y es un cambio radical para el rendimiento y el desarrollo multiplataforma! Prepárate para potenciar tus apps con Extension Types, revolucionando la optimización del rendimiento y cómo interactúas con código nativo. Además, nuestro renovado modelo de interoperabilidad con JavaScript introduce seguridad de tipos robusta y una forma amigable para los desarrolladores de aprovechar el poder de la plataforma web. Todo esto allana el camino para el soporte de WebAssembly. ¡Ah, y Google AI en tus apps de Dart? ¡Sí, por favor! ¡Todo está aquí en Dart 3.3. ¡Vamos a profundizar!

Los extension types introducen wrappers de coste cero para los tipos. Úsalos para optimizar código sensible al rendimiento, especialmente al interoperar con plataformas host. Los extension types proporcionan la conveniencia de tipos personalizados con miembros específicos mientras eliminan el típico overhead de asignación de wrappers.

extension type Wrapper(int i) {
  void showValue() {
    print('my value is $i');
  }
}
​
void main() {
  final wrapper = Wrapper(42);
  wrapper.showValue(); // Prints 'my value is 42'
}

El ejemplo anterior define Wrapper como un extension type, pero lo usa como un tipo trivial de Dart. Puedes instanciarlo e invocar funciones. La diferencia clave es que Dart lo compila como un int normal de Dart. Los extension types permiten la conveniencia de crear un tipo con miembros únicos sin el coste de indirección de asignar un tipo wrapper típico. Así que, mientras que la funcionalidad de extension members (disponible en Dart desde la 2.7) permite añadir funciones y propiedades a un tipo existente, la funcionalidad de extension type puede hacer lo mismo, y también permite definir una nueva API que oculta la representación subyacente.

Esto es particularmente útil para la interoperabilidad con plataformas host. Los tipos nativos se pueden usar directamente sin el coste de crear wrappers y la indirección asociada, proporcionando al mismo tiempo una API de Dart limpia y lista para producción. Más información en la nueva documentación sobre extension types.

Dart 3.3 introduce un nuevo modelo para interoperar con librerías de JavaScript y la web. Empieza con un nuevo conjunto de APIs para interactuar con JavaScript: la librería dart:js_interop. Ahora los desarrolladores de Dart tienen acceso a una API tipada para interactuar con JavaScript. Esta API define claramente la frontera entre los dos lenguajes con aplicación estática. Esto elimina toda una clase de problemas antes de la compilación. Además de las nuevas APIs para acceder a código JavaScript, Dart ahora incluye un nuevo modelo para representar tipos de JavaScript en Dart usando extension types.

import 'dart:js_interop';
​
/// Represents the `console` browser API.
extension type MyConsole(JSObject _) implements JSObject {
  external void log(JSAny? value);
  external void debug(JSAny? value);
  external void info(JSAny? value);
  external void warn(JSAny? value);
}

La sintaxis, basada en extension types, permite más expresividad y solidez que los extension members. Esto simplifica el aprovechamiento de APIs de JavaScript desde Dart. Más información en la nueva documentación sobre JS interop.

Desde la versión 1.0, el SDK de Dart ha incluido un conjunto completo de librerías de navegador. Estas incluyen la librería principal dart:html junto con librerías para SVG, WebGL, y otras.

El modelo mejorado de interoperabilidad con JavaScript ofreció la oportunidad de reimaginar estas librerías. De aquí en adelante, nuestro soporte de librerías de navegador se centrará en package:web. Esto simplifica el versionado, acelera las actualizaciones, y se alinea con los recursos de MDN.

Esta cadena de mejoras lleva a la siguiente gran cosa: compilar Dart a WebAssembly.

Con Dart 3.3, los autores de paquetes y aplicaciones pueden sentar las bases para aplicaciones web compiladas a WebAssembly. Mientras que el soporte de WebAssembly en Flutter Web sigue siendo experimental, el equipo está trabajando duro para estabilizar la implementación. Para ejecutar aplicaciones de Flutter en la web usando WebAssembly, necesitas migrar todo el código — de la aplicación y todas las dependencias — para usar el nuevo mecanismo de JavaScript Interop y package:web. Las librerías heredadas de JavaScript y de navegador siguen sin cambios y soportadas para compilar a código JavaScript. Sin embargo, compilar a WebAssembly requiere una migración.

Hemos creado una guía de migración para ayudar a los autores a empezar a incluir Wasm. Esperamos que los paquetes más populares soporten Wasm para cuando lo incluyamos en una versión estable.

Google ha publicado el Google AI Dart SDK en beta. Puedes construir funcionalidades de IA generativa en tu app de Dart o Flutter. Estas apps usan Gemini, la última familia de modelos de IA de Google. Echa un vistazo a package:google_generative_ai. Aprende cómo construir con el Google AI Dart SDK en este blog post o salta directamente al quickstart.