Comparando frameworks para front-end

Me encuentro este interesantísimo artículo de FreeCodeCamp, en el cual comparan la velocidad y tamaño de algunos de los frameworks más famosos que hay para front-end. Si bien cada uno de ellos está enfocado en dar un resultado más o menos parecido, creo que muchos se han preguntado si estos frameworks son realmente un alivio para la gente que diseña aplicaciones web, o solo es un sobre costo que se añade por el hecho de tener un código más ordenado y con posibilidades de mantenerlo mejor.

El análisis que les presento muestra algunas estadísticas que el autor tomó para medir el impacto de cada framework. En primer lugar el construyó la misma aplicación para los siguientes frameworks:

Después de eso empezó con sus métricas.

Rendimiento

Es quizá el punto más importante para todos. De nada sirve tener un framework si el rendimiento del mismo se ve afectado. Siempre hay que tener en cuenta que el rendimiento más óptimo debería ser el poder crear nuestras aplicaciones sin necesidad de un framework. Si acudimos a ellos es porque deberíamos suponer que mucho del tunning de ese rendimiento ya lo trabaja ese framework. El resultado es como sigue:

La mayoría de los frameworks corren por arriba de los 90 puntos, eso quiere decir que prácticamente en cuanto carga tu sitio o aplicación web, también lo hace el framework y sus componentes, a excepción de AngularJS que tiene el desempeño más bajo.

Tamaño

El tamaño es la cantidad de kb que tiene que transferirse para poder cargar tu aplicación web. Entre más grande sea mayor va a ser el tiempo de carga.

Mientras que hay frameworks que solo tienen 9kb de transferencia, hay otros como AngularJS que transfieren hasta 300kb. Esto en perspectiva podría parecer muchísimo, pero también dependiendo de la calidad de la conexión a internet es que se afecta mucho más esa transferencia.

Líneas de código

Las líneas de código es de los parámetros más importantes para un desarrollador. No tiene sentido que tengas que tener más líneas de código solo por usar un framework, si el objetivo inicial es justo simplificar ese proceso de creación con menos líneas.

En la imagen podemos ver que mientras para re-frame un proyecto requirió de 968 líneas de código, el mismo en Angular con ngrx y nx requirió 4,210 líneas de código, es decir, poco más de 4 veces, entonces aunque mucho código lo podrías generar y otro hacerlo tu, la realidad es que se entiende que más líneas de código podría aumentar el tamaño de tu proyecto, y en consecuencia hacerlo un poco más pesado.

Conclusión

Como mencionan en el artículo, no es muy fácil hacer comparaciones de peras con peras y manzanas con manzanas. Es importante notar que podría haber un sesgo pero los datos nos revelan mucha información. Lo que más me sorprende de esas gráficas es que por ejemplo, Vue, React y Angular, a pesar de que son los frameworks más usados, no son ni los más rápidos ni los más pequeños. Hay frameworks que son más ligeros, y si te interesa usar uno pero te interesa cuidar estas tres métricas la respuesta es que puedes optar por utilizar uno diferente a los 3 más populares.