Η σύγκριση των πρωταθλητών: Angular vs Vue

Ρύθμιση ενός έργου

Ο γρηγορότερος τρόπος για να ξεκινήσετε μια έργο είναι με τη χρήση του CLI που παρέχεται από τους συγγραφείς των πλαισίων. Και τα δύο διαθέτουν αρκετά καλή εξυπηρέτηση, ωστόσο, υπάρχουν μερικές διαφορές, π.χ., Vue διαθέτει περισσότερες επιλογές, επομένως, μπορείτε να προσαρμόσετε ένα έργο στις ανάγκες σας από την αρχή. Μπορείτε να επιλέξετε το Έκδοση Vue, αν χρειάζεται να χρησιμοποιήσετε δρομολόγηση. Typescript, προ-επεξεργαστές CSS ή να δημιουργήσετε έναν linter ακριβώς μπροστά. Επίσης, σας επιτρέπει να αποφασίσετε αν θέλετε να δημιουργήσετε δοκιμές (unit ή E2E).

Angular έρχεται με μια γεννήτρια που σας επιτρέπει να δημιουργήσετε συστατικά, υπηρεσίες, διεπαφές και οδηγίες απευθείας από την κονσόλα, κάτι που από την εμπειρία μου είναι πολύ βολικό, καθώς δεν χρειάζεται να δημιουργείτε χειροκίνητα φακέλους, αρχεία και περιττές κωδικός με το χέρι, ειδικά όταν χρησιμοποιείτε π.χ. το πρότυπο MVC. Η Typescript έρχεται από το κουτί με Angular και σας πιέζει να το χρησιμοποιήσετε. Αν δεν το έχετε κάνει ακόμα, εδώ είναι μια εύχρηστη εισαγωγή γιατί πρέπει να το δοκιμάσετε - μπορείτε να το ελέγξετε εδώ.

Στην αρχή, Το CLI του Angular σας ρωτάει μόνο για τη δρομολόγηση ή τους προτιμώμενους προεπεξεργαστές CSS, οι οποίοι, σε σύγκριση με τους Vue, δεν σας αφήνει πολλά περιθώρια για να αποφασίσετε σχετικά με τη δομή και το στυλ της εφαρμογής σας. Αλλά αν πρόκειται να ακολουθήσετε τη σύμβαση που σας ζητάει να χρησιμοποιήσετε, το CLI θα σας οδηγήσει σε όλη τη διαδρομή.

Δομή του έργου

Vue χρησιμοποιεί SFC (Single File Components), γεγονός που καθιστά αρκετά απλό για έναν νέο προγραμματιστή να ξεκινήσει να χρησιμοποιεί ένα πλαίσιο και να βρει τα πατήματά του στον κώδικα.

Οδηγίες

Vue έρχεται επίσης από το κουτί με οδηγίες όπως `v-if, v-for`, η οποία είναι πολύ διαισθητική στη χρήση, καθώς είναι σχεδόν ένα αντίγραφο της οδηγίας Angular αυτά. Vue χρησιμοποιεί την ίδια σύμβαση για αμφίδρομη δέσμευση δεδομένων (απλά προτάσσοντας με, π.χ., v- στο `v-model`) και προσθέτοντας το @/v-on που υποδεικνύει ότι αντιδρούμε σε κάτι. Angular το διαχωρίζει αυτό υποδεικνύοντας προς τα πού πηγαίνουμε χρησιμοποιώντας παρενθέσεις για τη δέσμευση συμβάντων και αγκύλες για τη δέσμευση ιδιοτήτων, δηλαδή ,`(αλλαγή), [ngStyle], [(ngModel)]`.

Στο Vue, η ίδια η δομή είναι απλή, δεν υπάρχει ανάγκη να δημιουργηθούν ξεχωριστά αρχεία για φύλλα στυλ και λογική, έτσι ώστε να είναι όλα οργανωμένα και προσιτά. Φυσικά, Vue συνοδεύεται από έναν οδηγό στυλ όπου μπορείτε να βρείτε τους συνιστώμενους κανόνες που πρέπει να ακολουθείτε κατά τη δημιουργία ενός έργου- ωστόσο, υπάρχουν μόνο λίγοι που είναι υποχρεωτικοί. 

Εκδηλώσεις

Σε αυτή την περίπτωση, Vue έρχεται και πάλι με μια πιο εύχρηστη λύση- δηλαδή, για να εκπέμψετε ένα συμβάν από το στοιχείο-παιδί προς το γονέα του, το μόνο που χρειάζεται να κάνετε είναι (χρησιμοποιώντας το Vue 3 Σύνθεση API ) παίρνετε μια μέθοδο από το αντικείμενο context στη ρύθμιση και απλά εκπέμπετε ό,τι χρειάζεστε εκείνη τη στιγμή:

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); } }

