Si está considerando adoptar un marco de Aplicación de Página Única (SPA), ya sabe que hay muchas opciones. Está Angular 1, Durandal, Reactar, Ember y Knockout, por nombrar algunas. También hay dos nuevos niños en la cuadra que reciben mucha atención: Angular 2 y Aurelia. Comparemos con los dos para que puedan decidir cuál se ajusta mejor a sus necesidades.
Antes de entrar en materia, vale la pena señalar que Angular 1 ha tenido una enorme curva de adopción en los últimos años. Tiene una gran y vibrante comunidad… dondequiera que mires hay cursos, conferencias, libros y artículos sobre Angular 1. Como resultado, hay una presunción de que toda esa gente ahora simplemente migrará o se actualizará a Angular 2.

Por otro lado, el marco Aurelia fue lanzado un par de meses antes que Angular 2, y también sirve como una gran elección de marco SPA con una audiencia en rápido crecimiento. He trabajado con muchos de los marcos anteriores y he publicado cursos, presentado en conferencias y hecho muchos compromisos de consultoría usándolos para proyectos reales. Y ahora estoy haciendo lo mismo con Angular 2 y Aurelia.
Decidir entre los dos puede ser un desafío porque ambos marcos están bien diseñados y son capaces de satisfacer casi cualquier requisito de la SPA. No hay un claro «ganador» si se miran ambos desde un punto de vista técnico objetivo. Sin embargo, hay muchas diferencias, y esas diferencias a menudo hacen que sea más fácil para algunos clientes elegir uno u otro. Por lo tanto, permítanme resumir algunas de esas diferencias para ayudar a guiar sus propios intereses y decisiones.
ECMAScript 2015 y TypeScript
Ya sea que pienses que quieres ir con Angular 2 o Aurelia, el mayor cambio que debes hacer se aplica igualmente a ambos, y está desacoplado de los propios marcos. Para construir una aplicación moderna de cliente web, necesitas aprender ECMAScript 2015 (alias ES2015 o ES6) o TypeScript. Pero no basta con aprender la sintaxis del lenguaje: es necesario aprender a configurar un entorno para codificar, construir, depurar y desplegar ese código para que se ejecute como ES5 JavaScript en el navegador (ya que no todas las características de esos lenguajes están disponibles en todos los navegadores).
Aunque técnicamente se podría codificar contra cualquiera de los dos marcos usando ES5, ya que las versiones del marco se transponen al propio ES5, ambos equipos te animan a usar ES2015 o TypeScript. Y casi toda la documentación y muestras estarán en uno de esos dos idiomas, así que estarías por tu cuenta tratando de averiguar cómo usarlos con el ES5 – y eso no tiene mucho sentido.
Migración angular 1
Si ya tienes una aplicación que has construido con Angular 1, podrías pensar que migrar a Angular 2 sería lo más fácil. El equipo de Angular proporciona alguna guía y herramientas para permitir que el código de Angular 1 y 2 coexista en una sola aplicación lógica, aunque en realidad se ejecuten en contextos de ejecución separados. Pero no hay una ruta de conversión directa porque los patrones de diseño de Angular 2 son sustancialmente diferentes de los de Angular 1.
Aurelia también proporciona documentación sobre la migración del código Angular 1 al código Aurelia. Y la gente con experiencia en Angular 1 puede sentirse más a gusto con Aurelia ya que se basa en el patrón de separación MVVM UI, que es muy similar al patrón MVC del lado del cliente usado en Angular 1. Angular 2 ya no sigue un patrón de separación de UI, sino que va con un enfoque centrado en el componente que recuerda a los formularios web ASP.NET, Windows o XAML, donde tienes marcas y códigos detrás que están cada uno acoplado al otro.
Intrusión en el marco
La codificación de Angular 2 es un poco más ruidosa que la de Aurelia, porque Aurelia toma una postura firme sobre la «convención sobre la configuración», mientras que Angular 2 requiere una configuración explícita para casi todo lo que haces en tu aplicación. Esto se hace notar muy rápidamente cuando pones tu primera aplicación junto con cada una. Para una simple aplicación de página de datos maestra-detallada como la que se muestra a continuación, la versión de Angular 2 requiere unas 20 líneas de código de declaraciones de arranque (ver más abajo) para decirle a Angular qué módulos estándar del marco de trabajo debe tirar, qué componentes ha declarado en su aplicación, y así sucesivamente.
importar { BrowserModule } de $0027@angular/plataforma-browser$0027;importar { NgModule } de $0027@angular/core$0027;importar { FormsModule } de $0027@angular/forms$0027;importar { HttpModule } de $0027@angular/http$0027;importar { AppComponent } de $0027./app.component$0027;importar { DataRepository } de $0027./datarepo$0027;@NgModule({ declaraciones: [AppComponent], importa: [BrowserModule, FormsModule, HttpModule ], proveedores: [Depósito de datos], bootstrap: [AppComponent]})clase de exportación AppModule { }
Aurelia no requiere ninguna configuración de bootstrapping o declaraciones de módulo raíz porque tiene convenciones que asumen que se utilizará un conjunto estándar de módulos marco. También tiene una convención para lo que se llamará el componente inicial de la interfaz de usuario que será el componente raíz. Por lo tanto, Aurelia es capaz de arrancar tu aplicación sin la correspondiente configuración, y las convenciones de Aurelia serán suficientes para la mayoría de las aplicaciones.
Además, en Angular 2, en cada componente que definas debes usar un decorador para identificar a qué plantilla html y CSS está asociado ese componente, así como identificar los servicios que vas a inyectar como dependencias. Aurelia no requiere la correspondiente configuración para su HTML o CSS porque asume una convención de nomenclatura que espera que se encuentren con el mismo nombre (que no sea la extensión del archivo) y que se encuentren en la misma carpeta que el módulo ViewModel. Por supuesto, cualquiera de las convenciones de Aurelia son anulables a través de la configuración.
Vinculación de datos
Aurelia tiene un rápido y eficiente sistema de enlace de datos bidireccional que le resultará familiar y cómodo a cualquiera que venga de marcos como Angular 1, Knockout y plataformas XAML. Angular 2 tiene en realidad un sistema unidireccional de enlace de datos, donde los datos sólo fluyen de los objetos de origen de datos a las propiedades de los elementos de enlace en el marcado.
Para acomodar los casos de uso de entrada de datos usando controles de entrada estándar, hay una directiva ngModel en la que se puede usar una combinación de unión de propiedades y sintaxis de manejo de eventos para lograr (lo que se siente) una unión de datos de dos vías en la entrada de ese elemento. Sin embargo, si va a escribir cualquier elemento de entrada personalizado usted mismo, necesitará añadir algún código adicional no trivial a su elemento personalizado para permitir que las propiedades del mismo sean datos vinculados a la entrada, usando la misma sintaxis que ngModel. Aurelia soporta la vinculación de datos bidireccional en cualquier propiedad de cualquier elemento con un único estilo de declaración consistente en el que simplemente añades .bind a la propiedad en tu marcado, para que parezca un poco más sencillo y limpio.
Respaldo comercial
Tanto Angular 2 como Aurelia son proyectos de código abierto con un gran equipo central y una próspera comunidad que los rodea. Angular 2 está dirigido por un equipo dedicado en Google y se utiliza en muchos de sus propios productos, así que puedes estar seguro de que no va a desaparecer pronto. Sin embargo, Google no ofrece ningún servicio de asistencia directa ni de consultoría en torno a la estructura, por lo que tendrás que confiar en la comunidad para que te ayude en la creación de aplicaciones con Angular 2. Pero es seguro que la mayoría de la comunidad ya existente de Angular 1 pasará a Angular 2. De la misma manera, es probablemente cierto que Angular 2 tendrá un ecosistema más grande que el de Aurelia, particularmente a corto plazo.
Aurelia está respaldada por una pequeña empresa llamada Blue Spire, y todo su modelo de negocio se basa en la prestación de servicios de consultoría y apoyo a las aplicaciones construidas con Aurelia. Como resultado, algunos pueden tener preocupaciones sobre que haya más riesgo de que esa compañía desaparezca, pero mientras haya una buena adopción del marco de Aurelia (que la hay), puedes contar con un rico ecosistema y la comunidad que rodea a Aurelia para permitirte encontrar ayuda cuando la necesites, al igual que con Angular 2.
Aurelia vs. Angular 2: Para llevar
Hay un número de otras diferencias, incluyendo una mayor extensibilidad en Aurelia que en Angular 2, diferencias sintácticas en su marcado, y cuán abiertos y precisos han sido los equipos en mantener a la comunidad informada sobre los próximos lanzamientos. Pero ninguna de ellas debería ser de mucha importancia para la mayoría de las empresas o individuos que intentan elegir entre los marcos. Ambos marcos tienen un excelente rendimiento y, aunque pueden variar algunos en diferentes puntos de referencia, ninguno es claramente superior al otro desde la perspectiva del rendimiento.
Al final del día, no puedes equivocarte con ninguno de los dos marcos. Para decidir, comienza por considerar las diferencias señaladas aquí y trata de averiguar cuál tiene más sentido para ti. Puedes descargar la aplicación de muestra aquí. Esto le permitirá ver una comparación de la aplicación del mismo caso de uso básico con ambos marcos, de modo que pueda tener una mejor idea de su enfoque para definir las vistas, el marcado de la unión de datos y las declaraciones de los componentes, entre otras cosas.
Espero que esto te haya ayudado a entender las principales diferencias entre Angular 2 y Aurelia, y pueda ayudarte a decidir qué ruta quieres seguir.
Aprenda más sobre Angular 2 y con estos cursos:
Angular 2: Empezando (si no tienes experiencia en el marco del SPA)
Angular 2: Primera mirada (si tienes experiencia)
Y para Aurelia, asegúrate de revisar mi curso de Pluralsight: Fundamentos de Aurelia.
COMPARTIR: