Aurelia e Angular sono popolari framework client JavaScript che ti permettono di costruire applicazioni moderne per il web, mobile e desktop. Forniscono caratteristiche moderne come data binding, HTML estensibile, SPA, Routing, UI Composition, ecc per costruire applicazioni complesse.
In questo post del blog ho cercato di confrontare Aurelia e Angular, evidenziando i vantaggi di Aurelia rispetto ad Angular insieme a pro e contro di entrambi.
Aurelia è discreta, facile da imparare e capire grazie alla sua filosofia “convention over configuration”, basta seguire alcune semplici convenzioni senza le configurazioni richieste nel caso di Angular. La sua sintassi è facile da ricordare e permette di costruire componenti in Typescript e anche in JavaScript vanilla.
Aurelia e Angular, entrambi sono basati sull’approccio Components e sono simili in molti modi. Angular è fondamentalmente sostenuto dal gigante informatico Google, mentre Aurelia è sviluppato da Rob Eisenberg e il suo team, Eisenberg in precedenza è stato un dipendente del team Angular 2 di Google, ha lasciato lo stesso a causa di alcuni disaccordi e ha deciso di costruire una piattaforma “non intrusiva” con aderenza agli standard web.
Questo è uno dei vantaggi di Aurelia. Il suo approccio “convention over configuration” è ciò che lo rende discreto. Non dovete preoccuparvi delle cose del framework, potete concentrarvi principalmente sulla logica della vostra applicazione.
In Aurelia, se state creando un componente, non avete bisogno di alcun decoratore per annotare un componente, non dovete preoccuparvi delle specifiche dei metadati, basta seguire le semplici convenzioni e Aurelia farà molte cose da solo.
Vediamo un esempio. Per creare un componente di base per stampare “Hello World!”, il codice Typescript dei tuoi componenti può essere:
Modello HTML:
Il selettore predefinito per il tuo componente è <hello></hello> e il suo template HTML è identificato dalla convenzione del nome del file.
Lo stesso componente in Angular
Codice Typescript:
Modello HTML:
In Angular, devi anche dichiarare il componente nella sezione dichiarazione del ngModule.
La creazione del componente sembra essere più semplice in Aurelia, vero?
Sintassi del binding
La sintassi di Aurelia è più facile da imparare e ricordare.
Sintassi del value binding: attribute.command=”expression”
e.g. <input value.bind=”firstName”>
Sintassi Event binding: event.command=”expression”
e.g. <button click.trigger=”sayHello()”>Say Hello</button>
Class binding:
es. <div class.bind=”isActive ? ‘active’ : ””></div>
Sintassi di binding di Angular
Value binding: In angular la direttiva ngModel è usata per legare gli input, nota qui “ngModel” è case-sensitive.
es. <input =”firstName” >
Event binding: Questo è piuttosto semplice (event)=”expression”
es. <button (click)=”sayHello()”>Say Hello</button>
Class binding: Ha la sintassi =”some-condition”
per esempio =”hero === selectedHero”
Routing e navigazione
La configurazione delle rotte è fondamentalmente simile in entrambi i framework ma con una differenza importante. In Angular, le rotte per un modulo sono definite centralmente in una singola configurazione che definisce i percorsi e i componenti instradabili insieme a tutti i sotto-percorsi, questo lo rende enorme e complesso.
Mentre in Aurelia è possibile definire le rotte dei genitori in un unico luogo e mettere la configurazione delle sotto-rotte nel componente figlio, questo nasconde la complessità interna e rende i componenti completamente incapsulati.
Supporto linguistico
Aurelia offre un’ampia scelta tra ES5, ES 2015, ES 2016, ES.Next e Typescript per scrivere il codice JavaScript.
Dove Angular limita l’utente a scrivere codice solo in Typescript.
Conformità agli standard
Aurelia è debitamente conforme agli standard esistenti e anche agli standard Web emergenti.
Angular è molto indietro in questo caso, come sottolineato dalla comunità che si discosta dagli standard. Per esempio, l’HTML non è sensibile alle maiuscole e alle minuscole, ma Angular ha adottato una sintassi che ha la sensibilità alle maiuscole e alle minuscole come ngFor, ngModel che non può essere gestita nativamente dal browser.
Ecosistema e supporto commerciale
Angular è sostenuto dal gigante informatico Google, ha un ampio ecosistema e supporto comunitario. Aurelia è un po’ in ritardo in questo caso, il suo ecosistema è più piccolo e i componenti di terze parti non sono ampiamente disponibili.
Ma il suo ecosistema è in continua crescita e sta emergendo come un framework popolare grazie alla facilità di sviluppo, alla conformità agli standard e alla semplicità.
Documentazione
Angular e Aurelia hanno entrambi una ricca documentazione e tutorial, è possibile imparare le basi del framework semplicemente seguendo i tutorial forniti nei loro siti.
Un punto negativo di Angular è che ha una “curva di apprendimento ripida”, il team di Angular aggiorna continuamente il suo framework e questi aggiornamenti sono molto frequenti, quindi bisogna continuare a imparare e adattare i cambiamenti necessari.
Conclusione
Aurelia e Angular sono entrambi framework potenti, Angular ha una fama migliore grazie al suo sostegno commerciale da parte di Google e al più ampio supporto della comunità.
Mentre Aurelia è più semplice, discreta e conforme agli standard, la sua politica di “convenzione sulla configurazione” rende lo sviluppo più facile e veloce.