Μπορείτε επίσης να το κάνετε απευθείας στο πρότυπο ως απόκριση σε κάποιο άλλο συμβάν.

Στο Angular, θα πρέπει πρώτα να ορίσετε έναν EventEmitter ως εξής:

@Output() customNameForYourEmitter = new EventEmitter(),

Στη συνέχεια, πρέπει να καλέσετε μια μέθοδο emit στον EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass),

Προβολή υποδοχών/περιεχομένου

Και στα δύο πλαίσια, μπορείτε εύκολα να μετακινήσετε το περιεχόμενο (τόσο απλό όσο και πολλαπλό) από το γονικό στοιχείο στο παιδί του απλά προσθέτοντας πρόσθετη html μέσα στις ετικέτες του παιδιού, με μικρές διαφορές:

Vue:

`<` 

Angular:

Προεπιλογή:
    

Ονομασμένη υποδοχή:

<p yourname>
   Πρόκειται για μια ονομαστική υποδοχή
  </p>
  <p>Αυτή είναι μια προεπιλεγμένη υποδοχή</p>

Ωστόσο, αν θέλετε να αποδώσετε υπό όρους ορισμένα τμήματα της εφαρμογής σας, Vue είναι πιο διαισθητικό από το Angular και σας επιτρέπει να το κάνετε πιο γρήγορα προσθέτοντας το v-if στην οδηγία ετικέτα, η οποία σας επιτρέπει να αποδώσετε μόνο τα τμήματα που χρειάζονται αυτή τη στιγμή.

Ενώ η ng-content αποδίδεται πάντα, θα πρέπει να χρησιμοποιήσετε σε αυτή την περίπτωση το ng-template, και αργότερα να δημιουργήσετε τη δική σας προσαρμοσμένη οδηγία:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

@Directive({
  selector: '[customDirectiveName]'
})
export class CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

και εξαιτίας του ονόματος που δίνετε στο ng-template χαρακτηριστικό, το Angular θα γνωρίζει τι πρέπει να αποδοθεί:

Επίσης, μέσα στο συστατικό, θέλετε να προβάλλετε το πρότυπό σας που θα χρησιμοποιηθεί στο @ContentChild για να λάβετε το κατάλληλο πρότυπο:

@ContentChild(CustomDirective) content!: CustomDirective,

Υπηρεσία vs κατάστημα

Angular στον πυρήνα του σας ενθαρρύνει να χρησιμοποιήσετε το πρότυπο σχεδίασης MVC, όπου μπορείτε να χρησιμοποιήσετε υπηρεσίες για το μοντέλο. Εξαιτίας αυτού, πρέπει να μάθετε το πρότυπο dependency injection για να λειτουργείτε ελεύθερα τα δεδομένα στην εφαρμογή σας. Σας επιτρέπει να διαχωρίζετε τις πλευρικές επιδράσεις των κλήσεων σας, δηλαδή τις κλήσεις API, και να χρησιμοποιείτε την ίδια λογική σε ολόκληρο το έργο εγχέοντας τα μέρη που χρειάζεστε τη δεδομένη στιγμή, γεγονός που το καθιστά επίσης μια αρθρωτή προσέγγιση.

Angular έρχεται επίσης με το πλαίσιο Ngrx/store που βασίζεται στο πρότυπο Redux σε περίπτωση που θέλετε να χρησιμοποιήσετε μια πιο αντιδραστική προσέγγιση με τα παρατηρητήρια RxJs. Έρχεται με Actions που χρησιμοποιούνται για την αποστολή μοναδικών συμβάντων από συστατικά ή/και υπηρεσίες, Effects που χειρίζονται side effects ή ασύγχρονες ενέργειες που θέλετε να εκτελέσετε και Reducers που μεταλλάσσουν την κατάστασή σας.

Στο Vue, η δημοφιλής προσέγγιση είναι η χρήση της βιβλιοθήκης Vuex για τη διαχείριση της κατάστασης, η οποία διαθέτει επίσης εργαλεία όπως Actions, Mutations και Getters, όπως ακριβώς και η Ngrx/store, για να σας βοηθήσει να διαχειριστείτε και να οργανώσετε την κατάσταση της εφαρμογής σας. Μπορείτε να το κάνετε σπονδυλωτό, ορίζοντας διαφορετικά καταστήματα για τις προβολές σας, π.χ. ένα κατάστημα χρήστη ή ένα κατάστημα καλαθιού, αλλά αυτό μπορεί να οδηγήσει σε προβλήματα διαχωρισμού ονομάτων, εκτός αν χρησιμοποιήσετε το namespaced: true στη δήλωση του καταστήματός σας.

