Categorías: Labs

Firefox 52: Introduciendo Web Assembly, CSS Grid y el inspector de Grid

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Introducción

Definitivamente son tiempos emocionantes en la evolución de la web con la adopción de nuevos estándares, mejoras de rendimiento, mejores características para diseñadores y nuevas herramientas. Firefox 52 contiene un gran número de características que habían estado en desarrollo durante muchos años. Aunque muchas de éstas seguirán evolucionando y mejoras, existe una gran mayoría para celebrar en el lanzamiento actual de Firefox.

En este artículo, el equipo de Relaciones con los Desarrolladores cubre las características más innovadoras que llegaron, como WebAssembly, CSS Grid (cuadrícula CSS), la herramienta de inspección de cuadrícula, mejoras el modo de diseño adaptable, soporte para async y await en JavaScript.

WebAssembly rompe la barrera entre la web y lo nativo

Firefox 52 soporta WebAssembly, un nuevo formato binario seguro, portable, y eficiente para programas web. Definido como un estándar abierto desarrollado por Mozilla, Google, Microsoft, y Apple, que eventualmente se ejecutará donde JavaScript lo haga: en los principales navegadores y en los entornos de ejecución basados en navegadores como Node.js y Electron. WebAssembly está diseñado para ser de uso generalizado.

Compiladores como Emscripten de Mozilla, pueden apuntar a la arquitectura virtual de WebAssembly, haciendo posible la ejecución de código C/C++ portable en la web a velocidad casi nativa. Adicionalmente a C/C++, el lenguaje de programación Rust tiene soporte preliminar para WebAssembly, y el mismo LLVM incluye un soporte experimental para WebAssembly. En los próximos años esperamos la adición de nuevos lenguajes de programación.

Por medio de Emscripten, WebAssembly facilita portar juegos enteros y aplicaciones nativas a la Web, pero puede hacer más. Gracias a su velocidad y fácil interoperabilidad con JS, las operaciones que anteriormente requerían mucho procesamiento y no eran prácticas para la web, ahora están al alcance.

(Puedes hacer  clic aquí para jugar con la demostración del Jardín Zen. Necesitas tener Firefox 52 para escritorio por los momentos. )

Las funciones de JavaScript pueden llamar a funciones de WebAssembly y viceversa. Esto permite mezclar JavaScript de alto nivel y C/C++/Rust de bajo nivel en una misma aplicación. Los desarrolladores pueden reutilizar módulos de WebAssembly sin la necesidad de conocer la parte interna tal como lo hacen las actuales librerías minificadas de JavaScript.

En lugares donde el rendimiento consistente es lo más importante como: juegos, audio, manipulación de vídeo, análisis de datos, computación pura, codecs, entre otros, WebAssembly ofrece claras ventajas en tamaño y velocidad. Por esta razón, esperamos que muchas librerías y frameworks populares eventualmente se apoyarán en WebAssembly, directamente o indirectamente.

En términos de reutilización de código y arquitectura de software, la pared entre “nativo”y la web se está reduciendo, y esto solo es el principio. El desarrollo y depuración estará mejorando, al igual que la interoperabilidad, rendimiento y capacidades puras. Por ejemplo, el soporte para multi-hilos y SIMD ya se encuentran planificados en el desarrollo de WebAssembly.

Aprende sobre WebAssembly en MDN, y encuentra la última información directamente por parte de los creadores de WebAssembly en WebAssembly.org.

CSS Grid y el inspector de Grid

Firefox 52 incluye soporte para CSS Grid Layout Module Level 1 (disposición de cuadrícula CSS nivel 1), una especificación de  CSS que define 18 nuevas propiedades. La cuadrícula de CSS es un sistema de disposición bi-dimensional ara la web, facilitando la codificación de muchos patrones de diseño que hemos estado resolviendo por muchos años a través del uso de cuadrículas, nativamente en los navegadores. Esto abre un nuevo mundo de posibilidades para el diseño gráfico. Bien sea si te enfocas en interfaces de usuarios o experiencias de la aplicación o en el diseño editorial del contenido, tendrás mucho poder gracias a esta nueva tecnología.

Las cuadrículas de CSS Grid funcionan definiendo filas y columnas, colocando elementos en áreas de la cuadrícula. Las filas y columnas pueden atribuirles un tamaño específico (fijo, fluido, o una mezcal), o pueden definirse para redimensionarse por si mismas dependiendo del tamaño del contenido. Los elementos en una cuadrícula puede ser colocados explícitamente en CSS, o pueden ser ubicados de acuerdo al algoritmo implementado por el navegador. Estas opciones le dan a las cuadrículas de CSS Grid más poder y flexibilidad que cualquiera de los frameworks existentes. Adicionalmente, la habilidad de definir y colocar cosas en una fila es completamente nuevo.

Inspector de las mallas CSS

Inspector de CSS Grid

También estamos orgullosos de anunciar nuestra nueva herramienta de inspección de cuadrícula, que permite ver las líneas de la cuadrícula directamente en la página, facilitando la visualización de lo que está pasando.

Para mirar los ejemplos de este vídeo, entra a labs.jensimmons.com/2017/01-003.html. y encuentra más ejemplos para probar en labs.jensimmons.com.

¿Te interesa aprender sobre cuadrículas de CSS? Tenemos en MDN varías guías en inglés:

También te anexamos las respuestas a las preguntas más frecuentes sobre CSS Grid:

