Si quiero hacer la misma aplicación web usando ReactJS y AngularJS, ¿cuál será más rápido?

Descargo de responsabilidad: recientemente escribí una publicación en el blog [1] sobre las experiencias que tuve al crear aplicaciones de una sola página usando marcos como Marionette, AngularJS y cómo siento que React resuelve algunos de los problemas que encontré. Si desea más contexto en torno a mi respuesta, no dude en consultarlo


Lo que descubrí es que existe una relación inversa entre cuán sucinto y “mágico” es un marco y cuán fácil es mantener y escalar la aplicación en un entorno de desarrollo ágil. Por ejemplo, Angular proporciona una gran cantidad de construcciones ingeniosas listas para usar que le permiten crear funcionalidades complejas rápidamente utilizando mucho menos código (en comparación con un marco como Backbone e incluso React). Descubrí que esto tiene el costo de renunciar a la propiedad y la simplicidad de su lógica a la magia del marco, lo que hace que sea mucho más difícil iterar y desarrollar la funcionalidad en el futuro.

Para responder qué tan “limpio” es el código es difícil porque puede significar cosas diferentes para diferentes personas. Algunos consideran que el código limpio es conciso y hacen todo lo posible mientras usan lo menos posible. Personalmente, considero un código limpio para demostrar claramente la propiedad de la vista, usando la menor magia posible para lograr la funcionalidad deseada, incluso si tiene el costo de escribir más código.

Para usar un ejemplo de la publicación del blog, considere el siguiente fragmento de Angular:


Ahora como usted, ¿ quién es el propietario de la (s) vista (s)?


En el ejemplo anterior, hay 4 controladores diferentes. La mitad está explícitamente administrada por el desarrollador, y la otra mitad está creada implícitamente por Angular para facilitar su control mágico sobre el estado y el DOM.

La propiedad , al igual que el estado , es difícil de administrar y predecir en un marco como Angular. Sus enlaces bidireccionales lo convierten en una opción atractiva en primer lugar, pero con una amplia experiencia y construcción de directivas y componentes personalizados, la magia oscura del bucle de resumen y las llamadas de vigilancia dificultan la gestión de la creciente cantidad de lógica que se desarrolla bajo capucha.


Para concluir, no hay bala de plata. Ni React ni Angular resolverán todos los problemas que encontrará y serán la solución perfecta para su aplicación web. Tendrá que comprender sus prioridades en cuanto a la creación de la aplicación web, ya sea mantener una base de código grande con múltiples desarrolladores o crear rápidamente prototipos de funcionalidad, y elegir la herramienta que mejor se adapte a sus necesidades.

[1]: Harry Potter y el marco mágico

Chris Harrington escribió un artículo de comparación de rendimiento en Codementor hace un tiempo para ReactJS, AngularJS y KnockoutJS. He incluido algunos de los artículos a continuación.

[EXTRACTO]

Metodología de prueba

Esto no es de ninguna manera una prueba científica sobre qué tan bien se desempeña cada marco. Dicho esto, sin embargo, traté de igualarlo en todos los marcos, por lo que, para ese fin, voy a repasar cómo escribí la prueba de cada marco a continuación. Básicamente, genero una lista de 1000 elementos que se procesan en una etiqueta ul , y luego mido cuánto tiempo toma midiendo las fechas antes y después de un render. El usuario también puede seleccionar un elemento de la lista, por lo que no es solo un render html directo; Hay eventos vinculados. No es una prueba perfecta en ningún aspecto, pero da sentido.

Reaccionar JS

var Class = React.createClass ({
seleccione: función (datos) {
this.props.selected = Portal de datos de Indonesia;
this.forceUpdate ();
},

render: function () {
artículos var = [];
for (var i = 0; i items.push (
React.createElement (“div”, {className: “row”},
React.createElement (“div”, {className: “col-md-12 test-data”},
React.createElement (“span”, {className: this.props.selected === this.props.data [i] .id? “Selected”: “”, onClick: this.select.bind (null, this.props .data [i])}, this.props.data [i] .label)
)
)
);
}

return React.createElement (“div”, null, items);
}
});

