Γωνιακό εναντίον αντιδράσεων εναντίον Vue - Σύγκριση

Η απόφαση για ένα πλαίσιο JavaScript για την εφαρμογή σας στο διαδίκτυο μπορεί να είναι συντριπτική. Τα γωνιακά και τα αντιδραστήρια είναι πολύ δημοφιλή αυτές τις μέρες, και υπάρχει μια εκκίνηση η οποία έχει πάρει πολλή έλξη πρόσφατα: VueJS. Επιπλέον, αυτά είναι μόνο μερικά από τα νέα παιδιά στο μπλοκ.

Javascripts το 2017 - τα πράγματα δεν είναι εύκολο αυτές τις μέρες!

Λοιπόν, πώς πρέπει να αποφασίσουμε;

Πριν ξεκινήσουμε - SPA ή όχι;

Θα πρέπει πρώτα να κάνετε σαφή απόφαση σχετικά με το αν χρειάζεστε μια εφαρμογή μιας σελίδας (SPA) ή αν προτιμάτε να έχετε μια προσέγγιση πολλαπλών σελίδων.

Οι εκκινητές σήμερα: γωνιακό, React και Vue

Πρώτον, θα θέλαμε να συζητήσουμε τον κύκλο ζωής και τις στρατηγικές εκτιμήσεις. Στη συνέχεια, θα προχωρήσουμε στα χαρακτηριστικά και τις έννοιες των τριών πλαισίων javascript. Τέλος, θα καταλήξουμε σε ένα συμπέρασμα.

Ακολουθούν οι ερωτήσεις που θα εξετάσουμε σήμερα:

  • Πόσο ώριμα είναι τα πλαίσια / βιβλιοθήκες;
  • Είναι πιθανόν τα πλαίσια να είναι γύρω για λίγο;
  • Πόσο εκτεταμένες και χρήσιμες είναι οι αντίστοιχες κοινότητες;
  • Πόσο εύκολο είναι να βρεις προγραμματιστές για καθένα από τα πλαίσια;
  • Ποιες είναι οι βασικές έννοιες προγραμματισμού των πλαισίων;
  • Πόσο εύκολο είναι να χρησιμοποιείτε τα πλαίσια για μικρές ή μεγάλες εφαρμογές;
  • Ποια είναι η καμπύλη μάθησης για κάθε πλαίσιο;
  • Τι είδους απόδοση μπορείτε να περιμένετε από τα πλαίσια;
  • Πού μπορείτε να έχετε μια πιο προσεκτική εμφάνιση κάτω από την κουκούλα;
  • Πώς μπορείτε να αρχίσετε να αναπτύσσεστε με το επιλεγμένο πλαίσιο;

1. Κύκλος ζωής & στρατηγικές εκτιμήσεις

1.1 Κάποια ιστορία

Το Angular είναι ένα πλαίσιο Javascript που βασίζεται στο TypeScript. Αναπτύχθηκε και συντηρείται από την Google, περιγράφεται ως "Superheroic JavaScript MVWFramework". Γωνιακός (επίσης "Γωνιακός 2+", "Γωνιακός 2" ή "ng2") είναι ο ξαναγραφόμενος, ως επί το πλείστον ασύμβατος διάδοχος του AngularJS (επίσης "Angular.js" ή "AngularJS 1.x"). Το νέο Angular (sans JS) εισήχθη το Σεπτέμβριο του 2016 ως έκδοση 2. Η νέα μεγαλύτερη κυκλοφορία είναι η έκδοση 4, καθώς η έκδοση του AngularJS (η παλιά) κυκλοφόρησε αρχικά τον Οκτώβριο του 2010, η έκδοση 3 παρακάμπτεται. Το γωνιακό χρησιμοποιείται από το Google, το Wix, το weather.com, το healthcare.gov και το Forbes (σύμφωνα με το makewithangular, stackshare και libscore.com).

Το React περιγράφεται ως "βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη". Αρχικά κυκλοφόρησε το Μάρτιο του 2013, το React αναπτύχθηκε και συντηρείται από το Facebook, το οποίο χρησιμοποιεί στοιχεία React σε αρκετές σελίδες (όχι ως μία μόνο σελίδα). Σύμφωνα με αυτό το άρθρο του Chris Cordle, το React χρησιμοποιείται πολύ περισσότερο στο Facebook από ότι το Angular είναι στο Google. Το React χρησιμοποιείται επίσης από τις Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart και άλλοι (σύμφωνα με το Facebook, stackshare και libscore.com).

Το Facebook εργάζεται για την απελευθέρωση του React Fiber. Θα αλλάξει το React κάτω από την κουκούλα - η απόδοση θα πρέπει να είναι πολύ ταχύτερη ως αποτέλεσμα - αλλά τα πράγματα θα είναι συμβατά προς τα πίσω μετά τις αλλαγές. Το Facebook μίλησε για τις αλλαγές στη διάσκεψη προγραμματιστών τον Απρίλιο του 2017 και απελευθερώθηκε ένα ανεπίσημο άρθρο σχετικά με τη νέα αρχιτεκτονική. Αντιδράστε ότι το Fiber απελευθερώθηκε με το React 16 τον Σεπτέμβριο του 2017.

Το Vue είναι ένα από τα πιο ραγδαία αναπτυσσόμενα πλαίσια JS το 2016. Το Vue περιγράφει τον εαυτό του ως ένα "διαισθητικό, γρήγορο και εύχρηστο MVVM για την οικοδόμηση διαδραστικών διεπαφών". Το πρώτο κυκλοφόρησε τον Φεβρουάριο του 2014 από τον πρώην υπάλληλο της Google Evan You (BTW: Evan έγραψε μια ενδιαφέρουσα αναρτήση blog σχετικά με τις δραστηριότητες μάρκετινγκ και τους αριθμούς στην πρώτη εβδομάδα εκείνη τότε). Ήταν μια μεγάλη επιτυχία, δεδομένου μάλιστα ότι ο Vue παίρνει τόσο πολλή έλξη ως show ενός άνδρα χωρίς την υποστήριξη μιας μεγάλης εταιρείας. Ο Evan έχει αυτήν την περίοδο μια ομάδα από δεκάδες βασικούς προγραμματιστές. Το 2016 κυκλοφόρησε η έκδοση 2. Το Vue χρησιμοποιείται από Alibaba, Baidu, Expedia, Nintendo, GitLab - μια λίστα μικρότερων έργων μπορεί να βρεθεί στο madewithvuejs.com.

Και τα τρία πλαίσια είναι διαθέσιμα βάσει της άδειας MIT.

Ανταποκρινόταν αποστέλλεται με ειδικό αρχείο άδειας BSD3 έως τον Σεπτέμβριο του 2017. Υπήρξαν πολλές συζητήσεις σχετικά με το αρχείο διπλωμάτων ευρεσιτεχνίας. Εάν ενδιαφέρεστε για την ιστορία αυτού του γεγονότος, μπορείτε να διαβάσετε αυτήν τη συζήτηση σχετικά με το ζήτημα του Github, τους λόγους και την ιστορία πίσω από το αρχείο ευρεσιτεχνιών (από τον μηχανικό του Ex-Facebook James Ide), γιατί δεν πρέπει να φοβόμαστε (από τον Dennis Walsh) προειδοποίηση κατά της χρήσης για τις νεοσύστατες επιχειρήσεις (από τον Raúl Kripalani) και μια προηγούμενη δήλωση από το Facebook σχετικά με αυτό το θέμα: Επεξήγηση της άδειας του React. Τέλος πάντων - όλα δεν πρέπει να έχουν σημασία πια όπως το Facebook ανακοίνωσε τελικά, ότι React θα πάρει την άδεια MIT.

