Es posible que no necesite transpilar su JavaScript

Guías populares como YouMightNotNeedJQuery.com y You Don't Need Lodash / Underscore han desafiado las prácticas comunes de la industria.

Esta publicación no es tan descabellada como, digamos, YouMightNotNeedJS.com, pero sí elabora la transpilación y explica por qué puede que no sea tan necesaria en un futuro próximo.

StatCounter recopila datos sobre más de 15 mil millones de páginas vistas cada mes de 2,5 millones de sitios web en todo el mundo. En mayo de 2017, este es el statu quo:

Lo que hace que este diagrama sea interesante es que los 3 principales navegadores (Chrome, Safari y FireFox) son perennes,lo que significa que el 74% de los usuarios obtienen la última versión de su navegador automáticamente.

Veamos si esta suposición es correcta.

Aquí están las mejores versiones de navegadores del mercado:

Chrome 58 se lanzó hace menos de un mes y su versión de escritorio tiene el 12,77% de la cuota de mercado mundial de navegadores. Chrome 57 se lanzó solo 42 días antes y su versión de escritorio posee el 9,96% del mercado mundial de navegadores. Desafortunadamente, StatCounter no diferencia entre las versiones de Chrome en plataformas móviles, pero asumiendo la misma proporción que el escritorio, terminamos con:

¿Qué significa para mi código?

De acuerdo con la Tabla de compatibilidad de ES, la última versión de todos los principales navegadores tiene un muy buen soporte para las funciones de ES6:

En otras palabras, si está transfiriendo su JavaScript a ES5, está haciendo que su código sea innecesariamente grande y lento para admitir a una minoría de los usuarios que probablemente actualizarán su sistema cuando logre configurar su Webpack y Babel. ?

¿Por qué todavía transpirarías?

Es posible que aún desee transpilar su código, pero con suerte después de sopesar los pros y los contras o las posibles alternativas:

  • Estás usando React JSX (que es bastante popular en este momento, así que supongo que muchos desarrolladores encajan en esta categoría). JSX en su esencia es una transformación de XHTML a código JS y no necesita necesariamente un transpilador completo como Babel. Además, si todo lo que necesita es VirtualDom, úselo en su lugar.
  • Quieres probar las últimas funciones del idioma. A menos que sea parte de TC39 o tenga un gran deseo de inyectar características de lenguaje inestables en su código de producción, probablemente esté bien con ES6. Hoy en día tenemos un lenguaje decente es la mayoría de los navegadores y la necesidad de transpilar se está desvaneciendo.
  • Estás usando TypeScript y con suerte sopesaste los pros y los contras. El compilador TypeScript, cuando apunta a una versión moderna de ES6, elimina la información de tipo en lugar de transformar la sintaxis.
  • Desea reducir el tamaño del código mediante la agitación de árboles (aquí se explica cómo hacerlo en webpack y rollup). Quiere ofuscar su código o reducir su tamaño mediante la minificación. Desea excluir condicionalmente parte del código. Esto requiere un análisis de código estático. Puede utilizar un paquete inteligente para servicios de producción sensibles al tamaño, como los dispositivos móviles, pero veremos evaluaciones de costos más cuidadosas al crear tales implementaciones alternativas. Este tipo de análisis de código estático seguirá siendo útil como "técnicas avanzadas de optimización" para el código de producción.No es necesario que minimices tus archivos. UglifyJS no puede minificar ES6 en este momento (aunque existe una rama de daño) pero Babili puede lidiar con eso. Los algoritmos de compresión hacen un trabajo bastante decente (no cuando los archivos son demasiado pequeños) y, a menos que esté enviando un sistema operativo en cada carga de página, debería funcionar bien sin compresión. En estos días, las imágenes y el contenido multimedia requieren mucho más ancho de banda que el código.
  • Quieres al elefante en la habitación:

NPM es el administrador de paquetes más grande del planeta. La mayoría de las aplicaciones web no triviales utilizan algún código de NPM y eso implica el uso de un paquete de módulos. ¡Eso va a cambiar pronto! Chrome ya es compatible con los módulos ES6 en Canary (Chrome 60 enviará oficialmente esta función en agosto) y Safari también está a punto de enviarla mientras Firefox y Edge están trabajando en ello.

