Περιεχόμενο
- 01. Γωνιακό
- 02. Αντιδρά
- 03. Vue
- Πώς συγκρίνεται η σύνταξη των πλαισίων;
- Δημοτικότητα και αγορά
- Ανάπτυξη εφαρμογών για κινητά
- Άλλα πλαίσια που πρέπει να προσέξετε το 2020
- συμπέρασμα
Το 2020, είμαστε ευλογημένοι με μια σειρά πλαισίων και βιβλιοθηκών που μας βοηθούν στην ανάπτυξη ιστού. Αλλά δεν υπήρχε πάντα τόσο μεγάλη ποικιλία. Το 2005, δημιουργήθηκε μια νέα γλώσσα σεναρίου που ονομάζεται Mocha από έναν τύπο που ονομάζεται Brendan Eich. Μήνες αφού μετονομάστηκε σε LiveScript, το όνομα άλλαξε ξανά σε JavaScript. Από τότε, η JavaScript έχει προχωρήσει πολύ.
Το 2010, είδαμε την εισαγωγή του Backbone και του Angular ως τα πρώτα πλαίσια JavaScript και, έως το 2016, το 92% όλων των ιστότοπων χρησιμοποίησαν JavaScript. Σε αυτό το άρθρο, θα ρίξουμε μια ματιά σε τρία από τα βασικά πλαίσια JavaScript (Angular, React και Vue) και την κατάστασή τους στην επόμενη δεκαετία. Θέλετε να φτιάξετε τον δικό σας ιστότοπο; Δοκιμάστε αυτήν τη λίστα δημιουργών ιστότοπων.
Για μερικούς λαμπρούς πόρους, ρίξτε μια ματιά στη λίστα με τα κορυφαία εργαλεία σχεδιασμού ιστοσελίδων, τη συλλογή υπηρεσιών φιλοξενίας ιστοσελίδων και αυτήν τη λίστα με εξαιρετικό λογισμικό δοκιμών χρηστών.
01. Γωνιακό
Το AngularJS κυκλοφόρησε το 2010, αλλά μέχρι το 2016 ξαναγράφηκε και κυκλοφόρησε ως Angular 2. Το Angular είναι ένα πλήρες πλαίσιο ιστού που αναπτύχθηκε από την Google, το οποίο χρησιμοποιείται από τους Wix, Upwork, The Guardian, HBO και άλλα.
Πλεονεκτήματα:
- Εξαιρετική υποστήριξη για TypeScript
- Το MVVM επιτρέπει στους προγραμματιστές να διαχωρίζουν την εργασία στην ίδια ενότητα εφαρμογών χρησιμοποιώντας το ίδιο σύνολο δεδομένων
- Εξαιρετική τεκμηρίωση
Μειονεκτήματα:
- Έχει λίγο καμπύλη μάθησης
- Η μετεγκατάσταση από μια παλιά έκδοση μπορεί να είναι δύσκολη.
- Οι ενημερώσεις εισάγονται αρκετά συχνά, πράγμα που σημαίνει ότι οι προγραμματιστές πρέπει να προσαρμοστούν σε αυτές
Τι έπεται?
Στο Angular 9, ο Ivy είναι ο προεπιλεγμένος μεταγλωττιστής. Έχει τεθεί σε εφαρμογή για την επίλυση πολλών προβλημάτων σχετικά με την απόδοση και το μέγεθος του αρχείου. Θα πρέπει να κάνει τις εφαρμογές μικρότερες, ταχύτερες και απλούστερες.
Όταν συγκρίνετε προηγούμενες εκδόσεις του Angular to React και Vue, το
Τα τελικά μεγέθη πακέτων ήταν πολύ μεγαλύτερα κατά τη χρήση του Angular. Η Ivy καθιστά επίσης δυνατή την Προοδευτική Ενυδάτωση, κάτι που έδειξε η ομάδα Angular στο I / O 2019. Η Progressive Hydration χρησιμοποιεί το Ivy για φόρτωση προοδευτικά στον διακομιστή και στον πελάτη. Για παράδειγμα, όταν ένας χρήστης αρχίσει να αλληλεπιδρά με μια σελίδα, ο κώδικας των στοιχείων μαζί με οποιονδήποτε χρόνο εκτέλεσης ανακτάται ανά κομμάτι.
Ο Ivy μοιάζει με τη μεγάλη εστίαση προς τα εμπρός για το Angular και ελπίζουμε να το κάνουμε διαθέσιμο για όλες τις εφαρμογές. Θα υπάρχει μια επιλογή εξαίρεσης στην έκδοση 9, μέχρι το Angular 10.
02. Αντιδρά
Το React κυκλοφόρησε αρχικά το 2013 από το Facebook και χρησιμοποιείται για την κατασκευή διαδραστικών διεπαφών Ιστού. Χρησιμοποιείται από τους Netflix, Dropbox, PayPal και Uber για να αναφέρει μερικά.
Πλεονεκτήματα:
- Το React χρησιμοποιεί το εικονικό DOM, το οποίο έχει θετικό αντίκτυπο στην απόδοση
- Το JSX είναι εύκολο να γραφτεί
- Οι ενημερώσεις δεν θέτουν σε κίνδυνο τη σταθερότητα
Μειονεκτήματα:
- Ένα από τα κύρια μειονεκτήματα είναι η ανάγκη βιβλιοθηκών τρίτων για τη δημιουργία πιο σύνθετων εφαρμογών
- Οι προγραμματιστές μένουν στο σκοτάδι για τον καλύτερο τρόπο ανάπτυξης
Τι έπεται?
Στο React Conf 2019, η ομάδα του React άγγιξε μια σειρά από πράγματα που έχουν εργαστεί. Η πρώτη είναι η Επιλεκτική Ενυδάτωση, όπου το React θα σταματήσει ό, τι εργάζεται για να δώσει προτεραιότητα στα στοιχεία με τα οποία αλληλεπιδρά ο χρήστης. Καθώς ο χρήστης πηγαίνει να αλληλεπιδράσει με μια συγκεκριμένη ενότητα, αυτή η περιοχή θα ενυδατωθεί. Η ομάδα εργάζεται επίσης στο Suspense, το οποίο είναι το σύστημα της React για ενορχήστρωση της φόρτωσης κώδικα, δεδομένων και εικόνων. Αυτό επιτρέπει στα στοιχεία να περιμένουν κάτι πριν αποδώσουν.
Τόσο η Επιλεκτική Ενυδάτωση όσο και το Suspense καθίστανται δυνατά με τη λειτουργία ταυτόχρονης λειτουργίας, η οποία επιτρέπει στις εφαρμογές να ανταποκρίνονται περισσότερο δίνοντας στο React τη δυνατότητα να εισάγει μεγάλα μπλοκ εργασίας χαμηλότερης προτεραιότητας, προκειμένου να επικεντρωθεί σε κάτι που είναι υψηλότερης προτεραιότητας, όπως η απόκριση στην είσοδο του χρήστη. Η ομάδα ανέφερε επίσης την προσβασιμότητα ως έναν άλλο τομέα στον οποίο εξετάζουν, εστιάζοντας σε δύο συγκεκριμένα θέματα - τη διαχείριση της εστίασης και των διεπαφών εισαγωγής.
03. Vue
Το Vue αναπτύχθηκε το 2014 από τον Evan You, πρώην υπάλληλο της Google. Χρησιμοποιείται από τις Xiaomi, Alibaba και GitLab. Η Vue κατάφερε να κερδίσει δημοτικότητα και υποστήριξη από προγραμματιστές σε σύντομο χρονικό διάστημα και χωρίς την υποστήριξη μιας μεγάλης μάρκας.
Πλεονεκτήματα:
- Πολύ ελαφρύ σε μέγεθος
- Φιλικό για αρχάριους - εύκολο να το μάθετε
- Μεγάλη κοινότητα
Μειονεκτήματα:
- Δεν υποστηρίζεται από μια τεράστια εταιρεία, όπως το React with Facebook και το Angular with Google
- Δεν υπάρχει πραγματική δομή
Τι έπεται?
Η Vue έχει θέσει ως στόχο να είναι ταχύτερη, μικρότερη, πιο διατηρήσιμη και να διευκολύνει τους προγραμματιστές να στοχεύουν εγγενή (αν αντιμετωπίζετε προβλήματα με τη συντήρηση, σκεφτείτε μια υπηρεσία φιλοξενίας ιστού) Η επόμενη έκδοση (3.0) αναμένεται το πρώτο τρίμηνο του 2020, το οποίο περιλαμβάνει μια εικονική επανεγγραφή DOM για καλύτερη απόδοση μαζί με βελτιωμένη υποστήριξη TypeScript. Υπάρχει επίσης η προσθήκη του API σύνθεσης, το οποίο παρέχει στους προγραμματιστές έναν νέο τρόπο δημιουργίας στοιχείων και οργάνωσής τους κατά λειτουργία αντί για λειτουργία.
Εκείνοι που αναπτύσσουν το Vue έχουν επίσης απασχοληθεί με το Suspense, το οποίο αναστέλλει την απόδοση του συστατικού σας και καθιστά ένα εναλλακτικό στοιχείο έως ότου ικανοποιηθεί μια συνθήκη.
Ένα από τα σπουδαία πράγματα με τις ενημερώσεις της Vue είναι ότι διατηρούν συμβατότητα προς τα πίσω. Δεν θέλουν να σπάσετε τα παλιά σας έργα Vue. Αυτό το είδαμε στη μετεγκατάσταση από 1.0 σε 2.0 όπου το 90% του API ήταν το ίδιο.
Πώς συγκρίνεται η σύνταξη των πλαισίων;
Και τα τρία πλαίσια έχουν υποστεί αλλαγές από την κυκλοφορία τους, αλλά ένα πράγμα που πρέπει να κατανοήσουμε είναι η σύνταξη και το πώς διαφέρει. Ας ρίξουμε μια ματιά στο πώς συγκρίνεται η σύνταξη όταν πρόκειται για απλή δέσμευση συμβάντων:
Vue: ο v-on Η οδηγία χρησιμοποιείται για την προσάρτηση ακροατών συμβάντων που επικαλούνται μεθόδους σε περιπτώσεις Vue. Οι οδηγίες προτίθενται με v- προκειμένου να υποδείξει ότι είναι ειδικά χαρακτηριστικά που παρέχονται από τη Vue και εφαρμόζουν ειδική αντιδραστική συμπεριφορά στο DOM που αποδίδεται. Οι διαχειριστές συμβάντων μπορούν να παρέχονται είτε inline είτε ως το όνομα της μεθόδου.
πρότυπο> κουμπί v-on: click = "clickHandler"> Click me / button> / template> script> εξαγωγή προεπιλογή {name: "HelloWorld", μέθοδοι: {clickHandler: function () {console.log ("I clicked!" "); }}} / σενάριο>
Αντιδρώ: Το React βάζει σήμανση και λογική στα JS και JSX, μια επέκταση σύνταξης στο JavaScript. Με το JSX, η λειτουργία μεταβιβάζεται ως χειριστής συμβάντων. Ο χειρισμός συμβάντων με στοιχεία React μοιάζει πολύ με τον χειρισμό συμβάντων σε στοιχεία DOM. Υπάρχουν όμως κάποιες συντακτικές διαφορές. Για παράδειγμα, τα γεγονότα React ονομάζονται χρησιμοποιώντας camelCase και όχι πεζά.
Λειτουργία Button () {function clickHandler (e) {console.log ("I clicked"); } κουμπί επιστροφής onClick = {clickHandler}> Κάντε κλικ στο κουμπί! / κουμπί>; }
Γωνιώδης: Η σύνταξη δέσμευσης συμβάντων αποτελείται από ένα όνομα συμβάντος στόχου μέσα σε παρενθέσεις στα αριστερά ενός ίσου σημείου και μια δήλωση προτύπου που παρατίθεται στα δεξιά. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το επί- πρόθεμα, γνωστό ως κανονική μορφή.
@Component ({selector: “app-click-me”, template: “button (click) =” onClickMe () ”> Click me! / Button>“}) εξαγωγή κλάσης ClickMeComponent {onClickMe () {console.log (“ Με κάνατε κλικ! "); }}
Δημοτικότητα και αγορά
Ας ξεκινήσουμε εξετάζοντας μια συνολική εικόνα των τριών πλαισίων σε σχέση με τον υπόλοιπο ιστό εξετάζοντας στατιστικά στοιχεία από το W3Techs. Το Angular χρησιμοποιείται επί του παρόντος από το 0,4 τοις εκατό όλων των ιστότοπων, με μερίδιο αγοράς βιβλιοθήκης JavaScript 0,5 τοις εκατό. Το React χρησιμοποιείται από 0,3 τοις εκατό όλων των ιστότοπων και 0,4% μερίδιο αγοράς βιβλιοθήκης JavaScript και το Vue έχει 0,3 τοις εκατό και για τα δύο. Αυτό φαίνεται αρκετά ομοιόμορφο και θα περίμενε κανείς να δει τους αριθμούς να αυξάνονται.
Τάσεις Google: Τους τελευταίους 12 μήνες, το React είναι το πιο δημοφιλές στους όρους αναζήτησης, ακολουθούμενο από το Angular. Το Vue.js είναι αρκετά πίσω. Ωστόσο, ένα πράγμα που πρέπει να θυμάστε είναι ότι ο Vue είναι ακόμα νέος σε σύγκριση με τους άλλους δύο.
Αναζητήσεις εργασίας: Τη στιγμή της γραφής, το React και το Angular ταιριάζουν απόλυτα με τις λίστες θέσεων εργασίας στο Πράγμα με τον Vue πολύ πίσω. Στο LinkedIn, ωστόσο, φαίνεται να υπάρχει μεγαλύτερη ζήτηση για προγραμματιστές της Vue.
Υπερχείλιση στοίβας: Αν δείτε τα αποτελέσματα της Έρευνας προγραμματιστών Stack Overflow για το 2019, το React και το Vue.js είναι και τα πιο αγαπημένα και επιθυμητά πλαίσια ιστού. Η γωνιακή θέση βρίσκεται στην ένατη θέση για τους πιο αγαπημένους αλλά τρίτους πιο επιθυμητούς.
GitHub: Ο Vue έχει τον μεγαλύτερο αριθμό αστεριών με 153k, αλλά έχει τον μικρότερο αριθμό συντελεστών (283). Το React από την άλλη πλευρά έχει 140k αστέρια και 1.341 συνεισφέροντες. Η Angular έχει μόνο 59,6k αστέρια, αλλά έχει τον υψηλότερο αριθμό συντελεστών από τα τρία με 1.579.
Τάσεις NPM: Η παραπάνω εικόνα δείχνει στατιστικά στοιχεία για τους τελευταίους 12 μήνες, όπου μπορείτε να δείτε ότι το React έχει μεγαλύτερο αριθμό λήψεων ανά μήνα σε σύγκριση με το Angular και το Vue.
Ανάπτυξη εφαρμογών για κινητά
Ένα κύριο επίκεντρο για τα τρία μεγάλα είναι η ανάπτυξη κινητών. Το React έχει το React Native, το οποίο έχει γίνει μια δημοφιλής επιλογή για τη δημιουργία εφαρμογών iOS και Android όχι μόνο για τους χρήστες του React αλλά και για την ευρύτερη κοινότητα ανάπτυξης εφαρμογών. Οι γωνιακοί προγραμματιστές μπορούν να χρησιμοποιήσουν το NativeScript για εγγενείς εφαρμογές ή το Ionic για υβριδικές εφαρμογές για κινητά, ενώ οι προγραμματιστές Vue έχουν τη δυνατότητα επιλογής NativeScript ή Vue Native. Λόγω της δημοτικότητας των εφαρμογών για κινητά, αυτό παραμένει βασικός τομέας επενδύσεων.
Άλλα πλαίσια που πρέπει να προσέξετε το 2020
Αν θέλετε να δοκιμάσετε κάτι νέο το 2020, ρίξτε μια ματιά σε αυτά τα πλαίσια JavaScript.
Χόβολη: Ένα πλαίσιο ανοιχτού κώδικα για τη δημιουργία εφαρμογών ιστού που λειτουργεί με βάση το μοτίβο MVVM. Χρησιμοποιείται από πολλές μεγάλες εταιρείες όπως η Microsoft, το Netflix και το LinkedIn.
Μετέωρο: Μια πλατφόρμα JavaScript πλήρους στοίβας για την ανάπτυξη σύγχρονων εφαρμογών ιστού και κινητών. Είναι εύκολο να μάθει και έχει μια πολύ υποστηρικτική κοινότητα.
συμπέρασμα
Και τα τρία πλαίσια βελτιώνονται συνεχώς, κάτι που αποτελεί ενθαρρυντικό σημάδι. Ο καθένας έχει τη δική του προοπτική και την προτιμώμενη λύση για το ποια θα πρέπει να χρησιμοποιήσει, αλλά πραγματικά εξαρτάται από το μέγεθος του έργου και που σας κάνει να νιώθετε πιο άνετα.
Η πιο σημαντική πτυχή είναι η συνεχής υποστήριξη των κοινοτήτων τους, οπότε αν σκοπεύετε να ξεκινήσετε ένα νέο έργο και δεν έχετε χρησιμοποιήσει ποτέ κανένα από τα τρία στο παρελθόν, τότε πιστεύω ότι είστε σε ασφαλή χέρια με όλα αυτά. Εάν δεν είχατε την ευκαιρία να μάθετε κανένα από τα τρία πλαίσια ακόμα, προτείνω να το κάνετε το ψήφισμα της Πρωτοχρονιάς για να ξεκινήσετε να μαθαίνετε. Το μέλλον θα περιστρέφεται γύρω από αυτά τα τρία.
Αυτό το περιεχόμενο εμφανίστηκε αρχικά στο περιοδικό net.