¿Debería usar Grid o Flexbox? ¿Cuál es mejor?

Usarás ambos, mezclando cuadrículas CSS con Flexbox y otras propiedades de CSS que afecten la disposición (float, margin, multicolumn, modos de escritura, inline block, etc.). No es una situación de escoger solo una. Las cuadrículas son la herramienta adecada cuando deseas ajustar el tamaño y la alineación en dos dimensiones. Flexbox es la herramienta adecuada cuando solo te concierne controlar una dimensión. La mayoría de proyectos utilizarán ambos, cada uno en una parte distinta de la página. Una vez que entiendas la diferencias entre las 2, será mas claro como funcionan brillantemente juntas,

¿Por qué debería emocionarme sobre CSS Grid? ¿No tomará años antes que varios navegadores lo soporten y pueda usarlo?

Debido a como los creadores de los navegadores manejan los cambios de CSS, el soporte amplio para CSS Grid llegará a una velocidad sin precedentes. Mozilla es el primero en soportarlo en Firefox 52 el 7 de marzo. Chrome 57 lo soportará una semana después el 14 de marzo. Safari 10.1 actualmente tiene soporte en beta. Internet Explorer 10 y 11 ya cuentan con soporte de una versión temprana de la especificación, detrás de un prefijo -ms. (Puedes usarlo o no. Descubre los detalles antes de decidir.) MS Edge también tiene soporte para la especificación del borrador original, con una actualización a la especificación actual en algún momento del futuro.

Hoy puedes lanzar páginas diseñadas con CSS Grid, antes que el 100% de los usuarios cuenten con un navegador que las soporte, al pensar en la estructura de tu página y planificar lo que pasaría en todos los navegadores. Las Feature Queries son una herramientas clave para que todos los usuarios tengan una buena experiencia en tu sitio.

Funciones asíncronas y la palabra clave await

Firefox 52 también incluye una nueva característica de JavaScript de ES2017: funciones asíncronas y su acompañante, el operador await. Las funciones asíncronas se construyen sobre las promesas (Promises) de ES2015, permitiendo a los autores escribir código asíncrono de una forma similar como lo harían sus equivalentes síncronos.

Mira el siguiente ejemplo, el cual toma el resultado de una petición asíncrona, y usa parte de su argumento a una segunda función asíncrona. Así es como luciría usando una aproximación tradicional con callback:

function loadProfile() {
  getUser(function (err, user) {
    if (err) {
      handleError(err);
    } else {
      getProfile(user.id, function (err, profile) {
        if (err) {
          handleError(err)
        } else {      
          displayProfile(profile);
        }
      });      
    }
  });
}

Relativamente fácil de comprender, pero si necesitamos hacer más procesos y peticiones asíncronas, el nivel de anidación o la serie de llamadas a las funciones se volverán difíciles de manejar. También, con llamadas de funciones más complejas se puede dificultar el flujo del código haciendo complicada la depuración.

Las promesas, introducidas en ES2015, permiten una representación más compacta del mismo flujo:

function loadProfile() {
  getUser()
    .then(function (user) {
      return getProfile(user.id);
    })
    .then(displayProfile)
    .catch(handleError);
}

Las promesas permiten simplificar estos métodos secuenciales. En este ejemplo, en vez de pasar a una función a getUser y getProfile, las funciones retornan una promesa, que se resolverá cuando el resultado de la función esté disponible. Sin embargo, cuando se require procesamiento adicional o llamadas condicionales, la anidación igual se vuelve profunda y de nuevo el flujo de control puede ser difícil de seguir.

Las funciones asíncronas permiten re-escribir el ejemplo para escribirlas como se harían si fuesen síncronas, sin bloquear el hilo de ejecución como lo harían el código síncrono:

async function loadProfile() {
  try {
    let user = await getUser();
    displayProfile(await getProfile(user.id));    
  } catch (err) {
    handleError(err);
  }
}

La palabra clave async al frente de la función le permite indicar al motor de JS que la siguiente función puede ser pausada por una petición asíncrona, y que el resultado de la función será una promesa. Cada vez que necesitemos esperar por un resultado asíncrono, usaremos la palabra reservada await. Esto pausará la función sin detener otras función de ejecutarse. También,  getUser y getProfile no necesitan ser cambiados de como se escribieron para el ejemplo de promesas.

Las funciones asíncronas no son la cura para todos los flujos de control, pero para muchos casos pueden simplificar la escritura y mantenimiento de código asíncrono, sin importar liberías. Para aprender sobre async y await lee la documentación de MDN.

Modo de diseño adaptable

Adicionalmente al inspector de cuadrículas descrito anteriormente, Firefox ahora incluye un nuevo modo de diseño adaptable. Esta herramienta mejorada permite hacer simulación de conexión lenta de red, para simular varias conexiones de red vividas por los usuarios móviles. Además, se pueden simular varios tamaños y densidad de píxeles de varios dispositivos populares. Actualmente esta característica solo se activa si e10s también está activo en el navegador. Asegúrate de leer la documentación completa del Modo de Vista Adaptable en MDN si deseas conocer más sobre esta herramienta.

Más de lo mejor de Firefox 52

Estos fueron algunos de los aspectos más resaltantes que hemos agregado a Firefox 52. Para ver la lista detallada de todos los cambios, incluyendo la característica para identificar espacios en blanco autogenerados y la habilidad para detectar campos de contraseñas inseguras, mira las notas de lanzamiento de Firefox 52.

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.