jquery - react - metodologia angular

¿Qué hace AngularJS mejor que jQuery?

Question

Principalmente he estado usando la biblioteca jQuery y acabo de comenzar a usar AngularJS. He leído algunos tutoriales sobre cómo usar Angular, pero no tengo claro por qué o cuándo usarlo, o qué beneficios puedo encontrar en comparación con solo usar jQuery.

Me parece que Angular te hace pensar en MVC, lo que quizás signifique que ves tu página web como una combinación de plantilla + datos. Usas {{data bindings}} cuando crees que tendrías datos dinámicos. Angular le proporcionará un controlador $ scope, que puede completar de forma estática o mediante llamadas al servidor web. Esto parece característicamente similar a la forma JSP de diseñar páginas web. ¿Necesito Angular para esto?

Para la manipulación DOM simple, que no implica la manipulación de datos (por ejemplo, cambios de color en mousehover, ocultar / mostrar elementos al hacer clic), jQuery o JS vainilla es suficiente y más limpio. Esto supone que el modelo en mvc de angular es cualquier cosa que refleje datos en la página , y por lo tanto, las propiedades de CSS, como los cambios de color, visualización / ocultación, etc., no afectan el modelo . ¿Angular tiene alguna ventaja sobre jQuery o JS vainilla para manipulaciones DOM?

¿Qué puede hacer Angular que lo hace útil para el desarrollo en comparación con lo que jQuery puede hacer junto con los complementos?

Answer 1

El enlace de datos

Vas dando vueltas haciendo tu página web, y sigues poniendo {{data bindings}} cada vez que sientes que tendrías datos dinámicos. Angular le proporcionará un controlador $ scope, que puede completar (estáticamente o mediante llamadas al servidor web).

Esta es una buena comprensión del enlace de datos. Creo que has bajado.

Manipulación DOM

Para la manipulación DOM simple, que no implica la manipulación de datos (por ejemplo, cambios de color en mousehover, ocultar / mostrar elementos al hacer clic), jQuery o js de la vieja escuela es suficiente y más limpio. Esto supone que el modelo en mvc de angular es cualquier cosa que refleje datos en la página, y por lo tanto, las propiedades CSS como color, pantalla / ocultar, etc. los cambios no afectan el modelo.

Puedo ver su punto aquí acerca de que la manipulación "simple" del DOM es más limpia, pero solo en raras ocasiones y tendría que ser realmente "simple". Creo que la manipulación DOM es una de las áreas, al igual que el enlace de datos, donde realmente brilla Angular. Comprender esto también te ayudará a ver cómo Angular considera sus puntos de vista.

Comenzaré comparando la forma angular con un enfoque vanilla js para la manipulación DOM. Tradicionalmente, pensamos en HTML como "no hacer nada" y escribirlo como tal. Entonces, js en línea, como "onclick", etc. son malas prácticas porque ponen el "hacer" en el contexto de HTML, que no "funciona". Angular voltea ese concepto en su cabeza. Mientras escribes tu punto de vista, piensas en HTML como capaz de "hacer" muchas cosas. Esta capacidad se abstrae en directivas angulares, pero si ya existen o las ha escrito, no tiene que considerar "cómo" se hace, simplemente usa la potencia disponible para usted en este HTML "aumentado" que angular le permite usar. Esto también significa que TODA la lógica de su vista está realmente contenida en la vista, no en sus archivos javascript. Una vez más, el razonamiento es que las directivas escritas en sus archivos javascript podrían considerarse que aumentan la capacidad de HTML, por lo que le permite al DOM preocuparse por manipularse (por así decirlo). Lo demostraré con un simple ejemplo.

Este es el marcado que queremos usar. Le di un nombre intuitivo.

<div rotate-on-click="45"></div>

Primero, me gustaría comentar que si le hemos dado a nuestro HTML esta funcionalidad a través de una Directiva Angular personalizada, ya hemos terminado . Eso es un soplo de aire fresco. Más sobre esto en un momento.

