También disponible en:
Turco - gracias a @erdenizZz,
Portugués - gracias a @felipefialho
Por tercera vez, comparamos los frameworks de Front-End utilizando las aplicaciones de ejemplo del mundo real. La aplicación de ejemplo RealWorld nos da:
Aplicación RealWorld
Algo más que un "todo". Por lo general, "todos" no transmite suficiente conocimiento y perspectiva para crear aplicaciones reales .
Estandarizado
Un proyecto que se ajusta a determinadas reglas. Proporciona una API de back-end, marcado estático, estilos y especificaciones.
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.
¿Qué bibliotecas / frameworks estamos comparando?
En el momento de la redacción, hay 18 implementaciones de Conduit en el repositorio de aplicaciones de ejemplo 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?
Actuación
¿Cuánto tiempo tarda esta aplicación en mostrar contenido y volverse utilizable?
Talla
¿Qué tan grande es 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).
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
Comprobaremos la puntuación de rendimiento de Lighthouse Audit que se envía con Chrome. Lighthouse devuelve una puntuación de rendimiento entre 0 y 100. 0 es la puntuación más baja posible.
Configuración de auditoría
El rendimiento es una puntuación combinada de las siguientes métricas
- Primera pintura con contenido
- Primera pintura significativa
- Índice de velocidad
- Primera CPU inactiva
- Tiempo para interactuar
- Latencia de entrada estimada
Para obtener más detalles, consulte la Guía de puntuación de Lighthouse.
Rendimiento TL; DR
Cuanto antes pinte y antes alguien pueda hacer algo, mejor será la experiencia para la persona que utiliza la aplicación.
Nota: PureScript se omitió debido a la falta de una aplicación de demostración.
Conclusión
La mayoría de las aplicaciones obtienen una puntuación superior a 90. Probablemente no sienta 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.
Esto depende del tamaño de su marco, así como de las dependencias adicionales que agregó, y qué tan bien su herramienta de compilación puede eliminar el código no utilizado de su paquete.
Tamaño TL; DR
Cuanto más pequeño sea el archivo, más rápida será la descarga y menos para analizar.
Conclusión
Hay muchas cosas sensacionales sucediendo en esta área. Svelte, el marco de interfaz de usuario mágico que desaparece, realmente se mantiene fiel a su chiste. Stencil es el nuevo chico en este punto de referencia y también funciona bastante bien. Ambos son relativamente nuevos y están superando los límites de lo que es posible en términos de tamaño.
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 de comentarios no forman parte de este cálculo. ¿Por qué es esto significativo?
Si la depuración es el proceso de eliminar errores de software, la programación debe ser el proceso de colocarlos - Edsger DijkstraLíneas de código TL; DR
Esto muestra cuán sucinto es una biblioteca / marco / lenguaje dado. ¿Cuántas líneas de código necesita para implementar casi la misma aplicación (algunas de ellas tienen un poco más de cinturones y silbidos) de acuerdo con la especificación?
Nota Imba: Imba se omitió debido a que cloc no podía procesar .imbaarchivos.
Nota Elm: los desarrolladores de Elm escriben el código un poco más verticalmente, de ahí el alto recuento de LoC, al menos esto es lo que me han dicho.
Nota Angular + ngrx: cálculo de LoC realizado /libssolo con carpetas .tsy .htmlarchivos. Si cree que esto es incorrecto, hágamelo saber cuál es el número correcto y cómo lo calculó.
Nota Hyperapp: LoC no era correcto cuando se publicó el artículo, gracias a Mateusz Kwasniewski por señalar la forma correcta de calcular LoC.
Conclusión
¿ClojureScript con re-frame te da el máximo partido? para la LoC. Clojure es conocido por ser inusualmente expresivo. Si le importa su LoC, debería consultar ClojureScript, AppRun y Svelte.
Resumen
Tenga en cuenta que esta no es exactamente una comparación de manzanas con manzanas. Algunas implementaciones usan la división de código y otras no. Algunos de ellos están alojados en GitHub, otros en Now y otros en Netlify. ¿Todavía quieres saber cuál es el mejor? El mejor es el que se adapta a tus necesidades.
P: ¿Te gustan los tipos?
R: Busque en Elm, PureScript y TypeScript: Angular, AppRun, Dojo.
P: ¿Quiere tener una huella muy pequeña?
R: Eche un vistazo a Svelte, Stencil y AppRun.
P: ¿Quiere mantener la base de código más pequeña?
R: Echa un vistazo a ClojureScript con re-frame, AppRun y Svelte.
P: ¿Quieres aprender algo nuevo?
R: ¡ Elige el que no conoces!
Preguntas más frecuentes
# 1 ¿Por qué no se incluyeron los marcos X, Y y Z en esta comparación?
Porque la implementación no se completa en el repositorio de RealWorld. ¡Considere contribuir! Implemente la solución en su biblioteca / marco favorito y la incluiremos la próxima vez.
# 2 ¿Por qué lo llamas mundo real?
Porque es un poco más que una aplicación de tareas pendientes. Con RealWorld no queremos decir que compararemos salarios, mantenimiento, productividad, curvas de aprendizaje, etc. Hay otras encuestas que responden algunas de estas preguntas. Lo que queremos decir con RealWorld es una aplicación que se conecta a un servidor, se autentica y permite a los usuarios utilizar CRUD, tal como lo haría una aplicación del mundo real.
# 3 ¿Por qué no incluiste mi marco favorito?
Consulte el n. ° 1 anterior, pero por si acaso, aquí viene de nuevo: porque la implementación no se completa en el repositorio de RealWorld. No hago todas las implementaciones, es un esfuerzo de la comunidad. Considere contribuir si desea ver su marco en la comparación.
# 4 ¿Qué versión de la biblioteca / marco incluiste?
El que está disponible al momento del cableado (Mar 2019). La información proviene del repositorio de RealWorld. Estoy seguro de que puede averiguarlo en el repositorio de GitHub.
# 5 ¿Por qué olvidó incluir un marco que es más popular que el de la comparación?
Nuevamente, vea arriba. La implementación no está completa en el repositorio de RealWorld; Es así de simple.
Gracias a Rich Harris y Richard Feldman por echar un vistazo antes de publicar.
Actualizaciones:
Cuando se publicó este artículo, la TL; DR LoC tenía la siguiente descripción:
Cuantas menos líneas de código tenga, menor será la probabilidad de encontrar un error. También tienes que mantener una base de código más pequeña. Si te gusta este artículo, debes seguirme en Twitter. Solo escribo / twitteo sobre programación y tecnología.