Además, HTTP / 2 permite enviar recursos de forma voluntaria al navegador. Eso significa que si a.js está importando b.js y c.js , el servidor puede enviar b.js y c.js cada vez que se recupera a.js, lo que minimiza el tiempo entre solicitudes. Por supuesto, esta es una vista simplificada porque, en la práctica, el navegador ya podría tener b.js y c.js en su caché. HTTP / 2 es compatible con la mayoría de los navegadores.

El futuro sin transpilación

Teniendo en cuenta las estadísticas anteriores, esto significa que 2018 será el año en que la mayoría de las aplicaciones web puedan deshacerse de los paquetes o transpiladores de módulos.

La transpilación es una solución. Puede que lo hayamos hecho durante demasiado tiempo para acostumbrarnos, pero piénsalo. ¡Estamos "compilando" un lenguaje "interpretado" en un lenguaje "interpretado"! Además:

  • Configurar Webpack / Browserify es un impuesto innecesario en muchos casos
  • Depurar usando mapas de origen siempre es más difícil que depurar el script real que se está ejecutando (¿alguien se divirtió tratando de depurar thiso las variables cuando los mapas de origen no funcionan correctamente?)
  • Mata al DX cuando tienes que esperar unos segundos (a veces medio minuto) después de cada edición para ver el código más reciente. Hot Module Reloading (HMR) es una respuesta a eso, pero no siempre es fácil y rápido de configurar. Sin transpilación, todo lo que tienes que hacer es actualizar la página y en menos de un segundo tu última página está ahí.

Este mes de agosto, cuando se envíen los módulos ES6, algunos tipos de aplicaciones no utilizarán la transpilación en absoluto:

  • Extensiones de Chrome
  • Aplicaciones de escritorio de Electron
  • Aplicaciones web B2B que están diseñadas para ser ejecutadas por usuarios comerciales que ya tienen buenos engranajes proporcionados por la empresa.

Cuando la transpilación se convierta en una cosa del pasado, las bibliotecas con sintaxis de Hyperscript traerán las ideas de React a POJS (Plain Old JavaScript que no se transpila y se puede depurar fácilmente en la consola).

¡No transpile, compile de verdad!

WASM es el nuevo chico de la ciudad y es el objetivo de compilación oficial que promete una velocidad de ejecución más rápida y un tamaño de código más pequeño. Actualmente, Chrome y Firefox son compatibles con WASM, pero existe un buen consenso entre los grandes proveedores de navegadores de que WASM será el tiempo de ejecución común del futuro. Si tienes Chrome, puedes probarlo.

Si eres el tipo de desarrollador que busca algo nuevo, echa un vistazo a Rust. Se compila en WASM pero no se limita a la web. La gente realmente lo usa para escribir el sistema operativo o el motor del navegador. Además de los antiguos desarrolladores de C / C ++ lo aprueban y les gusta, y tiene una comunidad muy acogedora.

Algunas notas

  • Según el ex CTO de Mozilla, Chrome ganó y es poco probable que haya otra guerra de navegadores. Lo interesante es que Chrome lo ganó por meritocracia . Es de código abierto y Google ha definido claramente qué información recopila de los usuarios. Chrome gana incluso a los usuarios empresariales que tradicionalmente utilizan Windows. No obstante, mientras que los usuarios finales eligen Chrome por su velocidad, seguridad y simplicidad, los programadores adoran sus herramientas de desarrollo. Google tiene un papel activo en el TC39 que impulsa el futuro de JavaScript y, en general, es el defensor más fuerte de la plataforma web a pesar de que puede competir con su propio sistema operativo móvil. No solo eso, Google también ayuda a sus competidores. Google ha sido uno de los principales patrocinadores financieros de Mozilla y Opera utiliza su motor de renderizado.
  • Microsoft abandonó oficialmente el soporte para IE hace unos 17 meses. IE 11 continuará recibiendo actualizaciones de seguridad hasta 2025, pero depende de usted decidir si gasta recursos significativos para admitir un navegador que solo usa el 3.24% del mercado. También tenga en cuenta que Edge es el navegador predeterminado en Windows 10. Si alguien no quiere actualizar su Windows a la última versión, ¡el reciente ataque WannaCrypt probablemente le dé una razón para reconsiderarlo! Personalmente, estoy interesado en cualquier investigación de mercado sobre los ingresos provenientes de este segmento de clientes en particular.
  • Apple impuso una serie de restricciones injustas para mantener a los otros proveedores de navegadores fuera de su plataforma iOS. Entonces, por ejemplo, Chrome en iOS está técnicamente limitado a partes del motor Safari. Safari solía ser el nuevo IE, hasta que en 2016 hicieron un buen trabajo y se convirtieron en el navegador con mejor soporte de ES6:

