Transpilador

No hay manera para hacer un pollyfill a nueva sintaxis que ha sido añadida al lenguaje. La nueva sintaxis deberia lanzar un error en motores JS antiguos ya sea de reconocimiento/error de sintaxis.

Asi que la mejor opcion es usar una herramienta que convierta codigo actual en equivalente codigo antiguo. Este proceso por lo general el llamado 'transpilar', un termino de transformacion y compilacion.

Esencialmente, el codigo fuente es generado con la nueva sintaxis, pero lo que se despliega en el navegador es codigo transpilado en sintaxis vieja. Por lo geneneral se inserta el transpilador en el proceso de construccion, al igual que su linter y el minifier.

Tal vez se este preguntando por que preocuparse en escribir nueva sintaxis solo para que esta sea transpilada en codigo antiguo -- por que no escribir codigo antiguio directamente?

Hay muchas rasones de peso que debe tener en cuenta acerca de transpilar:

• La nueva sintaxis agregada al lenguaje es diseñada para hacer el codigo mas legible y mantenible. Los equivalentes antiguos son a menudo mas complejos. Usted deberia preferir escribir nueva y clara sintaxis, no solo por usted sino por todos los miembros del equipo de desarrollo.
• Si usted transpila solo para navegadores viejos, y usa la nueva sintaxis para navegadores modernos, usted obtendra ventajas en los navegadores con optimizaciones de desempeño. Esto tambien deja que los desarrolladores de navegadores tengan mas codigo real para provar sus implementaciones y optimizarlas.
• Usar la nueva sintaxis anticipadamente permite que esta sea testeada mas robustamente en el mundo real, lo cual proveera un feedback anticipado para el comite JavaScript (TC39). Si problemas son encontrados lo suficientemente temprano, estos pueden ser cambiados/arreglados antes que estos errores del diseño del lenguaje sean permanentes.

Aqui hay un ejemplo rapido de transpilacion, ES6 añade una caracteristica llamada "parametros por defecto". Este luce asi:

function foo(a = 2) {
    console.log( a );
}

foo();        // 2
foo( 42 );    // 42

Sencillo, verdad? Muy util, tambien! Pero esta nueva sintaxis es invalida en motores anteriores a ES6. Entonces, que va a hacer un transpilador con este codigo para que este corra en entornos antiguos?

function foo() {
    var a = arguments[0] !== (void 0) ? arguments[0] : 2;
    console.log( a );
}

Como puede ver, la funcion revisa para ver si el valor de arguments[0] es void 0 (undefined), y si es asi provee el valor 2 por defecto; de lo contrario, le asigna lo que sea pasado.

Ademas de ser capaz utilizar ahora la agradable sintaxis incluso en navagadores antiguos, el codigo transpilado puede ser revisado en detalle para entender el comportamiento deseado con claridad.

Es posible que no se haya dado cuenta que con sólo mirar la versión ES6 que undefined es el único valor que no puede ser pasado de forma explícita en un parámetro-valor por defecto, pero el código transpilado hace que sea mucho más claro.

El ultimo detalle importante para enfatizar acerca de los transpiladores es que estos deben ser pensados como un estandar en el ecosistema y proceso de desarrollo en JS. JS va a continuar evolucionando mucho mas rapido que antes, asi que cada pocos meses nueva sintaxis y nuevas caracteristicas seran agregadas.

Si usted use un transpilador por defecto, usted siempre tendra la posibilidad de cambiar a sintaxis moderna en el momento en que sea de utilidad, en lugar de siempre esperar por años navegadores modernos avancen.

Hay un buen numero de grandes transpiladores para que escoja. Aqui hay algunas buenas opciones al momento de escribir esto:

• Babel (https://babeljs.io) (formalmente 6to5): Transpila ES6+ a ES5
• Traceur (https://github.com/google/traceur-compiler): Transpila ES6, ES7, y mas a ES5.