1.2 Βασική ανάπτυξη

Όπως προαναφέρθηκε, το Angular and React υποστηρίζεται και χρησιμοποιείται από μεγάλες εταιρείες. Το Facebook, το Instagram και το Whatsapp το χρησιμοποιούν για τις σελίδες τους. Η Google το χρησιμοποιεί σε πολλά έργα: για παράδειγμα, το νέο Adwords UI εφαρμόστηκε χρησιμοποιώντας το γωνιακό & Dart. Και πάλι, η Vue πραγματοποιείται από μια ομάδα ατόμων των οποίων η εργασία υποστηρίζεται μέσω του Patreon και άλλων μέσων χορηγίας. Μπορείτε να αποφασίσετε μόνοι σας εάν αυτό είναι θετικό ή αρνητικό. Ο Matthias Götzke πιστεύει ότι η μικρή ομάδα της Vue είναι ένα πλεονέκτημα επειδή οδηγεί σε καθαρότερο και λιγότερο υπερ-μηχανισμένο κώδικα / API.

Ας ρίξουμε μια ματιά σε μερικά στατιστικά στοιχεία: Οι γωνιακοί κατάλογοι 36 άτομα στη σελίδα της ομάδας τους, ο Vue απαριθμεί 16 άτομα και η React δεν έχει ομάδα. Σχετικά με το Github, το Angular έχει> 25.000 αστέρια και 463 συνεισφέροντες, η React έχει> 70.000 αστέρια και> 1.000 συνεισφέροντες και η Vue έχει σχεδόν 60.000 αστέρια και μόνο 120 συνεισφέροντες. Μπορείτε επίσης να ελέγξετε το ιστορικό Github Stars για το γωνιακό, το React και το Vue. Για άλλη μια φορά, η Vue φαίνεται να τείνει πολύ καλά. Σύμφωνα με το bestof.js, κατά τους τελευταίους τρεις μήνες το Angular 2 έχει πάρει κατά μέσο όρο 31 αστέρια ανά ημέρα, React 74 αστέρια και Vue.JS 107 αστέρια.

Μια ιστορία Github Stars για γωνιακή, React & Vue (πηγή)

Ενημέρωση: Χάρη στον Paul Henschel για την επισήμανση των τάσεων npm. Δείχνουν τον αριθμό των λήψεων για τα συγκεκριμένα πακέτα npm και είναι ακόμη πιο χρήσιμα ως μια καθαρή ματιά στα αστέρια του Github:

Οι αριθμοί λήψης npm για τα δεδομένα πακέτα npm τα τελευταία 2 χρόνια.

1.3 Κύκλος ζωής της αγοράς

Είναι δύσκολο να συγκρίνουμε τις Γωνίες, τις Αντιδράσεις και την Vue στις Τάσεις Google λόγω των διαφόρων ονομάτων και εκδόσεων. Ένας τρόπος προσέγγισης θα μπορούσε να είναι η αναζήτηση στην κατηγορία "Διαδίκτυο και τεχνολογίες". Εδώ είναι το αποτέλεσμα:

Ω καλά. Το Vue δεν δημιουργήθηκε πριν από το 2014 - οπότε κάτι είναι κακό εδώ. Το La Vue είναι γαλλικό για "θέα", "θέαμα" ή "γνώμη". Ίσως είναι αυτό. Η σύγκριση των "VueJS" και "Γωνιακών" ή "React" δεν είναι δίκαιη, καθώς η VueJS έχει σχεδόν καθόλου αποτελέσματα σε σύγκριση με τα υπόλοιπα.

Ας δοκιμάσουμε κάτι άλλο, λοιπόν. Το τεχνολογικό ραντάρ της ThoughtWorks δίνει μια καλή εντύπωση για το πώς εξελίσσονται οι τεχνολογίες με την πάροδο του χρόνου. Το Redux βρίσκεται στο στάδιο της υιοθέτησης (που πρόκειται να υιοθετηθεί σε έργα!), Και ήταν ανεκτίμητο σε πολλά έργα ThoughtWorks. Το Vue.js βρίσκεται στο δοκιμαστικό στάδιο (δοκιμάστε το!). Περιγράφεται ως ελαφριά και ευέλικτη εναλλακτική λύση για το γωνιακό με χαμηλότερη καμπύλη εκμάθησης. Το γωνιακό 2 βρίσκεται στο στάδιο της αξιολόγησης - χρησιμοποιείται επιτυχώς από τις ομάδες ThoughtWork, αλλά όχι μια ισχυρή σύσταση ακόμα.

Σύμφωνα με την τελευταία έρευνα Stackoverflow 2017, το React αγαπά το 67% των ερωτηθέντων προγραμματιστών και το AngularJS κατά 52%. "Δεν υπάρχει ενδιαφέρον για περαιτέρω ανάπτυξη" καταγράφει υψηλότερους αριθμούς για το AngularJS (48%) έναντι του React (33%). Το Vue δεν βρίσκεται στο Top 10 σε καμία περίπτωση. Στη συνέχεια, υπάρχει η έρευνα του statejs.com που συγκρίνει τα "πλαίσια front-end". Τα πιο ενδιαφέροντα γεγονότα: η React και η γωνιακή έχουν 100% ευαισθητοποίηση και το Vue είναι άγνωστο στο 23% των ερωτηθέντων. Όσον αφορά την ικανοποίηση, η React σημείωσε 92% για "θα χρησιμοποιήσει πάλι", Vue 89% και γωνιακή 2 μόνο 65%.

Τι γίνεται με μια άλλη έρευνα ικανοποίησης πελατών; Ο Eric Elliott ξεκίνησε τον Οκτώβριο του 2016 για να αξιολογήσει το Angular 2 and React. Μόνο το 38% των ερωτηθέντων θα χρησιμοποιήσει πάλι το Angular 2, ενώ το 84% θα χρησιμοποιήσει το React ξανά.

1.4 Μακροπρόθεσμη υποστήριξη και μεταναστεύσεις

Οι αντιδράσεις APIs είναι αρκετά σταθερές, καθώς το Facebook δηλώνει στις αρχές σχεδιασμού τους. Υπάρχουν επίσης ορισμένα σενάρια για να σας βοηθήσουμε να μετακινηθείτε από το τρέχον API σας σε ένα νεότερο: ανατρέξτε στην απάντηση-codemod. Οι μεταναστεύσεις είναι αρκετά εύκολες και δεν υπάρχει τέτοιο πράγμα (που χρειάζεται) ως έκδοση μακροχρόνιας υποστήριξης. Σε αυτήν την ανάρτηση Reddit, οι άνθρωποι σημειώνουν ότι οι αναβαθμίσεις δεν ήταν ποτέ πραγματικά πρόβλημα. Η ομάδα της React έγραψε μια δημοσίευση στο blog σχετικά με το πρόγραμμά της για την έκδοση. Όταν προσθέτουν μια προειδοποίηση απόρριψης, την κρατούν για την υπόλοιπη έκδοση της τρέχουσας έκδοσης πριν αλλάξει η συμπεριφορά στην επόμενη μεγάλη έκδοση. Δεν υπάρχει προγραμματισμένη αλλαγή σε μια νέα σημαντική έκδοση - το v14 κυκλοφόρησε τον Οκτώβριο του 2015, το v15 δημοσιεύθηκε τον Απρίλιο του 2016 και το v16 δεν έχει ακόμη ημερομηνία κυκλοφορίας. Η αναβάθμιση δεν θα πρέπει να αποτελεί πρόβλημα, όπως σημειώθηκε πρόσφατα από τον υπεύθυνο ανάπτυξης του React.

