Una comparación del mundo real de los marcos front-end con los puntos de referencia (actualización de 2018)

Este artículo es una actualización de una comparación en el mundo real de marcos frontales con puntos de referencia de diciembre de 2017.

En esta comparación, mostraremos cómo las diferentes implementaciones de aplicaciones de ejemplo de RealWorld casi idénticas se comparan entre sí.

La aplicación de ejemplo RealWorld nos da:

  1. Aplicación del mundo real : algo más que un "todo". Por lo general, "todos" no transmite suficiente conocimiento y perspectiva para crear aplicaciones reales .
  2. Estandarizado : un proyecto que se ajusta a ciertas reglas. Proporciona una API de back-end, marcado estático, estilos y especificaciones.
  3. Escrito o revisado por un experto : un proyecto coherente del mundo real que, idealmente, un experto en esa tecnología habría construido o revisado.

Críticas de la última versión (diciembre de 2017)

✅️ Angular no estaba en producción. La aplicación de demostración que aparece en el repositorio de RealWorld estaba usando una versión de desarrollo, pero gracias a Jonathan Faircloth ahora está en la versión de producción.

✅ Vue no se incluyó en el repositorio de Real World y, por lo tanto, no se incluyó. Como puede imaginar, en el mundo de las aplicaciones de front-end, esto provocó mucho calor. ¿Cómo es que no agregaste Vue? ¿Qué diablos te pasa? ¡Esta vez Vue.js está de moda! Gracias Emmanuel Vilsbol .

¿Qué bibliotecas / frameworks estamos comparando?

Como en el artículo de diciembre de 2017, incluimos todas las implementaciones enumeradas en el repositorio de RealWorld. No importa si tiene muchos seguidores o no. La única salvedad es que aparece en la página de repositorio de RealWorld.

¿Qué métricas miramos?

  1. Rendimiento: ¿Cuánto tiempo tarda esta aplicación en mostrar contenido y volverse utilizable?
  2. Tamaño: ¿Qué tamaño tiene la aplicación? Solo compararemos el tamaño de los archivos JavaScript compilados. El CSS es común a todas las variantes y se descarga desde una CDN (Content Delivery Network). El HTML también es común a todas las variantes. Todas las tecnologías se compilan o transpilan a JavaScript, por lo que solo dimensionamos este (s) archivo (s).
  3. Líneas de código: ¿Cuántas líneas de código necesitó el autor para crear la aplicación RealWorld según las especificaciones? Para ser justos, algunas aplicaciones tienen un poco más de detalles, pero no deberían tener un impacto significativo. La única carpeta que cuantificamos está src/en cada aplicación.

Métrica n. ° 1: rendimiento

Consulte la Primera prueba de pintura significativa con Lighthouse Audit que se envía con Chrome.

Cuanto antes pinte, mejor será la experiencia para la persona que utiliza la aplicación. Lighthouse también mide First interactivo, pero esto fue casi idéntico para la mayoría de las aplicaciones y está en versión beta.

Probablemente no verá mucha diferencia en lo que respecta al rendimiento.

Métrica # 2: Tamaño

El tamaño de la transferencia es de la pestaña de red de Chrome. Encabezados de respuesta con GZIP más el cuerpo de la respuesta, tal como lo entrega el servidor.

Cuanto más pequeño sea el archivo, más rápida será la descarga (y hay menos para analizar).

Esto depende del tamaño de su marco, así como de las dependencias adicionales que agregó, y de qué tan bien su herramienta de compilación puede hacer un pequeño paquete.

Puede ver que Svelte, Dojo 2 y AppRun hacen un trabajo bastante bueno. No puedo decir lo suficiente sobre Elm, especialmente cuando miras la siguiente tabla. Me gustaría ver cómo se compara Hyperapp ... ¿quizás la próxima vez, Jorge Bucaran?

Métrica n. ° 3: líneas de código

Usando cloc contamos las líneas de código en la carpeta src de cada repositorio. Las líneas en blanco y los comentarios no forman parte de este cálculo. ¿Por qué es significativo?

Si la depuración es el proceso de eliminar errores de software, la programación debe ser el proceso de colocarlos - Edsger Dijkstra

Cuantas menos líneas de código tenga, menor será la probabilidad de encontrar un error. También tiene que mantener una base de código más pequeña.

En conclusión

Me gustaría dar las gracias a Eric Simons por crear el repositorio de aplicaciones de ejemplo de RealWorld, y a los numerosos colaboradores que escribieron diferentes implementaciones.

Actualización: Gracias a Jonathan Faircloth por proporcionar la versión de producción de Angular.

Y si te pareció interesante este artículo, deberías seguirme en Twitter y Medium.