Usando Polyfills para compatibilidad en entornos serverless y edge

En entornos serverless y de edge computing, asegurar la compatibilidad entre navegadores, runtimes edge y servidores es más importante que nunca. Los polyfills (pequeños fragmentos de código que imitan características modernas de la web) hacen posible ejecutar código moderno en una variedad de plataformas, desde navegadores hasta edge functions, sin perder funcionalidad.

En este artículo, exploraremos cómo los polyfills son esenciales no solo para la compatibilidad con navegadores, sino también para mejorar el desempeño y facilitar el desarrollo en arquitecturas serverless y edge.

Por qué los Polyfills son necesarios

A medida que las tecnologías web evolucionaron, los desarrolladores enfrentaron el desafío de aprovechar nuevas características mientras mantenían la compatibilidad con entornos de navegadores más antiguos. Los polyfills surgieron como una solución ingeniosa a este problema. Son fragmentos de código diseñados para replicar características modernas de la web en entornos más antiguos o con menos capacidades, asegurando que los desarrolladores puedan usar los últimos estándares sin sacrificar la compatibilidad.

Este es un ejemplo básico de un polyfill:

if (!Array.prototype.includes) {
  Array.prototype.includes = function (searchElement /*, fromIndex*/) {
    'use strict'
    var O = Object(this)
    var len = parseInt(O.length) || 0
    if (len === 0) {
      return false
    }
    var n = parseInt(arguments[1]) || 0
    var k
    if (n >= 0) {
      k = n
    } else {
      k = len + n
      if (k < 0) {
        k = 0
      }
    }
    var currentElement
    while (k < len) {
      currentElement = O[k]
      if (
        searchElement === currentElement ||
        (searchElement !== searchElement && currentElement !== currentElement)
      ) {
        // NaN !== NaN
        return true
      }
      k++
    }
    return false
  }
}

Este polyfill proporciona una implementación del método Array.prototype.includes, que no está disponible en algunos navegadores más antiguos. Con los polyfills, los desarrolladores pueden escribir código usando los últimos estándares sin preocuparse por problemas de compatibilidad.

Los polyfills comenzaron como una forma de hacer que el código moderno funcionara en navegadores más antiguos, pero se han vuelto igual de importantes en entornos serverless y edge, donde algunas APIs pueden faltar. Ayudan a asegurar que el código se ejecute de manera consistente en diferentes plataformas sin obligar a los desarrolladores a reescribir características para cada entorno.

Esto es especialmente relevante al trabajar con APIs de Node.js, que no fueron diseñadas para runtimes edge pero siguen siendo una parte central de muchas aplicaciones web. A medida que los desarrolladores adaptan su código a estas limitaciones, los polyfills se convierten en una herramienta clave para hacer que las bibliotecas dependientes de Node.js funcionen más allá del entorno de servidor tradicional.

Cerrando la brecha: APIs de Node.js en entornos edge

Muchas bibliotecas de Node.js dependen de módulos integrados (fs, crypto, http), que no están disponibles en navegadores o runtimes edge. Aquí es donde los polyfills intervienen, reemplazando las APIs específicas de Node con APIs Web equivalentes para mantener la funcionalidad en todos los entornos.

El cambio de bibliotecas basadas en Node.js a implementaciones amigables con los workers a menudo requiere un cuidado especial. Por ejemplo, si una biblioteca depende del módulo crypto, pero el entorno objetivo no lo soporta, los desarrolladores pueden recurrir a alternativas como la API Web window.crypto para proporcionar una funcionalidad similar.

if (typeof window === 'undefined') {
  global.window = {}
}
window.crypto = require('crypto')

Este polyfill reemplaza el módulo crypto de Node con la API Web window.crypto para entornos donde Node.js no está disponible.

Para el desarrollo web serverless, los polyfills son herramientas valiosas que hacen que la transición de entornos tradicionales basados en servidores a serverless sea fluida. Permiten a los desarrolladores seguir usando sus APIs preferidas mientras aseguran la compatibilidad en varios entornos.

Los polyfills también ofrecen ventajas significativas cuando se trata de mantener y actualizar bases de código. Esto porque proporcionan una capa de abstracción que aísla el código específico del entorno, facilitando la actualización o reemplazo de APIs subyacentes sin afectar el resto de la base de código.

Estos son los beneficios de los polyfills:

• Transición fluida de entornos de servidor a serverless.
• Compatibilidad en varios entornos.
• Mantenimiento y actualizaciones más fáciles.

En esencia, los polyfills aseguran que tu código se ejecute sin problemas en cualquier plataforma.

Polyfills en acción

Imagina un escenario donde un desarrollador necesita usar la API TextDecoderStream para conectarse con una API Web, pero el entorno de runtime no la soporta. Aquí es donde los polyfills entran en juego. Pueden simular la funcionalidad de la API, proporcionando al desarrollador las herramientas necesarias para seguir trabajando sin interrupciones.

Para ilustrar esto, considera el siguiente fragmento de código sin polyfills:

let decoder = new TextDecoderStream()
let readableStream = new ReadableStream({
  start(controller) {
    controller.enqueue(new Uint8Array([65, 66, 67]))
    controller.close()
  }
})
let decodedStream = readableStream.pipeThrough(decoder)

Este código fallaría al ejecutarse en un entorno de runtime no soportado. Sin embargo, el desarrollador puede usar un polyfill de código abierto como los disponibles en unenv. El código equivalente con el polyfill es el siguiente:

import { TextDecoderStream } from 'unenv'

let decoder = new TextDecoderStream()
let readableStream = new ReadableStream({
  start(controller) {
    controller.enqueue(new Uint8Array([65, 66, 67]))
    controller.close()
  }
})
let decodedStream = readableStream.pipeThrough(decoder)

Ahora el código puede ejecutarse sin problemas, incluso en un entorno que no soporta nativamente la API TextDecoderStream. Pero aunque el polyfilling manual es un enfoque válido, un bundler puede mejorar significativamente la experiencia de desarrollo.

Un bundler detecta automáticamente e incluye los polyfills necesarios, eliminando la necesidad de intervención manual. Esto puede ahorrar a los desarrolladores mucho tiempo y esfuerzo, permitiéndoles centrarse más en construir una funcionalidad en lugar de preocuparse por problemas de compatibilidad. Pero eso es un tema para otra sección, donde profundizaremos en cómo una herramienta como Azion Bundler puede mejorar enormemente tu flujo de trabajo al tratar con polyfills.

Bundler de Azion y Polyfills

Un runtime edge tiene desafíos significativos para asegurar la compatibilidad. Por ello, desarrollamos el Bundler de Azion, un bundler de código abierto equipado con polyfills para mejorar la experiencia del desarrollador y la compatibilidad. El bundler está diseñado para ser altamente flexible, adaptable y amigable para los desarrolladores. Como un proyecto de código abierto, está evolucionando continuamente a través del desarrollo colaborativo.

El Bundler de Azion incluye las siguientes características:

• Unenv: una biblioteca de código abierto que proporciona polyfills de entorno.
• Custom Polyfills: estos están diseñados específicamente para extender la compatibilidad del runtime edge y llenar los vacíos de los polyfills faltantes de unenv.

La flexibilidad del bundler permite a los desarrolladores adaptarse al entorno siempre cambiante del desarrollo web.

Conclusión

Los polyfills aseguran la compatibilidad en diversos entornos, permiten a los desarrolladores utilizar los últimos estándares sin sacrificar funcionalidad, y optimizan el desempeño para una mejor experiencia de usuario.

En este sentido, el uso de polyfills en entornos serverless contribuye a la agilidad y escalabilidad del desarrollo web serverless.