Aurelia en Angular zijn populaire JavaScript-clientframeworks die u in staat stellen om moderne applicaties te bouwen voor het web, mobiel en desktop. Ze bieden moderne functies zoals data binding, uitbreidbare HTML, SPA, Routing, UI Composition, etc om complexe apps te bouwen.
In deze blog post heb ik geprobeerd om Aurelia en Angular te vergelijken, met de nadruk op de voordelen van Aurelia over Angular, samen met de voors en tegens van beide.
Aurelia is niet opdringerig, gemakkelijk te leren en te begrijpen dankzij de “conventie boven configuratie”-filosofie, waarbij je slechts enkele eenvoudige conventies hoeft te volgen zonder dat er configuraties nodig zijn zoals bij Angular. De syntaxis is gemakkelijk te onthouden en maakt het mogelijk om componenten te bouwen in Typescript en in vanilla JavaScript.
Aurelia en Angular, beide zijn gebaseerd op de Components-benadering en zijn in veel opzichten vergelijkbaar. Angular wordt in principe ondersteund door de IT-gigant Google, terwijl Aurelia is ontwikkeld door Rob Eisenberg en zijn team, Eisenberg was voorheen een medewerker van Google’s Angular 2-team, hij verliet hetzelfde als gevolg van enige onenigheid en besloot om een “onopvallend” platform te bouwen met inachtneming van webstandaarden.
Dit is een van de voordelen van Aurelia. De “conventie boven configuratie” aanpak is wat het onopvallend maakt. Je hoeft je geen zorgen te maken over framework dingen, je kunt je primair richten op je applicatie logica.
In Aurelia, als je een component maakt, heb je geen decorator nodig om een component te annoteren, je hoeft je geen zorgen te maken over metadata specificatie, volg gewoon de eenvoudige conventies en Aurelia zal veel dingen zelf doen.
Laten we eens een voorbeeld zien. Om een basis component te maken om “Hallo Wereld!”, Uw componenten Typescript code kan zijn:
HTML template:
De standaardselector voor uw component is <hello></hello> en de HTML-template ervan wordt aangeduid met de conventie voor de bestandsnaam.
Hetzelfde component in Angular
Typescript code:
HTML sjabloon:
In Angular moet u de component ook declareren in het declaratiegedeelte van de ngModule.
Het aanmaken van componenten lijkt eenvoudiger te zijn in Aurelia, nietwaar?
Binding Syntax
De syntax van Aurelia is gemakkelijker te leren en te onthouden.
Value binding syntax: attribute.command=”expression”
e.b. <input value.bind=”firstName”>
Event binding syntaxis: event.command=”expression”
e.g. <button click.trigger=”sayHello()”>Say Hello</button>
Class binding:
bijv. <div class.bind=”isActive ? active’ : ””></div>
De bindingssyntaxis van Angular
Value binding: In angular wordt de richtlijn ngModel gebruikt voor het binden van ingangen, Let op hier “ngModel” is hoofdlettergevoelig .
e.g. <input =”firstName” >
Event binding: Dit is enigszins eenvoudig (event)=”expression”
bv. <knop (click)=”sayHello()”>Say Hello</button>
Class binding: Het heeft syntaxis =”some-condition”
e.g. =”hero === selectedHero”
Routing en navigatie
Routingconfiguratie is in principe vergelijkbaar in beide frameworks, maar met één belangrijk verschil. In Angular worden routes voor een module centraal gedefinieerd in een enkele configuratie die paden en routeerbare componenten definieert samen met alle subroutes, wat het enorm en complex maakt.
Waar in Aurelia je de bovenliggende routes op één plaats kunt definiëren en de configuratie van de subroutes in de kindcomponent kunt plaatsen, verbergt dit de innerlijke complexiteit en maakt het de componenten volledig ingekapseld.
Taalondersteuning
Aurelia biedt u ruime keuzemogelijkheden om te kiezen uit ES5, ES 2015, ES 2016, ES.Next en Typescript om uw JavaScript-code te schrijven.
Waar Angular de gebruiker beperkt tot het schrijven van code in Typescript alleen.
Naleving van standaarden
Aurelia voldoet naar behoren aan bestaande standaarden en ook aan opkomende webstandaarden.
Angular loopt in dit geval ver achter, zoals door de gemeenschap wordt opgemerkt, omdat het afwijkt van standaarden. HTML is bijvoorbeeld niet hoofdlettergevoelig, maar Angular heeft een syntaxis overgenomen die hoofdlettergevoelig is, zoals ngFor, ngModel, die niet door de browser kan worden afgehandeld.
Ecosysteem en commerciële steun
Angular wordt gesteund door de IT-gigant Google, heeft een breed ecosysteem en wordt door de gemeenschap gesteund. Aurelia is enigszins achtergebleven in dit geval is het ecosysteem kleiner en componenten van derden zijn niet op grote schaal beschikbaar.
Maar het ecosysteem groeit voortdurend en het is in opkomst als een populair kader als gevolg van het gemak van de ontwikkeling door het, standaard compliance en eenvoud.
Documentatie
Zowel Angular en Aurelia hebben rijke documentatie en tutorials, kunt u leren framework basics gewoon door het volgen van de tutorials die op hun sites.
Eén negatief punt van Angular is dat het een “steile leercurve” heeft, het Angular-team werkt hun framework voortdurend bij en deze updates zijn zeer frequent, dus je moet blijven leren en de nodige wijzigingen doorvoeren.
Conclusie
Aurelia en Angular zijn beide krachtige frameworks, maar Angular is bekender vanwege de commerciële ondersteuning door Google en de bredere steun van de community.
Aurelia is eenvoudiger, onopvallend en voldoet beter aan de standaard, het “conventie boven configuratie” beleid maakt ontwikkeling eenvoudiger en sneller.