Όσον αφορά το γωνιακό, υπάρχει μια δημοσίευση στο blog σχετικά με την έκδοση και την απελευθέρωση του Angular ξεκινώντας με την έκδοση v2. Θα υπάρξει μία σημαντική ενημέρωση κάθε έξι μήνες και θα υπάρξει περίοδος απόσβεσης τουλάχιστον έξι μηνών (δύο σημαντικές εκδόσεις). Υπάρχουν ορισμένα πειραματικά API που σημειώνονται στην τεκμηρίωση με μικρότερες περιόδους απόσπασης. Δεν υπάρχει ακόμη επίσημη ανακοίνωση, αλλά σύμφωνα με αυτό το άρθρο, η γωνιακή ομάδα έχει ανακοινώσει εκδόσεις μακροχρόνιας υποστήριξης ξεκινώντας από το Angular 4. Αυτές θα υποστηρίζονται για τουλάχιστον ένα χρόνο πέρα ​​από την επόμενη έκδοση μεγάλης έκδοσης. Αυτό σημαίνει ότι το Angular 4 θα υποστηρίζεται μέχρι τουλάχιστον τον Σεπτέμβριο του 2018 με διορθώσεις σφαλμάτων και σημαντικές επιδιορθώσεις. Στις περισσότερες περιπτώσεις, η ενημέρωση της γωνίας από v2 σε v4 είναι τόσο εύκολη όσο η ενημέρωση των γωνιακών εξαρτήσεων. Το Angular προσφέρει επίσης έναν οδηγό με πληροφορίες σχετικά με το εάν χρειάζονται περαιτέρω αλλαγές.

Η διαδικασία ενημέρωσης για Vue 1.x έως 2.0 θα πρέπει να είναι εύκολη για μια μικρή εφαρμογή - η ομάδα προγραμματιστών έχει ισχυριστεί ότι το 90% των APIs παρέμεινε το ίδιο. Υπάρχει ένα ωραίο βοηθητικό εργαλείο μετανάστευσης-βοήθειας για την αναβάθμιση που εργάζεται στην κονσόλα. Ένας προγραμματιστής σημείωσε ότι η ενημέρωση από v1 σε v2 δεν ήταν ακόμα διασκεδαστική σε μια μεγάλη εφαρμογή. Δυστυχώς, δεν υπάρχει σαφής (δημόσιος) οδικός χάρτης για την επόμενη μεγάλη έκδοση ή πληροφορίες σχετικά με σχέδια για εκδόσεις LTS.

Ένα ακόμα πράγμα: Το Angular είναι ένα πλήρες πλαίσιο και προσφέρει πολλά πράγματα που συνδυάζονται μαζί. Το React είναι πιο ευέλικτο από το γωνιακό, και πιθανότατα θα τελειώσετε χρησιμοποιώντας πιο ανεξάρτητες, αναξιοποίητες και ταχέως μεταβαλλόμενες βιβλιοθήκες - αυτό σημαίνει ότι πρέπει να φροντίσετε μόνοι σας τις αντίστοιχες ενημερώσεις και τις μετακινήσεις. Θα μπορούσε επίσης να αποβεί σε ζημία εάν ορισμένες συσκευασίες δεν διατηρούνται πλέον ή κάποια άλλη συσκευασία καθίσταται το de facto πρότυπο σε κάποιο σημείο.

1.5 Ανθρώπινοι πόροι και προσλήψεις

Αν έχετε εσωτερικούς προγραμματιστές HTML που δεν θέλουν να μάθουν περισσότερα Javascript, προτιμάτε καλύτερα να επιλέγετε Angular ή Vue. Η αντίδραση συνεπάγεται περισσότερη Javascript (μιλάμε για αυτό αργότερα).

Έχετε σχεδιαστές που εργάζονται κοντά στον κώδικα; Ο χρήστης "pier25" σημειώνει στο Reddit ότι το React έχει νόημα αν εργάζεστε για το Facebook, όπου όλοι είναι υπερήρωες προγραμματιστές. Στον πραγματικό κόσμο, δεν θα βρείτε πάντα έναν σχεδιαστή που μπορεί να τροποποιήσει το JSX - ως εκ τούτου, η εργασία με τα πρότυπα HTML θα είναι πολύ πιο εύκολη.

Το καλό για το Γωνιακό πλαίσιο είναι ότι ένας νέος προγραμματιστής της γωνίας 2 από μια άλλη εταιρεία θα εξοικειωθεί γρήγορα με όλες τις απαιτούμενες συμβάσεις. Τα έργα React είναι διαφορετικά από την άποψη των αρχιτεκτονικών αποφάσεων και οι προγραμματιστές πρέπει να εξοικειωθούν με τη συγκεκριμένη οργάνωση του έργου.

Το γωνιακό είναι επίσης καλό αν έχετε προγραμματιστές με φόντο το αντικείμενο ή που δεν σας αρέσει το Javascript. Για να οδηγήσετε αυτό το σημείο στο σπίτι, εδώ είναι ένα απόσπασμα από τον Mahesh Chand:

Δεν είμαι προγραμματιστής JavaScript. Το υπόβαθρό μου είναι η οικοδόμηση συστημάτων μεγάλης κλίμακας που χρησιμοποιούν «πραγματικές» πλατφόρμες λογισμικού. Ξεκίνησα το 1997 να κτίζω εφαρμογές χρησιμοποιώντας C, C ++, Pascal, Ada και Fortran. (...) Μπορώ να πω σαφώς ότι το JavaScript είναι απλώς ακατανόητο για μένα. Όντας Microsoft MVP και ειδικός, έχω καλή κατανόηση του TypeScript. Επίσης, δεν βλέπω το Facebook ως εταιρεία ανάπτυξης λογισμικού. Ωστόσο, η Google και η Microsoft είναι ήδη οι μεγαλύτεροι πρωτοπόροι λογισμικού. Αισθάνομαι πιο άνετα να δουλεύω με ένα προϊόν που έχει ισχυρή υποστήριξη από την Google και τη Microsoft. Επίσης (...) με το φόντο μου, γνωρίζω ότι η Microsoft έχει ακόμη μεγαλύτερα σχέδια για το TypeScript.

Λοιπόν, τότε ... Θα έπρεπε ίσως να αναφέρω ότι ο Mahesh είναι περιφερειακός διευθυντής της Microsoft.

2. Σύγκριση του React, γωνιακού & Vue

2.1 Εξαρτήματα

Τα εν λόγω πλαίσια είναι όλα βασισμένα σε στοιχεία. Ένα στοιχείο παίρνει μια είσοδο και μετά από κάποια εσωτερική συμπεριφορά / υπολογισμό, επιστρέφει ως έξοδο ένα προτυποποιημένο πρότυπο UI (μια περιοχή σύνδεσης / αποσύνδεσης ή ένα στοιχείο λίστας υποχρεώσεων). Τα καθορισμένα στοιχεία θα πρέπει να επαναχρησιμοποιούνται εύκολα στην ιστοσελίδα ή σε άλλα στοιχεία. Για παράδειγμα, θα μπορούσατε να διαθέτετε ένα στοιχείο πλέγματος (αποτελούμενο από ένα συστατικό κεφαλίδας και πολλά εξαρτήματα γραμμής) με διάφορες ιδιότητες (στήλες, πληροφορίες κεφαλίδας, σειρές δεδομένων κ.λπ.) και να μπορείτε να επαναχρησιμοποιήσετε το στοιχείο με διαφορετικά σύνολα δεδομένων σε άλλη σελίδα. Εδώ είναι ένα περιεκτικό άρθρο σχετικά με τα εξαρτήματα, σε περίπτωση που θέλετε να μάθετε περισσότερα σχετικά με αυτό.

