Angular 8 y ES5-2015

Sobre la disociación de versiones ES5 y ES2015

Ignacio Buioli
- 07/05/2019 - 2 min. de lectura

Quienes esten al tanto de las novedades más resonantes de Angular 8 no serán ajenos a la introducción de un sistema de compilación muy novedoso: poder compilar dos versiones del JavaScript; uno para ES5 y otro para ES2015+ (ES6). Esto no es nuevo, parte de un proyecto de un usuario particular muy interesante y Angular lo convirtió en un sistema oficial de compilación, lo cual me parece más que acertado. A groso modo, esto permite cargar JavaScript de manera diferenciada según el navegador, entonces si el navegador soporta ES2015 va a cargar la versión más nueva de ES, y sino va a buscar la versión de ES5 que es ampliamente aceptada. Esto hace que se ahorre espacio a la hora de la carga (hago hincapié en "a la hora de la carga" porque lo veremos más adelante). Angular ya se encuentra presente en un montón de aplicativos derivados de la Web que no necesariamente operan sobre la Web (y mucho menos todos sobre Chrome), y acá es donde empiezan los problemas. Se empezaron a reportar errores con las Apps al ser compiladas, normalmente las Apps se mantienen sin cargar. Si se compila con Apache Cordova para Android falla directamente, al menos con las versiones actuales de WebView. Lo cual es, sin dudas, un problema. ¿Por qué no termina de funcionar tan bien si está en una versión final? Angular tiene esas cosas, hay que aprender a adaptarse, así que acá está la solución a este peculiar problema. Sin dudas se puede solucionar a mano (borrando los archivos que digan "es-2015") pero es muy engorroso.

Browserlist

Soy un gran partidario del archivo "browserlist", simplifica la vida para la compatibilidad de la App. En esta oportunidad nos dan la opción de que dejando solo la condición > 0.5% se compile con ES2015, evitando asi tener dos módulos compilados si sabemos que solo vamos a usar uno.

TSConfig

Acá está el santo grial del asunto, lo del browserlist solo aplica para compilar en ES2015, pero para Apache Cordova va a seguir sin dar resultados. Así que lo mejor es buscar el archivo tsconfig.json y modificar el atributo "target" para que en lugar de ES2015 diga ES5. De esta forma se compilará solo para ES5 de manera automática. Esto soluciona el problema para compilar en sistemas como Ionic o Apache Cordova.

¿Realmente pesa menos?

En JavaScript de clase ES2015+ (ES6) es un poco más ligero que su versión en ES5, pero la disociación será realmente funcional si lo usamos en un sistema Web, ni en una App con Electron ni con Apache Cordova nos veremos para nada beneficiados, ya que la compilación será con ambos archivos. Luego la App se encarga de elegir uno al momento de cargar, pero en peso total del archivo compilado (como puede ser un APK) tendremos cargados el doble de JavaScript. A partir de ahora, al menos hasta que Angular cambie esto, tendremos que elegir muy bien el tipo de cargar cuando compilemos en Apps.

Acerca de:

Ignacio Buioli

Degree on Multimedia Arts. He has developed numerous Multimedia projects as well as written articles and translated texts of the mentioned subject. In Moldeo Interactive, He is a Partner and Programmer; also taking care of a large part of the online networks and courses.