Implementación con jQuery

demostración en vivo aquí (clic).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: ''rotate(''+deg+''deg)'', 
    mozTransform: ''rotate(''+deg+''deg)'', 
    msTransform: ''rotate(''+deg+''deg)'', 
    oTransform: ''rotate(''+deg+''deg)'', 
    transform: ''rotate(''+deg+''deg)''    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr(''rotate-on-click''), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($(''[rotate-on-click]''));

Implementación con Angular

demostración en vivo aquí (clic).

app.directive(''rotateOnClick'', function() {
  return {
    restrict: ''A'',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind(''click'', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: ''rotate(''+deg+''deg)'', 
          mozTransform: ''rotate(''+deg+''deg)'', 
          msTransform: ''rotate(''+deg+''deg)'', 
          oTransform: ''rotate(''+deg+''deg)'', 
          transform: ''rotate(''+deg+''deg)''    
        });
      });
    }
  };
});

¡Bastante ligero, MUY limpio y eso es solo una simple manipulación! En mi opinión, el enfoque angular gana en todos los aspectos, especialmente cómo la funcionalidad se abstrae y la manipulación dom se declara en el DOM. La funcionalidad está enganchada al elemento a través de un atributo html, por lo que no es necesario consultar el DOM a través de un selector, y tenemos dos buenos cierres: un cierre para la fábrica de directivas donde las variables se comparten en todos los usos de la directiva y un cierre para cada uso de la directiva en la función de link (o función de compile ).

El enlace de datos bidireccional y las directivas para la manipulación DOM son solo el comienzo de lo que hace que Angular sea increíble. Angular promueve que todo el código sea modular, reutilizable y fácilmente comprobable, y también incluye un sistema de enrutamiento de aplicaciones de una sola página. Es importante tener en cuenta que jQuery es una biblioteca de métodos de conveniencia / cross-browser que se necesitan con frecuencia, pero Angular es un marco completo para crear aplicaciones de una sola página. El guión angular en realidad incluye su propia versión "lite" de jQuery para que algunos de los métodos más esenciales estén disponibles. Por lo tanto, podría argumentar que usar Angular IS usando jQuery (ligeramente), pero Angular proporciona mucha más "magia" para ayudarlo en el proceso de creación de aplicaciones.

Esta es una gran publicación para obtener más información relacionada: ¿Cómo puedo "pensar en AngularJS" si tengo un fondo jQuery?

Diferencias generales

Los puntos anteriores están dirigidos a las preocupaciones específicas de OP. También daré una visión general de las otras diferencias importantes. Sugiero hacer lecturas adicionales sobre cada tema también.

Angular y jQuery no pueden compararse razonablemente.

Angular es un framework, jQuery es una biblioteca. Los marcos tienen su lugar y las bibliotecas tienen su lugar. Sin embargo, no hay duda de que un buen marco tiene más poder para escribir una aplicación que una biblioteca. Ese es exactamente el punto de un marco. Le invitamos a escribir su código en JS simple, o puede agregar una biblioteca de funciones comunes, o puede agregar un marco para reducir drásticamente el código que necesita para lograr la mayoría de las cosas. Por lo tanto, una pregunta más apropiada es:

¿Por qué usar un marco?

Los buenos marcos pueden ayudar a diseñar su código para que sea modular (por lo tanto, reutilizable), SECO, legible, de alto rendimiento y seguro. jQuery no es un marco, por lo que no ayuda en estos aspectos. Todos hemos visto las paredes típicas del código de spaghetti jQuery. Esto no es culpa de jQuery; es culpa de los desarrolladores que no saben cómo diseñar código. Sin embargo, si los desarrolladores supieran cómo diseñar código, terminarían escribiendo algún tipo de "marco" mínimo para proporcionar la base (arquitectura, etc.) que discutí hace un momento, o agregarían algo. Por ejemplo, tú podría agregar RequireJS para actuar como parte de su marco de trabajo para escribir un buen código.