Το React και το Vue υπερέχουν τόσο στον χειρισμό των χαμένων στοιχείων: μικρές λειτουργίες χωρίς κατάσταση, οι οποίες λαμβάνουν στοιχεία εισόδου και απόδοσης ως έξοδο.

2.2 Typescript εναντίον ES6 έναντι ES5

Το React εστιάζει στη χρήση του Javascript ES6. Το Vue χρησιμοποιεί Javascript ES5 ή ES6.

Ο γωνιακός βασίζεται στο TypeScript. Αυτό προσφέρει μεγαλύτερη συνοχή σε συναφή παραδείγματα και έργα ανοιχτού κώδικα (Παραδείγματα αντιδράσεων μπορούν να βρεθούν είτε σε ES5 είτε ES6). Αυτό εισάγει επίσης έννοιες όπως διακοσμητές και στατικούς τύπους. Οι στατικοί τύποι είναι χρήσιμοι για τα εργαλεία κώδικα, όπως ο αυτόματος επαναπροσδιορισμός, τα άλματα στους ορισμούς κ.λπ., αλλά υποτίθεται ότι μειώνουν τον αριθμό των σφαλμάτων μιας εφαρμογής, αν και σίγουρα δεν υπάρχει συναίνεση για αυτό το θέμα. Ο Eric Elliott διαφωνεί στο άρθρο του "Το συγκλονιστικό μυστικό για τους στατικούς τύπους". Ο Daniel C Wang λέει ότι το κόστος χρήσης των στατικών τύπων δεν προκαλεί κακό και ότι είναι καλό να έχουμε τόσο TDD όσο και στατική πληκτρολόγηση.

Θα πρέπει επίσης να γνωρίζετε ότι μπορείτε να χρησιμοποιήσετε το Flow για να ενεργοποιήσετε τον έλεγχο τύπου μέσα στο React. Είναι ένας στατικός έλεγχος τύπου που αναπτύχθηκε από το Facebook για JavaScript. Η ροή μπορεί επίσης να ενσωματωθεί στο VueJS.

Εάν γράφετε τον κώδικα σας στο TypeScript, δεν γράφετε πλέον τυπικό JavaScript. Παρόλο που αυξάνεται, το TypeScript εξακολουθεί να έχει μια μικρή βάση χρηστών σε σύγκριση με αυτήν ολόκληρης της γλώσσας JavaScript. Ένας κίνδυνος μπορεί να είναι ότι κινείστε προς τη λάθος κατεύθυνση, επειδή το TypeScript μπορεί - όσο κι αν είναι απίθανο - να εξαφανιστεί με την πάροδο του χρόνου. Επιπλέον, το TypeScript προσθέτει πολλά (μάθησης) γενικά σε έργα - μπορείτε να διαβάσετε περισσότερα σχετικά με αυτό στη σύγκριση Angular 2 vs. React από τον Eric Elliott.

2.3 Πρότυπα - JSX ή HTML

Αντιδρά τα διαλείμματα με τις μακρόχρονες βέλτιστες πρακτικές. Για δεκαετίες, οι προγραμματιστές προσπαθούσαν να χωρίσουν τα πρότυπα UI και την ενσωματωμένη λογική Javascript, αλλά με το JSX, αυτά αναμειγνύονται ξανά. Αυτό μπορεί να ακούγεται φοβερό, αλλά πρέπει να ακούσετε τη συζήτηση του Peter Hunt "Αντιδράστε: Επανεξετάζοντας τις βέλτιστες πρακτικές" (από τον Οκτώβριο του 2013). Επισημαίνει ότι ο διαχωρισμός των προτύπων και της λογικής είναι απλώς ένας διαχωρισμός των τεχνολογιών και όχι των ανησυχιών. Θα πρέπει να δημιουργήσετε στοιχεία αντί για πρότυπα. Τα εξαρτήματα είναι επαναχρησιμοποιήσιμα, συμπαγή και μπορούν να ελεγχθούν από τη μονάδα.

Το JSX είναι ένας προαιρετικός προεπεξεργαστής για σύνταξη HTML που θα συνταχθεί αργότερα στη Javascript. Έχει κάποιες ιδιαιτερότητες - για παράδειγμα, πρέπει να χρησιμοποιήσετε className αντί class, επειδή το τελευταίο είναι ένα προστατευμένο όνομα στο Javascript. Το JSX είναι ένα μεγάλο πλεονέκτημα για την ανάπτυξη, επειδή έχετε τα πάντα σε ένα μέρος, και η ολοκλήρωση του κώδικα και οι έλεγχοι κατά τον χρόνο σύνταξης λειτουργούν καλύτερα. Όταν κάνετε ένα τυπογραφικό λάθος στο JSX, το React δεν θα μεταγλωττίσει και θα εκτυπώσει τον αριθμό της γραμμής όπου συνέβη το τυπογραφικό λάθος. Το γωνιακό 2 αποτυγχάνει ήσυχα στο χρόνο εκτέλεσης (αυτό το επιχείρημα είναι πιθανώς άκυρο αν χρησιμοποιείτε AOT με γωνιακή).

Το JSX υποδηλώνει ότι όλα στο React είναι Javascript - χρησιμοποιείται τόσο για τα πρότυπα JSX όσο και για τη λογική. Το Cory House επισημαίνει αυτό στο άρθρο του από τον Ιανουάριο του 2016: "Το γωνιακό 2 συνεχίζει να βάζει το JS σε HTML. Το React βάζει το "HTML" σε JS. ". Αυτό είναι ένα καλό πράγμα, επειδή το Javascript είναι πιο ισχυρό από το HTML.

Τα γωνιακά πρότυπα είναι ενισχυμένα HTML με ειδική γωνιακή γλώσσα (πράγματα όπως ngIf ή ngFor). Ενώ το React απαιτεί γνώσεις του JavaScript, η γωνιακή δύναμη σας υποχρεώνει να μάθετε τη σύνθετη γωνιακή σύνταξη.

Το Vue διαθέτει "στοιχεία ενός αρχείου". Αυτό μοιάζει με ένα εμπόδιο όσον αφορά τον διαχωρισμό των ανησυχιών - τα πρότυπα, τα σενάρια και τα στυλ είναι σε ένα φάκελο αλλά σε τρία διαφορετικά, διατεταγμένα τμήματα. Αυτό σημαίνει ότι παίρνετε επισημάνσεις σύνταξης, υποστήριξη CSS και ευκολότερη χρήση προεπεξεργαστών όπως Jade ή SCSS. Έχω διαβάσει σε άλλα άρθρα, ότι το JSX είναι ευκολότερο για τον εντοπισμό σφαλμάτων, διότι το Vue δεν θα παρουσιάσει κακά HTML σφάλματα σύνταξης. Αυτό δεν ισχύει επειδή το Vue μετατρέπει το HTML σε λειτουργίες rendering - έτσι τα σφάλματα εμφανίζονται χωρίς προβλήματα (Χάρη στον Vinicius Reis για σχολιασμό και διόρθωση!).

Πλευρική σημείωση: Αν σας αρέσει η ιδέα του JSX και θέλετε να το χρησιμοποιήσετε στο Vue, μπορείτε να χρησιμοποιήσετε το babel-plugin-transform-vue-jsx.