En general, la participación global de iOS / Safari es menor que la de Android / Chrome. Varía según el país, por ejemplo, en los países más ricos, iOS tiene una penetración un poco más alta, mientras que en el mundo en desarrollo Android es el ganador absoluto, pero a nivel mundial aquí están las estadísticas:

¡Llamada a la acción!

Si tiene la edad suficiente, probablemente recuerde los días molestos en que algunos sitios web forzaban (o sugerían cortésmente) su navegador preferido (principalmente IE):

¡No queremos hacer eso! No importa lo emocionados que estemos con Chrome, no queremos ignorar el 46% del tráfico web que no está siendo procesado por Chrome.

El hecho de que pronto tengamos soporte para los módulos ES6 en los navegadores no significa que podamos deshacernos de un proceso de compilación y una "estrategia de paquete" adecuada. - Stefan Judis

Siempre tendremos personas atascadas con un navegador antiguo en el firmware de su televisor o en el sistema de información y entretenimiento del automóvil. Siempre tendremos a ese abuelo terco que no ve la necesidad de invertir en actualizar su máquina solo para dejarla como un legado. Los niños seguirán usando el antiguo iPhone o tableta de sus padres y 1 computadora portátil por niño no aumentará su capacidad de procesamiento durante la noche. No queremos bloquear a nadie.

Sin embargo, este no es un problema nuevo. A pesar de que ES6 es uno de los mayores cambios en la web, la degradación elegante aún puede proporcionar algún uso a la minoría mientras mantiene los costos de desarrollo bajo control para la mayoría.

En una publicación futura, discutiré el lado práctico de cómo enviar código moderno mientras tengo un plan de respaldo para una degradación elegante. Puedes seguirme en Twitter o Medium para estar atento.

BONIFICACIÓN: Eche un vistazo a JS Codeshift. Es una CLI para convertir código javascript antiguo en código javascript nuevo actualizando incluso las llamadas de biblioteca javascript antiguas a su última API. Intenta preservar tanto como sea posible el estilo original. Flujo de trabajo: después de confirmar sus cambios en el control de versiones, ejecute esto y haga una comparación exhaustiva y ejecute las pruebas automáticas y manuales. ¡Hecho!

Actualización 1 (2017–09–8): Chrome 61 aterrizó hace unos días con compatibilidad total con el módulo ES6. Tiene el 54% del mercado mundial de navegadores. Safari (14% del mercado global) ha admitido módulos ES6 durante un tiempo.

Actualización 2 (2017-09-10): aún puede admitir navegadores que no admitan módulos ES6 gracias a este truco pt nomodule src = ”compiled.js”> < ; / scri pt>. El atributo nomodule le dice a los navegadores con soporte de módulo ES6 que no carguen el script. En Safari hay algunas advertencias que puedes leer en la página que habla sobre el truco. Lea la especificación.

Actualización 3 (2017-09-12): los módulos ES6 admiten tierras en los navegadores: ¿es hora de reconsiderar la agrupación?

Actualización 4 (2017-09-12): los módulos están diferidos en rojo de forma predeterminada. Si desea omitir eso, agregue un atributo asíncrono a la etiqueta de secuencia de comandos para evitar el punto único de falla (SPOF).

Actualización 5 (2017-09-13): el nodo LTS 8.5 admite módulos ES6 (llamados ESM) detrás de una marca cuando el archivo tiene una extensión * .msj . Aquí hay una buena introducción sobre cómo se usan.

Actualización 6 (2017-09-22): aquí hay algunos buenos consejos prácticos para admitir navegadores nuevos y antiguos. ¡El ahorro de ancho de banda para evitar la transpilación es excelente!

Actualización 7 (2018–01–15): Lebab (el reverso de Babel) tiene una CLI para modernizar el Javascript antiguo. Esto es un poco similar al CodeShift de Facebook porque ambos modernizan el código antiguo.

¡El error más extendido en la historia de la informática nos abrió una gran oportunidad! Lea ¿Por qué deberíamos convencer a nuestros usuarios de que actualicen sus navegadores?