Ακολουθεί μια σύγκριση της προσέγγισης που βασίζεται στις υπηρεσίες και της προσέγγισης Vuex, όταν η αποστολή είναι να αντλήσει κάποια προϊόν δεδομένα για το κατάστημά σας:

@Injectable() // decorator για να δείξουμε ότι θέλουμε να το χρησιμοποιήσουμε στο DI αργότερα
export class ProductsService {
  private products: Product[] = [],

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //κάνετε ό,τι θέλετε με τα προϊόντα σας
    });
    return this.products,
  }
}

Στη συνέχεια, στο συστατικό, εισάγουμε την υπηρεσία μας που θα χρησιμοποιηθεί:
constructor(private service: HeroService) { }

Στο Vue, απλά αποστέλλουμε μια ενέργεια που πραγματοποιεί μια κλήση στο backend για εμάς:

store.dispatch(getAllProducts)

και στο actions.ts ορίζουμε μια ενέργεια:

ενέργειες: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();)); // fetch data and put the results in the store
}}

Λήψη δεδομένων

Με Vue, μπορείτε να χρησιμοποιήσετε την Axios/Fetch ή οποιαδήποτε άλλη βιβλιοθήκη θέλετε να χρησιμοποιήσετε, είναι πραγματικά απλό - απλά χειρίζεστε ασύγχρονες κλήσεις με υποσχέσεις ή οποιαδήποτε προσέγγιση σας ταιριάζει καλύτερα.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('do whatever is needed'))
} catch (e) {
    //handle error
}

Angular συνοδεύεται από τη βιβλιοθήκη HttpClient που χρησιμοποιεί observables και σας οδηγεί σε ένα άλλο πλεονέκτημα - για να τη χρησιμοποιήσετε σωστά ή/και να χειριστείτε δεδομένα, πρέπει να μάθετε RxJs. Και πάλι, μπορεί να είναι αρκετά συντριπτικό να αποκτήσετε ευχέρεια και να αισθανθείτε εξοικειωμένοι με αυτή την αφηρημένη κατασκευή στην αρχή.

Μπορείτε να χρησιμοποιήσετε το Axios αν αυτό θέλετε να κάνετε, αλλά όπως λέει η σελίδα του Axios στο GitHub: "Το Axios είναι σε μεγάλο βαθμό εμπνευσμένο από την υπηρεσία $http που παρέχεται στο Angular'

private getAllItems(): void {
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('results'),
tap(console.log('do whatever side effect you want to use here')
catchError((error) => {
        //χειρισμός σφάλματος
})
)
.subscribe((result: ResultType[])
    //τελική λειτουργία στο δεδομένο αποτέλεσμα
)
}

Συνοψίζοντας

| Vue | Angular |
| ———– | ———– |
| Δεν σας ωθεί να ακολουθήσετε πολύ αυστηρούς κανόνες | Απαιτεί τη χρήση Typescript, συστατικών/υπηρεσιών βασισμένων σε κλάσεις |
| Επίπεδη καμπύλη εκμάθησης, εύκολο ξεκίνημα | Υψηλή καμπύλη εκμάθησης (Typescript, RxJs, Dependency Injection) |
| Πολλά πράγματα που πρέπει να ρυθμίσετε κατά τη διάρκεια της εγκατάστασης του έργου | Δεν υπάρχουν πολλά που πρέπει να ρυθμίσετε εκ των προτέρων, αλλά σας επιτρέπει να δημιουργήσετε τη δομή του έργου μέσω της κονσόλας |
| Πλαίσιο με γνώμονα την κοινότητα που βασίζεται τόσο στο Angular όσο και στο React | Δημιουργήθηκε και συντηρείται από την Google |
| Δεν περιλαμβάνονται πολλά, πρέπει να εγκαταστήσετε εξωτερικές βιβλιοθήκες| Διαχείριση κατάστασης, HttpClient που περιλαμβάνονται στο πλαίσιο |

Διαβάστε περισσότερα:

Το JavaScript είναι εντελώς νεκρό. Κάποιος τύπος στο Διαδίκτυο

Ανάπτυξη GraphQL/MongoDB API χρησιμοποιώντας λειτουργίες Netlify Functions

Πώς να σκοτώσετε ένα έργο με κακές πρακτικές κωδικοποίησης