2.4 Πλαίσιο έναντι βιβλιοθήκης

Το Angular είναι ένα πλαίσιο και όχι μια βιβλιοθήκη, διότι παρέχει ισχυρές απόψεις για το πώς πρέπει να δομηθεί η αίτησή σας και έχει επίσης περισσότερη λειτουργικότητα εκτός πλαισίου. Το γωνιακό είναι μια "ολοκληρωμένη λύση" - οι μπαταρίες συμπεριλαμβάνονται και είναι έτοιμες να σας προσφέρουν μια ευχάριστη εκκίνηση. Δεν χρειάζεται να αναλύετε βιβλιοθήκες, λύσεις δρομολόγησης ή κάτι παρόμοιο - μπορείτε απλά να αρχίσετε να εργάζεστε.

Η React και η Vue, από την άλλη πλευρά, είναι γενικά ευέλικτες. Οι βιβλιοθήκες τους μπορούν να συνδυαστούν με όλα τα είδη πακέτων (υπάρχουν πολλά για το React on npm, αλλά ο Vue έχει λιγότερα πακέτα επειδή είναι ακόμα αρκετά νέος). Με το React μπορείτε να ανταλλάξετε την ίδια τη βιβλιοθήκη με εναλλακτικές λύσεις συμβατές με API, όπως το Inferno. Ωστόσο, με μεγάλη ευελιξία έρχεται μεγάλη ευθύνη - δεν υπάρχουν κανόνες και περιορισμένες οδηγίες με το React. Κάθε έργο απαιτεί μια απόφαση σχετικά με την αρχιτεκτονική του και τα πράγματα μπορούν να πάθουν λάθος πιο εύκολα.

Γωνιακό, από την άλλη πλευρά, έρχεται με μια συγκεχυμένη φωλιά κατασκευής εργαλείων, boilerplate, linters & time-νεροχύτες για την αντιμετώπιση. Αυτό ισχύει και για το React εάν χρησιμοποιούνται εκκινητήρια κιτ ή πινακίδες. Είναι φυσικά πολύ χρήσιμο, αλλά το React λειτουργεί από το κιβώτιο και αυτός είναι ίσως ο τρόπος με τον οποίο πρέπει να το μάθετε. Μερικές φορές η ποικιλία των εργαλείων που απαιτούνται για εργασία σε περιβάλλον Javascript αναφέρεται ως "κόπωση Javascript". Υπάρχει ένα άρθρο γι 'αυτό από τον Eric Clemmons, ο οποίος έχει να πει αυτό:

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

Το Vue φαίνεται να είναι το καθαρότερο και ελαφρύτερο από τα τρία πλαίσια. Το GitLab έχει μια ανάρτηση στο blog σχετικά με την απόφασή του σχετικά με το Vue.js (Οκτώβριος 2016):

Το Vue.js έρχεται με την τέλεια ισορροπία του τι θα κάνει για εσάς και τι πρέπει να κάνετε μόνοι σας. (...) Το Vue.js είναι πάντοτε στη διάθεσή σας, ένα εύρωστο αλλά ευέλικτο δίχτυ ασφαλείας έτοιμο να σας βοηθήσει να διατηρήσετε αποτελεσματικά τον προγραμματισμό σας τις δυσκολίες που προκαλεί το DOM σας στο ελάχιστο.

Τους αρέσει η απλότητα και η ευκολία χρήσης - ο πηγαίος κώδικας είναι πολύ αναγνώσιμος και δεν απαιτείται τεκμηρίωση ή εξωτερικές βιβλιοθήκες. Όλα είναι πολύ απλά. Το Vue.js "δεν κάνει μεγάλες υποθέσεις για πολλά από τα πάντα". Υπάρχει επίσης ένα podcast σχετικά με την απόφαση του GitLab.

Ένα άλλο blogpost σχετικά με μια στροφή προς Vue προέρχεται από Pixeljets. Ανταποκρινόταν ότι "ήταν ένα μεγάλο βήμα προς τα εμπρός για τον κόσμο της JS από την άποψη της ευαισθητοποίησης του κράτους και έδειξε στους πολλούς τον πραγματικό λειτουργικό προγραμματισμό με καλό και πρακτικό τρόπο". Ένα από τα μεγάλα μειονεκτήματα του React vs. Vue είναι το πρόβλημα του διαχωρισμού των εξαρτημάτων σε μικρότερα εξαρτήματα λόγω των περιορισμών JSX. Εδώ είναι ένα απόσπασμα του άρθρου:

Για μένα και την ομάδα μου η αναγνωσιμότητα του κώδικα είναι σημαντική, αλλά εξακολουθεί να είναι πολύ σημαντικό ο κώδικας γραφής να είναι διασκεδαστικός. Δεν είναι αστείο να δημιουργήσετε 6 συστατικά όταν εφαρμόζετε πραγματικά απλό γραφικό αριθμομηχανή. Σε πολλές περιπτώσεις, είναι επίσης κακό όσον αφορά τη συντήρηση, τις τροποποιήσεις ή την εφαρμογή οπτικής αναθεώρησης σε κάποιο widget, επειδή πρέπει να μεταβείτε σε πολλαπλά αρχεία / λειτουργίες και να ελέγξετε ξεχωριστά κάθε μικρό κομμάτι HTML. Και πάλι, δεν προτείνω να γράψω μονολιθικά - προτείνω να χρησιμοποιώ συστατικά αντί μικροστοιχείων για καθημερινή ανάπτυξη.

Υπάρχουν ενδιαφέρουσες συζητήσεις σχετικά με τη δημοσίευση του ιστολογίου στις ειδήσεις του Hacker και την Reddit - υπάρχουν επιχειρήματα από διαφωνούντες και άλλους υποστηρικτές της Vue.

2.5 Κρατική διαχείριση και δέσμευση δεδομένων

Οι οικοδομικές διεπαφές είναι δύσκολες, διότι υπάρχουν κράτη παντού - αλλάζοντας τα δεδομένα με την πάροδο του χρόνου συνεπάγεται πολυπλοκότητα. Οι καθορισμένες ροές εργασίας κατάστασης είναι μια μεγάλη βοήθεια όταν οι εφαρμογές μεγαλώνουν και γίνονται πιο περίπλοκες. Για περιορισμένες εφαρμογές, αυτό είναι πιθανώς υπερβολικό και κάτι σαν το Vanilla JS θα ήταν αρκετό.

Πώς λειτουργεί; Τα στοιχεία περιγράφουν το περιβάλλον χρήστη σε οποιαδήποτε χρονική στιγμή. Όταν τα δεδομένα αλλάζουν, το πλαίσιο επαναπροσδιορίζει ολόκληρο το εμφανιζόμενο στοιχείο του στοιχείου UI είναι πάντα ενημερωμένο. Μπορούμε να ονομάσουμε αυτή την έννοια "UI ως λειτουργία".

Το React συχνά συνεργάζεται με το Redux. Η Redux περιγράφεται σε τρεις βασικές αρχές:

  • Μοναδική πηγή αλήθειας
  • Το κράτος είναι μόνο για ανάγνωση
  • Οι αλλαγές γίνονται με καθαρές λειτουργίες