Estas son algunas de las cosas que proporcionan los marcos modernos:

• Templating
• El enlace de datos
• enrutamiento (aplicación de una sola página)
• arquitectura limpia, modular y reutilizable
• seguridad
• funciones / funciones adicionales para mayor comodidad

Antes de seguir hablando sobre Angular, me gustaría señalar que Angular no es el único de su tipo. Durandal, por ejemplo, es un marco construido sobre jQuery, Knockout y RequireJS. Una vez más, jQuery no puede, por sí solo, proporcionar lo que Knockout, RequireJS y todo el framework construido sobre ellos puede. Simplemente no es comparable.

Si necesitas destruir un planeta y tienes una Estrella de la Muerte, usa la Estrella de la Muerte.

Angular (revisitado).

Sobre la base de mis puntos anteriores acerca de qué marcos proporcionan, me gustaría recomendar la forma en que Angular los proporciona y tratar de aclarar por qué esto es, de hecho, superior a jQuery solo.

Referencia de DOM

En mi ejemplo anterior, es absolutamente inevitable que jQuery se enganche al DOM para proporcionar funcionalidad. Eso significa que la vista (html) está preocupada por la funcionalidad (porque está etiquetada con algún tipo de identificador, como "control deslizante de imágenes") y JavaScript se preocupa por proporcionar esa funcionalidad. Angular elimina ese concepto a través de la abstracción. El código escrito correctamente con Angular significa que la vista puede declarar su propio comportamiento. Si quiero mostrar un reloj:

<clock></clock>

Hecho.

Sí, necesitamos ir a JavaScript para que eso signifique algo, pero estamos haciendo esto de la manera opuesta al enfoque jQuery. Nuestra directiva Angular (que está en su propio pequeño mundo) ha "augmentado" el html y el html engancha la funcionalidad en sí mismo.

MVW Architecure / Modules / Dependency Injection

Angular le brinda una forma directa de estructurar su código. Ver cosas que pertenecen a la vista (html), la funcionalidad de vista aumentada pertenece a directivas, otra lógica (como llamadas ajax) y las funciones pertenecen a servicios, y la conexión de servicios y lógica a la vista pertenece a los controladores. También hay otros componentes angulares que ayudan a gestionar la configuración y modificación de servicios, etc. Cualquier funcionalidad que cree estará automáticamente disponible en cualquier lugar que lo necesite a través del subsistema Inyector que se ocupa de la Inyección de Dependencia en toda la aplicación. Al escribir una aplicación (módulo), la descompongo en otros módulos reutilizables, cada uno con sus propios componentes reutilizables, y luego los incluyo en el proyecto más grande. Una vez que resuelve un problema con Angular, lo ha resuelto automáticamente de una manera que es útil y estructurada para su reutilización en el futuro y se incluye fácilmente en el siguiente proyecto. Una gran ventaja para todo esto es que su código será mucho más fácil de probar.

No es fácil hacer que las cosas "funcionen" en Angular.

GRACIAS A DIOS. El código de spaghetti jQuery antes mencionado resultó de un desarrollador que hizo que algo "funcionara" y luego siguió adelante. Puedes escribir un código Angular incorrecto, pero es mucho más difícil hacerlo, porque Angular te peleará por ello. Esto significa que debe aprovechar (al menos algo) la arquitectura limpia que proporciona. En otras palabras, es más difícil escribir código incorrecto con Angular, pero es más conveniente escribir código limpio.

Angular está lejos de ser perfecto. El mundo del desarrollo web siempre está creciendo y cambiando, y existen nuevas y mejores formas de resolver problemas. React y Flux de Facebook, por ejemplo, tienen algunas grandes ventajas sobre Angular, pero vienen con sus propios inconvenientes. Nada es perfecto, pero Angular ha sido y sigue siendo impresionante por ahora. Así como jQuery una vez ayudó al mundo de la web a avanzar, también lo ha hecho Angular, y también lo harán muchos por venir.