Hoy les traigo una traducción de un interesante artículo que da una observación sobre la interacción de los frameworks AngularJS y jQuery. Aquí va un extracto de este. Su fuente original pueden encontrarla en http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

  1. No diseñes tu página para cambiarla por el DOM después: Con jQuery, puedes diseñar una página y dinámicamente recambiar todo lo que ya estaba concebido. Ello es posible ya que jQuery está pensado para el aumento de la interacción con las aplicaciones, en el caso de AngularJS debes pensar desde el principio la arquitectura de tu aplicación y minimizar los cambios que se puedan realizar sobre los componentes. Empezar diseñando tu lógica llevando el mínimo de cambios cuando se piense la vista de la aplicación.
  2. No aumentes jQuery con AngularJS: Usualmente nos vamos con la idea de que hago toda una presentación con jQuery y utilizo AngularJS en la cima para trabajar controladores y modelo. Sumamente tentador cuando inicias, pero no es recomendable. Muchos desarrolladores que han desarrollado soluciones con jQuery y las combinan con AngularJS con determinados pasos que involucran callbacks y $apply sin embargo la realidad que se debe codificar lo que desees pensando solo en AngularJS, si en un momento te estancas, no corras a auxiliarte de jQuery, pregunta en la comunidad, sólo después de esa alternativa, usa entonces jQuery.
  3. Siempre piensa en términos de Arquitectura: Lo primero que hay que tener en mente que las aplicaciones de una sola página (SPA) son de hecho aplicaciones web no páginas ni sitios web. Así que primero debemos pensar primeramente como un programador del lado del servidor y luego del lado del cliente. Ello implica pensar nuestra aplicación en componentes individuales,  que se pueden extender y probar. Entonces ¿cómo lo hacemos? ¿Cómo pensamos en AngularJS en contraste con jQuery? Bueno, en jQuery, para hacer un menú desplegable hacemos lo siguiente:
    <ul class="main-menu">
        <li class="active">
            <a href="#/home">Home</a>
        </li>
        <li>
            <a href="#/menu1">Menu 1</a>
            <ul>
                <li><a href="#/sm1">Submenu 1</a></li>
                <li><a href="#/sm2">Submenu 2</a></li>
                <li><a href="#/sm3">Submenu 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#/home">Menu 2</a>
        </li>
    </ul>

    y se activa de la siguiente manera

    $('.main-menu').dropdownMenu();

    Esto parece muy sencillo, pero cuando las aplicaciones aumentan su alcance se dificulta el mantenimiento de elementos como estos. En AngularJS, la vista es la manera oficial y basada en ello es que se enlazan las funcionalidades propias de la vista, de manera que lo anterior expuesto en jQuery se vería como esto

    <ul class="main-menu" dropdown-menu>
        ...
    </ul>

    . Aunque los dos códigos realizan la misma función se puede observar la expresividad que se refleja en el que está codificado en AngularJS, todo ello a través de directivas, que explícitamente deben estar declaradas en cuanto a su funcionalidad. Los desarrolladores a menudo intentan hacer consultas sobre los elementos del DOM y luego aplicar directiva sobre ellos, eso es trabajar mitad jQuery y mitad AngularJS, pues no, no se debería hacer, no funcionaría correctamente. Fuera del contexto de una directiva no se debe manipular el DOM. Recuerda siempre crear arquitectónicamente tu aplicación y luego la diseñas.

    El enlace de datos es por mucho la característica más prominente de AngularJS, mediante el cual como consecuencia es la que provee la actualización de los elementos del DOM. Tomemos por ejemplo lo que haríamos en jQuery para actualizar en correspondencia con peticiones Ajax:

    $.ajax({
      url: '/myEndpoint.json',
      success: function ( data, status ) {
        $('ul#log').append('<li>Data Received!</li>');
      }
    });

    y la vista sería [código aquí]. Esta manera de hacer las cosas se complica manipulando el DOM por ejemplo cuando queremos añadir o eliminar elementos, cosa que tendríamos que realizar manualmente. En AngularJS realizaríamos lo mismo de la siguiente manera

    <ul class="messages" id="log">
    </ul>

    y la vista sería

    $http( '/myEndpoint.json' ).then( function ( response ) {
        $scope.log.push( { msg: 'Data Received!' } );
    });

    pero si ahora en vez de una lista lo queremos hacer utilizando las clases de alerta de Bootstrap pues sería entonces de la siguiente manera

     
    {{ entry.msg }}

    </div>

    . ¿Cómo realmente es? jQuery, mezcla la vista con su modelo, sin embargo, AngularJS realiza una separación de responsabilidades, lo que introduce la característica que se pueda probar la aplicación en construcción. Para lograr ello se utiliza el patrón de diseño de Inyección de Dependencias.

  4. Las directivas no son paquetes de jQuery: Seguramente has escuchado que no manipules el DOM fuera de una directiva. De hecho, es esto lo que se debería hacer, la directiva es quien debe encapsular las funcionalidades que trabajen sobre el DOM. Sin embargo, frecuentemente lo que realizan es encapsular el código jQuery dentro de la definición de la directiva mostrando algo como
    .directive( 'myDirective', function () {
        return {
            template: '<a>Toggle me!</a>',
            link: function ( scope, element, attrs ) {
                var on = false;
    
                $(element).click( function () {
                    on = !on;
                    $(element).toggleClass('active', on);
                });
            }
        };
    });

    cuando analizamos este código vemos que tiene puntos en contra:

    1. jQuery no es necesario.
    2. Utilizando angular.element evitamos utilizar jQuery, por si nuestro código está en proyectos que no tienen jQuery.
  5.              ¿Cómo se reescribe esta directiva a la manera de angular?
    .directive( 'myDirective', function () {
        return {
            scope: true,
            template: '<a ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
            link: function ( scope, element, attrs ) {
                scope.on = false;
    
                scope.toggle = function () {
                    scope.on = !scope.on;
                };
            }
        };
    });

    . Las directivas funcionan como extensiones HTML, si HTML no hace algo que hace falta, utiliza una directiva que lo manipule.

  6. Concluyendo: En este punto te darás cuenta que no hay necesidad de mezclarlos. Cuando se utilice AngularJS, no hace falta incluir jQuery, solo cambiar la manera de pensar en cómo resolver lo que se quiere hacer.
Anuncios