Με άλλα λόγια: η κατάσταση της πλήρους εφαρμογής αποθηκεύεται σε ένα δέντρο αντικειμένων μέσα σε ένα μόνο κατάστημα. Αυτό βοηθά με την αποσφαλμάτωση της εφαρμογής και ορισμένες λειτουργίες είναι ευκολότερες στην εφαρμογή. Η κατάσταση είναι μόνο για ανάγνωση και μπορεί να αλλάξει μόνο μέσω ενεργειών για να αποφευχθούν οι συνθήκες κούρσας (βοηθά επίσης στην απομάκρυνση των σφαλμάτων). Οι μειωτήρες γράφονται για να καθορίσουν τον τρόπο με τον οποίο οι καταστάσεις μπορούν να μετασχηματιστούν με δράσεις.

Τα περισσότερα από τα μαθήματα και τα boilerplates έχουν ήδη ενσωματωθεί στο Redux, αλλά μπορείτε να χρησιμοποιήσετε το React χωρίς αυτό (και ίσως να μην χρειαστείτε το Redux στο έργο σας καθόλου). Το Redux εισάγει πολυπλοκότητα και ισχυρούς περιορισμούς στον κώδικα σας. Εάν μαθαίνετε React, θα πρέπει να σκεφτείτε να μάθετε απλό React προτού προχωρήσετε στο Redux. Θα πρέπει σίγουρα να διαβάσετε "Ίσως να μην χρειάζεστε Redux" από τον Dan Abramov.

Μερικοί προγραμματιστές προτείνουν τη χρήση του Mobx αντί του Redux. Μπορείτε να το σκεφτείτε ως ένα "αυτόματο Redux", το οποίο κάνει τα πράγματα πολύ πιο εύκολο στη χρήση και κατανόηση από την αρχή. Αν θέλετε να ρίξετε μια ματιά, πρέπει να ξεκινήσετε με την εισαγωγή. Μπορείτε επίσης να διαβάσετε αυτή τη χρήσιμη σύγκριση μεταξύ του Redux & MobX από τον Robin. Ο ίδιος συγγραφέας παρέχει επίσης πληροφορίες σχετικά με τη μετάβαση από το Redux στο MobX. Αυτή η λίστα είναι χρήσιμη αν θέλετε να ελέγξετε άλλες βιβλιοθήκες Flux. Και αν έρχεστε από έναν κόσμο MVC, θα θελήσετε να διαβάσετε το άρθρο "Thinking in Redux (όταν το μόνο που γνωρίζετε είναι MVC)" από τον Mikhail Levkovsky.

Η Vue μπορεί να χρησιμοποιήσει το Redux - αλλά προσφέρει το Vuex ως τη δική του λύση.

Μια μεγάλη διαφορά μεταξύ του React και του γωνιακού είναι η μονόδρομη και αμφίδρομη δέσμευση. Η αμφίδρομη δέσμευση του Angular αλλάζει την κατάσταση του μοντέλου όταν ενημερώνεται το στοιχείο UI (π.χ. μία είσοδος χρήστη). Το React ενεργεί μόνο με έναν τρόπο: ενημερώνει πρώτα το μοντέλο και στη συνέχεια καθιστά το στοιχείο UI. Η μέθοδος της γωνίας είναι καθαρότερη στον κώδικα και είναι ευκολότερη για την υλοποίηση του έργου. Ο τρόπος του React έχει ως αποτέλεσμα μια καλύτερη επισκόπηση δεδομένων, επειδή τα δεδομένα ρέουν μόνο σε μία κατεύθυνση (αυτό καθιστά ευκολότερη την απομάκρυνση των σφαλμάτων).

Και οι δύο έννοιες έχουν πλεονεκτήματα και μειονεκτήματα. Πρέπει να κατανοήσετε τις έννοιες και να προσδιορίσετε εάν αυτό επηρεάζει την απόφαση-πλαίσιο σας. Το άρθρο "Δύο τρόποι σύνδεσης δεδομένων: Γωνιακή 2 και React" και αυτή η ερώτηση Stackoverflow προσφέρουν μια καλή εξήγηση. Εδώ μπορείτε να βρείτε μερικά παραδείγματα αλληλεπιδραστικών κωδικών (ηλικίας 3 ετών, μόνο για το Angular 1 & React). Τελευταίο αλλά εξίσου σημαντικό, το Vue υποστηρίζει τόσο την μονόδρομη σύνδεση όσο και την αμφίδρομη δέσμευση (προεπιλογή από μονόδρομο).

Υπάρχει ένα μακρύ άρθρο σχετικά με διαφορετικούς τύπους κρατών και τη διαχείριση του κράτους σε γωνιακές εφαρμογές (από Victor Savkin) αν θέλετε να διαβάσετε περαιτέρω.

2.6 Άλλες έννοιες προγραμματισμού

Το γωνιακό σύστημα περιλαμβάνει ένεση εξάρτησης, ένα μοτίβο στο οποίο ένα αντικείμενο τροφοδοτεί τις εξαρτήσεις (υπηρεσία) σε άλλο αντικείμενο (πελάτη). Αυτό οδηγεί σε περισσότερη ευελιξία και καθαρότερο κώδικα. Το άρθρο "Κατανόηση της έγχυσης εξάρτησης" εξηγεί αυτή την έννοια με περισσότερες λεπτομέρειες.

Το μοτίβο μοντέλου-ελεγκτή (MVC) χωρίζει ένα έργο σε τρία στοιχεία: μοντέλο, προβολή και ελεγκτή. Γωνιακό ως πλαίσιο MVC έχει MVC έξω από το κουτί. Ανταπόκριση έχει μόνο το V - θα πρέπει να λύσετε το M και C από μόνος σας.

2.7 Ευελιξία και μείωση στις μικροεπιχειρήσεις

Μπορείτε να εργαστείτε με το React ή το Vue απλά προσθέτοντας τη βιβλιοθήκη Javascript στον πηγαίο κώδικα. Αυτό δεν είναι δυνατό με το Γωνιακό λόγω της χρήσης του TypeScript.

Κινούμαστε περισσότερο προς τις μικροεπιχειρήσεις και τις μικροεπεξεργασίες. Το React και το Vue σας δίνουν μεγαλύτερο έλεγχο στο μέγεθος μιας εφαρμογής επιλέγοντας μόνο τα πράγματα που είναι πραγματικά απαραίτητα. Προσφέρουν μεγαλύτερη ευελιξία για να μεταβούν από ένα SPA σε μικροεπιχειρήσεις χρησιμοποιώντας τμήματα προηγούμενης εφαρμογής. Γωνιακή εργασία καλύτερα για SPA, δεδομένου ότι είναι πιθανώς πολύ φουσκωμένο για να χρησιμοποιηθεί για microservices.

Όπως σημειώνει το Cory House:

Το JavaScript κινείται γρήγορα και το React σάς επιτρέπει να ανταλλάσσετε μικρά κομμάτια της αίτησής σας για καλύτερες βιβλιοθήκες αντί να περιμένετε και να ελπίζετε ότι το πλαίσιο σας θα καινοτομεί. Η φιλοσοφία των μικρών, σύνθετων εργαλείων μιας χρήσης δεν ξεφεύγει ποτέ από το ύφος.

Ορισμένοι χρησιμοποιούν το React για ιστότοπους που δεν ανήκουν στο SPA (π.χ. για σύνθετες φόρμες ή οδηγούς). Ακόμα και το Facebook χρησιμοποιεί το React - όχι για την κύρια σελίδα, αλλά για συγκεκριμένες σελίδες και λειτουργίες.

2.8 Μέγεθος & απόδοση

Υπάρχει μια πανοραμική πλευρά σε όλες τις λειτουργίες: το γωνιακό πλαίσιο είναι αρκετά φουσκωμένο. Το μέγεθος αρχείου gzip είναι 143k, σε σύγκριση με 23K για Vue και 43k για React.

