24/08/2015
Los frameworks JavaScript y su impacto en el rendimiento de la web
Por Marq Martí @marqmarti
Cada vez es más frecuente entre los desarrolladores web utilizar frameworks JavaScript, que agilizan el desarrollo enormemente. Tal como los navegadores han ido evolucionando, se han creado librerías cliente más grandes o pequeñas. Algunas de ellas han crecido hasta convertirse en la base de muchas aplicaciones single page o proyectos gigantes. El desarrollo basado en componentes web se ha puesto más de moda que nunca.
Los frameworks y el rendimiento
El caso es que ofrecer mucha funcionalidad en una librería tiene un impacto en el rendimiento de la aplicación, tanto de ancho de banda como de interpretación por parte del navegador. El tamaño de la página web media está subiendo a un ritmo altísimo. Esto está haciendo que la web de hoy en día no funcione de una forma fluida en dispositivos de hace más de 5 años o con prestaciones limitadas. Como vemos en este tweet, la página web media tendrá un tamaño equivalente a una instalación de Doom dentro de 7 meses, si el crecimiento sigue como hasta ahora.
In about 7 months average web page size will be same as Doom install image. Well done us! Onwards & upwards! pic.twitter.com/xtSAtZjPGl
— ronan cremin (@xbs) July 30, 2015
Esto es debido a que virtualmente casi toda webapp usa algún framework u otro, ya sea CSS o JavaScript. Muchos de ellos han crecido mucho desde que fueron lanzados, como Ember, que contiene 64K de código JavaScript. He aquí un pequeño gráfico mostrando el tamaño de algunos de los frameworks más usados:
Estos datos se han extraído de los ficheros minificados y comprimidos en gzip. Hay que tener en cuenta que normalmente los frameworks se cargan desde un CDN externo y a menudo ya están guardados en la caché del navegador, por lo que se omite el paso de descarga y el navegador pasa a interpretar el código que los compone.
También hay que tener en cuenta que los cinco son frameworks muy diferentes, con capacidades variables y orientadas a un tipo u otro de desarrollo. Por lo tanto, que tengan un tamaño menor no esta correlacionado con su calidad, sino con su objetivo y su naturaleza. Por ejemplo, AngularJS nos proporciona una suite muy completa para que construyamos aplicaciones enteras, mientras que React o Riot están orientados a los componentes web.
En muchos casos los desarrolladores web damos por hecho que hay que usar algún framework para realizar el proyecto que tenemos en mente, pero lo cierto es que a menudo son prescindibles y ganaríamos mucho usando Vanilla JS (JavaScript sin frameworks). En Sitelabs cada vez apostamos más por los microframeworks (Skeleton para CSS y Riot para JavaScript), porque no constituyen un impacto tan grande en la performance y proporcionan toda la funcionalidad que necesitamos en los proyectos que gestionamos.