$ (“# run-react”). on (“click”, function () {
var built = new Class ({datos: datos, seleccionados: nulo});

datos var = _buildData (),
fecha = nueva Fecha ();

React.render (construido,
$ (“# reaccionar”) [0]); $ (“# run-react”). text ((nueva Fecha () – fecha) + “ms”);
});

Entonces, como una ejecución rápida, cuando el usuario inicia una ejecución, construyo una nueva lista de 1000 elementos, tomo nota de la hora actual, renderizo la clase React y luego mido cuánto tiempo tardó y escribí ese tiempo en el página. La clase en sí es sencilla, con un bucle rápido en la función de representación para insertar todas las etiquetas li creadas en una matriz, y luego representar esa matriz en un div contenedor. También hay un conjunto de enlaces onClick en el li para seleccionarlo.

JS angular

http://item.id === $ parent.selected}” ng-click = “select (item)”> {{item.label}}

angular.module (“prueba”, []). controlador (“controlador”, función ($ alcance) {
$ scope.run = function () {
datos var = _buildData (),
fecha = nueva Fecha ();

$ scope.selected = null;
$ scope. $$ postDigest (function () {
$ (“# run-angular”). text ((nueva Fecha () – fecha) + “ms”);
});

$ scope.data = data;
};

$ scope.select = function (item) {
$ scope.selected = http://item.id ;
};
});

Toda la página de rendimiento está marcada como una aplicación angular, por lo que construir el módulo es bastante sencillo. Aquí hay que $$postDigest gancho $$postDigest , que es una construcción angular interna. Nos permite especificar una devolución de llamada para que se active después de que se haya completado un ciclo de resumen.

Knockout JS

Knockout

Ejecutar

ko.applyBindings ({
seleccionado: ko.observable (),
datos: ko.observableArray (),

seleccione: función (elemento) {
this.selected ( http://item.id );
},

ejecutar: función () {
datos var = _buildData (),
fecha = nueva Fecha ();

this.selected (nulo);
this.data (datos);
$ (“# run-knockout”). text ((nueva Fecha () – fecha) + “ms”);
}
}, $ (“# knockout”) [0]);

Aquí, estamos usando una plantilla anónima para los enlaces de Knockout. Configuramos un enlace de clic, texto y css para indicar qué elemento está seleccionado, y un bucle foreach en el html Knockout para hacer el renderizado.

Manipulación de DOM sin procesar

Agregué la manipulación de DOM sin formato para dar una línea de base sobre cómo ejecutar la misma prueba sin ningún marco de fantasía.


$ (“# run-raw”). on (“click”, function () {
document.getElementById (“raw”). innerHTML = “”;
datos var = _buildData (),
fecha = nueva Fecha (),
template = $ (“# raw-template”). html (),
html = “”;

for (var i = 0; i var render = plantilla;
render = render.replace (“{{className}}”, “”);
render = render.replace (“{{label}}”, datos [i] .label);
html + = render;
}

document.getElementById (“raw”). innerHTML = html;

$ (“# raw”). on (“click”, “.test-data span”, function () {
$ (“# raw .selected”). removeClass (“selected”);
$ (this) .addClass (“seleccionado”);
});

$ (“# run-raw”). text ((nueva Fecha () – fecha) + “ms”);
});

Para la sección sin procesar, estoy tomando la plantilla de una etiqueta de script (marcada con text/html tipo text/html ) y reemplazo algunas palabras clave envueltas en llaves dobles con el texto apropiado. Los eventos de clic se conectan mediante jquery.

Resultados

Ejecuté todas las pruebas en Chrome 39.0.2171.95, Firefox 34.0.5 y Safari 7.0.2 abriendo la página de prueba y haciendo clic en el botón Ejecutar para cada marco diez veces. Si está interesado en los datos sin procesar, los he puesto a disposición aquí. Hay algunos gráficos elegantes a continuación que muestran los resultados.

Análisis

En promedio, React es el más rápido en representar una lista de 1000 elementos. Es un resultado sorprendente, porque hubiera esperado que la manipulación de DOM sin procesar fuera la más rápida, ya que no hay nada demasiado conectado, etc. Hay un valor atípico interesante en la prueba de Chrome en que la segunda ejecución de la prueba React tarda mucho tiempo en ejecutarse: casi 600 ms. Sucede cada vez que se ejecuta la segunda prueba en Chrome después de una nueva recarga y no estoy seguro de por qué. La manipulación de DOM sin procesar viene en segundo lugar, lo que no me sorprende, ya que obviamente es mucho más liviano que Angular o Knockout, sin nada más que conectar o cuidar detrás de escena. Angular es el tercero y Knockout es el último. Knockout lleva un tiempo especialmente largo en Firefox (~ 420ms). En una nota relacionada, Safari es el mejor navegador en todos los ámbitos para todos los marcos probados, pero el más lento para la prueba en bruto.

Si el rendimiento es su principal motivación, React es una buena opción para un marco, especialmente si muestra grandes cantidades de datos. Entiendo que este ejemplo es relativamente artificial, ya que nadie en su sano juicio va a mostrar 1000 elementos a la vez, pero creo que es indicativo de qué marco funciona mejor en su conjunto. [EXTRACTO]

Descargo de responsabilidad: ¡Soy Community Manager en Codementor!

Como siempre: depende, React y Angular hacen dos cosas diferentes, por lo que, dependiendo de su objetivo final, realmente podría ser cualquiera.

React es una biblioteca para hacer ‘cierta cosa’, dom diffs, mientras que Angular es un pseudo-framework en la estructura mvw. Angular maneja “más cosas” que React, pero a veces, no necesitará todo lo que Angular tiene para ofrecer.

Casi siempre voy a suponer que React va a ser “más rápido” que Angular, pero tampoco puedo suponer que tendrá todo lo que necesita.

Personalmente, no me gusta la forma en que Angular maneja algunas cosas (muchas cosas), y muchas de las cosas que se manejarán en Angular 2 resolverán muchos de los problemas, pero también siento que React es ‘más limpio’ , es decir, en el sentido de que el código generalmente se siente mejor, aunque los archivos jsx todavía hacen que mi piel se arrastre.

Menos líneas de código es básicamente irrelevante también, en mi opinión, en general. Porque LoC es un atributo personal y se relaciona directamente con la escritura de código limpio y asimilable, y minimizar LoC no ayuda. Eficiencia y consumo de tiempo, esas son formas más precisas de describir ‘qué tan rápido puedes hacer algo con X’, mientras que LoC no tiene nada que ver con eso, pero mucha gente, creo, trata de combinar los dos.

Si desea una verdad real, ReactJS probablemente terminaría siendo las líneas de código más rápidas, más limpias y menos simplemente por el diseño. Si bien es cierto que podría ser cualquiera, las bibliotecas son realmente dos cosas diferentes, como se menciona en algunas de las otras respuestas.

Lo que debe tener en cuenta es que una LoC más rápida, más limpia y menos no son métricas de calidad real. Si tiene una función que es más fácil de leer pero más detallada, probablemente sea mejor usarla que sea más corta pero más difícil de entender, por ejemplo:

age > 18 ? location.assign("continue.html") : stop = true;

vs

si (edad> 18) {
location.assign (“continue.html”);
} más {
stop = verdadero;
}

Aunque este es un ejemplo simple y la mayoría de los programadores están familiarizados con los operadores ternarios, si no los conoce, la primera opción de código no es tan clara como la segunda. Estas son las cosas que debe tener en cuenta al escribir código para la mantenibilidad y la optimización.

ReactJS es solo la vista del marco MVC. Por lo general, lo usa para representar la vista como parte de cualquier otro MVC, incluido AngularJS.
Por lo tanto, es difícil comparar esos 2 juntos. Por cierto, las líneas de códigos menores no significan que sea más rápido. También debe tener en cuenta el rendimiento.

Ambos no son mutuamente excluyentes. Puede agrupar Angular y React juntos en su aplicación web.

More Interesting

¿Dónde debo comenzar si quiero aprender el desarrollo web central?

Tengo una lista de 50,000 URL de imágenes de productos. Necesito obtener las dimensiones (alto y ancho) para cada una de estas URL de imágenes en una hoja de cálculo ordenable. ¿Existen herramientas para los no programadores que harán esto?

¿Cuál es la mejor opción para construir un sistema de gestión de la sociedad, Entity Framework o ADO.NET? ¿Por qué?

Sé HTML5, CSS3, JavaScript, jQuery lo suficiente como para hacer un trabajo. Sin embargo, no me considero un experto en estas áreas. ¿Cómo puedo mejorar?

¿Qué debo aprender a continuación si conozco HTML, CSS, JavaScript, jQuery, PHP, MySQL y WordPress?

Voy a aprender PHP este verano en un entrenamiento de 6 semanas. ¿Podré desarrollar un buen sitio web?

He sido desarrollador web front-end durante aproximadamente 2 años, ¿cuáles son los mejores pasos que puedo seguir para convertirme en un ingeniero confiable, competente y senior?

Sé HTML, CSS, PHP y MYSQL individualmente. Pero el problema es cómo usar estos cuatro juntos. Html y css se pueden usar juntos. Pero, ¿cómo usar php y mysql junto con ellos? No entiendo la implementación.

Soy un nuevo programador que busca entrar en el desarrollo web. ¿Con qué tecnología debo comenzar?

Sigo perdiendo empleos (desarrollador web) porque "soy demasiado lento y cometo errores". Pero me contratan para un papel mejor y más compensado cada vez. ¿Por qué?

Estoy a punto de crear una aplicación para Android y me pregunto si alguno de ustedes recomendaría usar un servicio de back-end como Firebase o Parse, o simplemente escribir el back-end por mi cuenta en Ruby on Rails.

¿A qué recursos debe referirse un desarrollador web para obtener ayuda y mantenerse actualizado?

Quiero participar en un Hackathon, pero no tengo experiencia práctica en programación web. Ya tengo algo de experiencia en HTML, CSS y JavaScript, pero quiero aprender la pila MEAN en un mes. ¿Como empiezo?

Cómo ejecutar el código JavaScript

Me gustaría aprender SAPUI5. Escuché que la gente usa XML en lugar de JS. ¿Alguien podría decirme dónde puedo encontrar tutoriales basados ​​en XML?