Το React και το Vue διαθέτουν ένα εικονικό DOM, το οποίο υποτίθεται ότι βελτιώνει την απόδοση. Εάν ενδιαφέρεστε για αυτό, μπορείτε να διαβάσετε σχετικά με τις διαφορές μεταξύ του Virtual DOM & DOM, καθώς και τα πραγματικά οφέλη του Virtual DOM στο react.js. Επίσης, ένας από τους συγγραφείς του ίδιου του Virtual-DOM απαντά σε μια ερώτηση σχετικά με την απόδοση του Stackoverflow.

Για να ελέγξω την απόδοση, ρίχνω μια ματιά στο μεγάλο js-frame-benchmark. Μπορείτε να το κατεβάσετε και να το εκτελέσετε μόνοι σας, ή να ρίξετε μια ματιά στον πίνακα αλληλεπιδραστικών αποτελεσμάτων. Πριν ελέγξετε τα αποτελέσματα, θα πρέπει να γνωρίζετε ότι τα πλαίσια εξαπατούν τα σημεία αναφοράς - ένας τέτοιος έλεγχος απόδοσης δεν πρέπει να χρησιμοποιείται για τη λήψη αποφάσεων.

Η απόδοση των γωνιακών, αντιδραστικών και VueΚατανομή μνήμης σε MB

Συνοψίζοντας: Το Vue έχει εξαιρετικές επιδόσεις και τη βαθύτερη κατανομή της μνήμης, αλλά όλα αυτά τα πλαίσια είναι πολύ κοντά σε σχέση με τα ιδιαίτερα αργά ή γρήγορα πλαίσια (όπως το Inferno). Για άλλη μια φορά: Τα σημεία αναφοράς επιδόσεων θα πρέπει να θεωρούνται μόνο ως δευτερεύουσα σημείωση, όχι ως ετυμηγορία.

2.9 Δοκιμές

Το Facebook χρησιμοποιεί το Jest για να δοκιμάσει τον κώδικα του React. Εδώ είναι μια σύγκριση μεταξύ Jest και Mocha - και υπάρχει ένα άρθρο για το πώς να χρησιμοποιήσετε το ένζυμο με Mocha. Το Enzyme είναι ένα βοηθητικό πρόγραμμα δοκιμών JavaScript που χρησιμοποιείται στο Airbnb (σε συνδυασμό με τους Jest, Karma και άλλους δοκιμαστές). Εάν θέλετε να διαβάσετε περισσότερα, υπάρχουν μερικά παλαιότερα άρθρα σχετικά με τις δοκιμές στο React (εδώ και εδώ).

Στη συνέχεια υπάρχει η Jasmine ως δοκιμαστικό πλαίσιο στο Angular 2. Υπάρχει ένα άρθρο του Eric Elliott που λέει ότι η Jasmine «έχει ως αποτέλεσμα εκατομμύρια τρόπους για να γράψει τεστ και ισχυρισμούς, χρειάζεται να διαβάζει προσεκτικά ο καθένας για να καταλάβει τι κάνει». Η παραγωγή είναι επίσης πολύ φουσκωμένη και επίπονη για ανάγνωση. Υπάρχουν μερικά ενημερωτικά άρθρα σχετικά με την ενσωμάτωση του Angular 2 με το Karma και το Mocha. Ακολουθεί ένα παλιό βίντεο (από το 2015) σχετικά με τις στρατηγικές δοκιμών με το Angular 2.

Ο Vue στερείται καθοδήγησης για τον έλεγχο, αλλά ο Evan έγραψε στην προεπισκόπηση του 2017 ότι η ομάδα σχεδιάζει να εργαστεί σε αυτό. Συνιστούν τη χρήση του Karma. Το Vue συνεργάζεται μαζί με τον Jest και υπάρχει και το avoriaz ως δοκιμαστικό βοηθητικό πρόγραμμα.

2.10 Καθολικές και εγγενείς εφαρμογές

Οι καθολικές εφαρμογές εισάγουν εφαρμογές στον ιστό, στην επιφάνεια εργασίας και στον κόσμο των εγγενών εφαρμογών.

Το React και το γωνιακό υποστηρίζουν τη μητρική ανάπτυξη. Το γωνιακό έχει το NativeScript (υποστηριζόμενο από την Telerik) για τις εγγενείς εφαρμογές και το Ionic Framework για τις υβριδικές εφαρμογές. Με το React, μπορείτε να ελέγξετε το αντιδραστικό-native-renderer για να δημιουργήσετε εφαρμογές iOS και Android για πολλαπλές πλατφόρμες ή να αντιδράσετε για εγγενείς εφαρμογές. Πολλές εφαρμογές (συμπεριλαμβανομένου του Facebook, έλεγχος της Βιτρίνας για περισσότερα) είναι χτισμένες με αντιδραστική-μητρική.

Τα πλαίσια JavaScrip εμφανίζουν σελίδες στον πελάτη. Αυτό είναι κακό για την αντιληπτή απόδοση, τη συνολική εμπειρία χρήστη και το SEO. Η προεπεξεργασία από πλευράς διακομιστή είναι ένα πλεονέκτημα. Και τα τρία πλαίσια έχουν βιβλιοθήκες για να βρουν βοήθεια γι 'αυτό. Για το React υπάρχει next.js, το Vue έχει nuxt.js, και το Angular έχει ... .Angular Universal.

2.11 Καμπύλη εκμάθησης

Υπάρχει σίγουρα μια απότομη καμπύλη μάθησης για το Angular. Έχει τεκμηριωμένη τεκμηρίωση, αλλά μερικές φορές μπορεί να αισθάνεστε απογοητευμένοι από αυτό γιατί τα πράγματα είναι πιο δύσκολα από αυτά που ακούγονται. Ακόμη και όταν έχετε βαθιά γνώση του Javascript, πρέπει να μάθετε τι συμβαίνει κάτω από την κουκούλα του πλαισίου. Το πρόγραμμα εγκατάστασης είναι μαγικό στην αρχή και προσφέρει πολλά πακέτα και κωδικό. Αυτό μπορεί να θεωρηθεί αρνητικό επειδή υπάρχει ένα μεγάλο, προϋπάρχον οικοσύστημα που πρέπει να μάθετε με την πάροδο του χρόνου. Από την άλλη πλευρά, θα μπορούσε να είναι καλό σε μια δεδομένη κατάσταση, επειδή έχουν ήδη γίνει πολλές αποφάσεις. Με το React, ίσως χρειαστεί να κάνετε πολλές επιβλητικές αποφάσεις σχετικά με τις βιβλιοθήκες τρίτων. Υπάρχουν 16 διαφορετικά πακέτα ροής για την επιλογή κρατικής διαχείρισης από το React μόνο.

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

Μερικοί άνθρωποι υποστηρίζουν ότι τα πράγματα που έκαναν στο React θα ήταν καλύτερα γραμμένα στη Vue. Εάν είστε ένας άπειρος προγραμματιστής Javascript - ή αν εργάζεστε κυρίως με το jQuery την τελευταία δεκαετία - θα πρέπει να σκεφτείτε τη χρήση του Vue. Η μετατόπιση του παραδείγματος είναι πιο έντονη όταν μετακινείται στο React. Το Vue μοιάζει περισσότερο με το απλό Javascript, ενώ εισάγει επίσης κάποιες νέες ιδέες: τα συστατικά στοιχεία, το μοντέλο που βασίζεται σε γεγονότα και τη ροή δεδομένων μονής κατεύθυνσης. Έχει επίσης ένα μικρό αποτύπωμα.

