Aurelia et Angular sont des frameworks clients JavaScript populaires qui vous permettent de construire des applications modernes pour le web, le mobile et le bureau. Ils fournissent des fonctionnalités modernes comme la liaison de données, le HTML extensible, la SPA, le routage, la composition de l’interface utilisateur, etc. pour construire des applications complexes.
Dans ce billet de blog, j’ai essayé de comparer Aurelia et Angular, en soulignant les avantages d’Aurelia par rapport à angular ainsi que les avantages et les inconvénients des deux.
Aurelia est discret, facile à apprendre et à comprendre grâce à sa philosophie « convention over configuration », vous avez juste besoin de suivre quelques conventions simples sans de telles configurations comme dans le cas d’Angular. Sa syntaxe est facile à retenir et vous permet de construire des composants dans Typescript et dans vanilla JavaScript aussi.
Aurelia et Angular, les deux sont basés sur l’approche des composants et sont similaires à bien des égards. Angular est fondamentalement soutenu par le géant de l’informatique Google alors qu’Aurelia est développé par Rob Eisenberg et son équipe, Eisenberg autrefois a été un employé de l’équipe Angular 2 de Google, il a quitté le même en raison de certains désaccords et a décidé de construire une plate-forme « discrète » avec l’adhésion aux normes du Web.
C’est l’un des avantages d’Aurelia. Son approche « convention sur configuration » est ce qui le rend discret. Vous n’avez pas besoin de vous soucier des choses du framework, vous pouvez vous concentrer principalement sur votre logique d’application.
En Aurelia, si vous créez un composant, vous n’avez pas besoin d’un décorateur pour annoter un composant, vous n’avez pas à vous soucier de la spécification des métadonnées, il suffit de suivre les conventions simples et Aurelia fera beaucoup de choses par lui-même.
Voyons un exemple. Pour créer un composant de base pour imprimer « Hello World ! », le code Typescript de vos composants peut être :
Modèle HTML :
Le sélecteur par défaut de votre composant est <hello></hello> et son modèle HTML est identifié par la convention de nom de fichier.
Le même composant en Angular
Code Typescript:
Modèle HTML :
En Angular, vous devez également déclarer le composant dans la section déclaration du ngModule.
La création de composant semble être plus simple dans Aurélia, n’est-ce pas ?
Syntaxe de liaison
La syntaxe d’Aurelia est plus facile à apprendre et à retenir.
Syntaxe de liaison de valeur : attribut.command= »expression »
e.g. <input value.bind= »firstName »>
Syntaxe de liaison d’événement : event.command= »expression »
e.g. <bouton click.trigger= »sayHello() »>Say Hello</button>
Liaison de classe:
e.g. <div class.bind= »isActive ? ‘active’ : » »></div>
Syntaxe de binding d’angular
Value binding : Dans angular, la directive ngModel est utilisée pour lier les entrées, Notez ici que « ngModel » est sensible à la casse .
e.g. <input = »firstName » >
La liaison par événement : C’est un peu simple (event)= »expression »
e.g. <bouton (click)= »sayHello() »>Say Hello</button>
La liaison de classe : Elle a la syntaxe = »some-condition »
e.g. = »hero === selectedHero »
Routage et navigation
La configuration du routage est fondamentalement similaire dans les deux frameworks mais avec une différence importante. Dans Angular, les routes pour un module sont définies de manière centralisée dans une seule config qui définit les chemins et les composants routables ainsi que toutes les sous-routes, cela le rend énorme et complexe.
Alors que dans Aurelia vous pouvez définir les routes parentales à un endroit et mettre la configuration des sous-routes dans le composant enfant, cela cache la complexité interne et rend les composants entièrement encapsulés.
Prise en charge du langage
Aurelia vous offre de larges choix pour choisir entre ES5, ES 2015, ES 2016, ES.Next et Typescript pour écrire votre code JavaScript.
Alors qu’Angular restreint l’utilisateur à écrire du code en Typescript uniquement.
Conformité aux normes
Aurelia est dûment conforme aux normes existantes et également aux normes Web émergentes.
Angular est très en retard dans ce cas, comme le souligne la communauté qui s’écarte des normes. Par exemple, le HTML n’est pas sensible à la casse mais Angular a adopté une syntaxe qui a une sensibilité à la casse comme ngFor, ngModel qui ne peut pas être gérée nativement par le navigateur.
Ecosystème et soutien commercial
Angular est soutenu par le géant informatique Google, a un large écosystème et un soutien communautaire. Aurelia est un peu à la traîne dans ce cas son écosystème est plus petit et les composants tiers ne sont pas largement disponibles.
Mais son écosystème est en croissance continue et il émerge comme un framework populaire en raison de la facilité de développement par celui-ci, la conformité aux normes et la simplicité.
Documentation
Angular et Aurelia ont tous deux une documentation et des tutoriels riches, vous pouvez apprendre les bases du framework juste en suivant les tutoriels fournis sur leurs sites.
Un point négatif d’Angular est qu’il a une « courbe d’apprentissage abrupte », l’équipe d’Angular met continuellement à jour son framework et ces mises à jour sont très fréquentes donc vous devez continuer à apprendre et à adapter les changements nécessaires.
Conclusion
Aurelia et Angular sont tous deux des frameworks puissants, Angular a une meilleure notoriété en raison de son soutien commercial par Google et d’un soutien communautaire plus large.
Alors qu’Aurelia est plus simple, discret et plus conforme aux standards, sa politique de « convention over configuration » rend le développement plus facile et plus rapide.