Εν τω μεταξύ, το Angular και το React έχουν το δικό τους τρόπο να κάνουν πράγματα. Μπορεί να φτάσουν στο δρόμο σας, επειδή πρέπει να προσαρμόσετε τις πρακτικές σας για να κάνετε τα πράγματα να λειτουργούν με τον τρόπο τους. Αυτό μπορεί να είναι μια ζημιά επειδή είστε λιγότερο ευέλικτοι και υπάρχει μια πιο απότομη καμπύλη μάθησης. Θα μπορούσε επίσης να είναι ένα όφελος, επειδή είστε αναγκασμένοι να μάθετε τις σωστές έννοιες κατά την εκμάθηση της τεχνολογίας. Με το Vue, μπορείτε να κάνετε τα πράγματα με τον παλιό τρόπο με τη μορφή Javascript. Αυτό μπορεί να είναι ευκολότερο στην αρχή, αλλά θα μπορούσε να αποτελέσει πρόβλημα μακροπρόθεσμα εάν τα πράγματα δεν γίνουν σωστά.

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

2,12 γωνιακό, React και Vue κάτω από την κουκούλα

Θέλετε να ελέγξετε τον εαυτό σας τον πηγαίο κώδικα; Θέλετε να δείτε πώς αισθάνονται τα πράγματα;

Πιθανότατα θα θέλετε να ελέγξετε πρώτα τα αποθετήρια Github: React (github.com/facebook/react), Angular (github.com/angular/angular) και Vue (github.com/vuejs/vue)

Πώς φαίνεται η σύνταξη; Το ValueCoders συγκρίνει τη σύνταξη για το γωνιακό, το React και το Vue.

Είναι επίσης καλό να βλέπουμε τα πράγματα στην παραγωγή - σε συνδυασμό με τον υποκείμενο πηγαίο κώδικα. Το TodoMVC αναφέρει δεκάδες από την ίδια εφαρμογή Todo, γραμμένο με διαφορετικά πλαίσια Javascript - μπορείτε να συγκρίνετε τις λύσεις γωνίας, Reactand Vue. Το RealWorld δημιουργεί μια εφαρμογή πραγματικού κόσμου (ένα μεσαίο κλώνο) και έχουν λύσεις γωνίας (4+) και React (με Redux) έτοιμες. Το Vue είναι ένα έργο σε εξέλιξη.

Υπάρχουν επίσης κάποιες εφαρμογές πραγματικού κόσμου που θα μπορούσατε να δείτε. Ακολουθούν λύσεις για το React:

  • Do (μια ωραία εφαρμογή διαχείρισης σημειώσεων πραγματικού κόσμου που χτίστηκε με το React & Redux)
  • sound-redux (ένας πελάτης Soundcloud που έχει κατασκευαστεί με το React & Redux)
  • Brainfock (λύση διαχείρισης έργου και ομάδας που δημιουργήθηκε με το React)
  • react-hn & react-news (κλώνοι ειδήσεων Hacker)
  • αντιδρά-native-whatsapp-ui + ένα σεμινάριο (Whatsapp κλώνος με αντίδραση-native)
  • phoenix-trello (κλώνος Trello)
  • slack-clone + άλλο φροντιστήριο (κλώνοι Slack)

Υπάρχουν ορισμένες εφαρμογές για το Angular:

  • angular2-hn & hn-ng2 (οι κλώνοι Hacker News + ένα ωραίο φροντιστήριο για τη δημιουργία ενός άλλου από τον Ashwin Sureshkumar)
  • Redux-and-angular-2 (ένας κλώνος Twitter)

Υπάρχουν επίσης λύσεις για το Vue:

  • vue-hackernews-2.0 & Loopa ειδήσεις (κλώνοι ειδήσεων Hacker)
  • vue-soundcloud (ένα demo του Soundcloud)

συμπέρασμα

Αποφασίστε σχετικά με ένα πλαίσιο τώρα

Αντ 'αυτού, το Angular και το Vue είναι όλα αρκετά δροσερά και κανένας από αυτούς δεν βρίσκεται ξεκάθαρα πάνω από τους άλλους. Εμπιστευθείτε το συναίσθημά σας. Αυτό το τελευταίο κομμάτι του ψυχαγωγικού κυνισμού μπορεί να σας βοηθήσει:

Το βρώμικο μικρό μυστικό είναι ότι η πιο "σύγχρονη ανάπτυξη JavaScript" δεν έχει καμία σχέση με την πραγματική δημιουργία ιστοτόπων - είναι πακέτα που μπορούν να χρησιμοποιηθούν από ανθρώπους που κατασκευάζουν βιβλιοθήκες που μπορούν να χρησιμοποιηθούν από ανθρώπους που δημιουργούν πλαίσια που οι άνθρωποι που γράφουν μαθήματα και διδάσκουν μαθήματα μπορεί να διδάξει.Δεν είμαι βέβαιος ότι κάποιος κατασκευάζει πραγματικά κάτι για τους πραγματικούς χρήστες να αλληλεπιδρούν με.

Αυτό είναι υπερβολικό, φυσικά, αλλά υπάρχει πιθανώς ένας κόκκος αλήθειας σε αυτό. Ναι, υπάρχει πολλή buzzing στο οικοσύστημα Javascript. Κατά πάσα πιθανότητα θα βρείτε πολλές άλλες ελκυστικές εναλλακτικές λύσεις κατά τη διάρκεια της αναζήτησής σας - προσπαθήστε να μην τυφλώσετε από το νεότερο, shiniest πλαίσιο.

Τι πρέπει να επιλέξω;

Εάν εργάζεστε στο Google: Γωνιακό

Αν σας αρέσει το TypeScript: Γωνιακό (ή React)

Αν αγαπάτε αντικειμενοστραφή προγραμματισμό (OOP): Γωνιακό

Αν χρειάζεστε καθοδήγηση, δομή και χέρι βοηθείας: Γωνιακό

Εάν εργάζεστε στο Facebook: Αντιδράστε

Αν σας αρέσει η ευελιξία: Αντιδράστε

Αν αγαπάτε τα μεγάλα οικοσυστήματα: Αντιδράστε

Αν σας αρέσει να επιλέγετε ανάμεσα σε δεκάδες πακέτα: Αντιδράστε

Αν αγαπάς τον JS & την προσέγγιση "όλα-είναι-Javascript": Αντιδρά

Αν σας αρέσει πολύ καθαρός κώδικας: Vue

Αν θέλετε την πιο εύκολη καμπύλη μάθησης: Vue

Αν θέλετε το πιο ελαφρύ πλαίσιο: Vue

Αν θέλετε διαχωρισμό των ανησυχιών σε ένα αρχείο: Vue

Εάν εργάζεστε μόνοι ή έχετε μια μικρή ομάδα: Vue (ή React)

Εάν η εφαρμογή σας τείνει να γίνει πολύ μεγάλη: Γωνιακή (ή React)

Εάν θέλετε να δημιουργήσετε μια εφαρμογή με αντίδραση-native: React

Εάν θέλετε να έχετε πολλούς προγραμματιστές στην πισίνα: Γωνιακό ή React

Εάν εργάζεστε με σχεδιαστές και χρειάζεστε καθαρά αρχεία HTML: Γωνιακή ή Vue

Αν σας αρέσει το Vue αλλά φοβάστε το περιορισμένο οικοσύστημα: Αντιδράστε

Εάν δεν μπορείτε να αποφασίσετε, μάθετε πρώτα React, στη συνέχεια Vue, στη συνέχεια Γωνιακό.

https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/