Προγραμματισμός

Πέρα από το jQuery: Ένας ειδικός οδηγός για τα πλαίσια JavaScript

Το καθοριστικό χαρακτηριστικό ενός πραγματικά καλού προγραμματιστή είναι η τεμπελιά. Αυτό όμως δεν σημαίνει ανόητο ή ανίδεο. Ο πραγματικά καλός τεμπέλης προγραμματιστής δεν γράφει (τότε πρέπει να κάνετε εντοπισμό σφαλμάτων και δοκιμή) 100 γραμμές κώδικα όταν θα το κάνουν 10. Στον κόσμο της JavaScript, ο πραγματικά τεμπέλης προγραμματιστής θα βασιστεί σε ένα αποτελεσματικό, καλά δοκιμασμένο και καλά υποστηριζόμενο πλαίσιο για να αποφύγει τη νέα εφεύρεση λύσεων σε κοινά προβλήματα.

Τα πλαίσια «τσακίζουν» μεγάλο μέρος της λεπτής λειτουργικότητας της γλώσσας JavaScript σε κλήσεις μεθόδου, μειώνοντας τον αριθμό του κώδικα που πρέπει να γράψει, να δοκιμάσει και να εντοπίσει ο προγραμματιστής. Υπάρχουν δύο εμπόδια που πρέπει να ξεπεραστούν πριν αποκομίσετε αυτό το πλεονέκτημα: επιλέγοντας ένα πλαίσιο για το σκοπό σας και μάθετε το.

Μόλις μάθετε ένα πλαίσιο, το προφανές μάθημα είναι να το ακολουθήσετε για ό, τι αναπτύξετε, ώστε να μην χρειάζεται να μάθετε κάτι άλλο, αλλά αυτό δεν είναι πάντα χρήσιμο. Στην πραγματικότητα, μια από τις ενδείξεις που λέει ότι χρησιμοποιείτε το λάθος πλαίσιο για την τρέχουσα εργασία σας είναι ότι βρίσκεστε πολύ δουλειά. Γι 'αυτό Πραγματικά τεμπέλης και συνεχίζεις να μαθαίνεις.

Λίγο ιστορικό JavaScript

Η ιστορία της JavaScript επιστρέφει στο αναπτυξιακό έργο που έκανε ο Brendan Eich στη γλώσσα Mocha για την εταιρεία περιήγησης Web Netscape το 1995. Η Mocha κυκλοφόρησε ως LiveScript αργότερα εκείνο το έτος και μετονομάστηκε σε JavaScript όταν η Sun χορήγησε στην Netscape άδεια εμπορικού σήματος. Η προσπάθεια να συνδέσετε τον ελαφρύ διερμηνέα JavaScript τύπου C με τη μη σχετική βαρέων βαρών Java - μια αντικειμενοστρεφή γλώσσα, που συντάσσεται με διακριτικά - με ένα παρόμοιο όνομα φάνηκε σαν μια καλή ιδέα για σκοπούς μάρκετινγκ το 1995, αλλά με την πάροδο των ετών αυτή η επιλογή έχει δεν προκάλεσε τέλος σύγχυσης.

Η ανάπτυξη του JavaScript την επόμενη δεκαετία χαρακτηρίστηκε από διαφωνίες μεταξύ των εφαρμογών του προγράμματος περιήγησης και από μια αρκετά αδύναμη προσπάθεια προτύπων ECMA. Αυτό που άλλαξε αυτή την αδιαθεσία και αναζωογόνησε τη γλώσσα ήταν η άνοδος του Dynamic HTML και του Ajax στα μέσα της δεκαετίας του 2000, ακολουθούμενη γρήγορα από την εισαγωγή βιβλιοθηκών ανοιχτού κώδικα JavaScript όπως Prototype, jQuery, Dojo και MooTools, οι οποίες είχαν σκοπό να κάνουν Dynamic HTML και Ajax ευκολότερο στη χρήση, και να παρέχει "widgets" για JavaScript που θα βελτιώνουν τη λειτουργικότητα των στοιχείων ελέγχου φόρμας HTML.

Παρόλο που η Netscape κυκλοφόρησε έναν διακομιστή JavaScript λίγο μετά το JavaScript για το πρόγραμμα περιήγησης, η γλώσσα δεν ξεκίνησε πραγματικά για χρήση ως back-end μέχρι την άνοδο του Node.js από το 2009. Μέρος αυτού που έκανε το Node.js ελκυστικό ήταν η χρήση του Google εξαιρετικά συντονισμένη μηχανή JavaScript V8 για λειτουργικές μονάδες βιβλιοθήκης, με βασικό κώδικα σε αρκετά φορητό C ++.

Αυτή η περιήγηση στα πλαίσια JavaScript είναι μια προσπάθεια να κατανοήσουμε τις σημερινές μεγάλες βιβλιοθήκες JavaScript σε τρεις κατηγορίες: αυτές που εκτελούνται σε διακομιστές Node.js, αυτές που λειτουργούν σε προγράμματα περιήγησης και αυτές που υποστηρίζουν εγγενείς ή υβριδικές εφαρμογές για κινητά.

Πλαίσια Node.js

Το Node.js είναι μια τεχνολογία διακομιστή που βασίζεται σε JavaScript και C ++ που έχει προσελκύσει αρκετή προσοχή και υποστήριξη από την εισαγωγή της (σε μια επικαιρότητα) από τον συγγραφέα Ryan Dahl στο European JSConf τον Νοέμβριο του 2009. Το Node.js διακρίνεται από ένα αρχιτεκτονική βάσει συμβάντων ικανή για ασύγχρονο I / O, μικρό αποτύπωμα μνήμης και υψηλή απόδοση και επεκτασιμότητα για εφαρμογές Web.

Ενώ το Node.js διαθέτει όλα τα απαραίτητα κομμάτια για την υλοποίηση ενός διακομιστή Web, γράφοντας αυτό το επίπεδο χρειάζεται κάποια δουλειά. Η TJ Holowaychuk κυκλοφόρησε το Express 1.0 Beta τον Ιούλιο του 2010 και σύντομα έγινε ο «προεπιλεγμένος» διακομιστής back-end για το Node.js και μέρος της στοίβας MEAN, με τη βάση δεδομένων MongoDB και το πλαίσιο front-end Angular.JS.

Ωστόσο, διαφορετικοί προγραμματιστές και οργανισμοί έχουν διαφορετικές ανάγκες. Η Express έχει γεννήσει άμεσα ή έμμεσα τις μηχανές Locomotive, Hapi, Koa, Kraken και Sails.js. Ο μετεωρίτης είναι αρκετά διαφορετικός, αν και τρέχει και στο Node.js.

Εξπρές. Το Express είναι ένα ελάχιστο και ευέλικτο πλαίσιο εφαρμογών Node.js Web, που παρέχει ένα ισχυρό σύνολο δυνατοτήτων για τη δημιουργία εφαρμογών μιας σελίδας, πολλαπλών σελίδων και υβριδικών Web. Το Express API ασχολείται με την εφαρμογή Ιστού, αιτήματα και απαντήσεις HTTP, δρομολόγηση και μεσαίο λογισμικό. Από το Express 4.x, το υποστηριζόμενο ενδιάμεσο λογισμικό για Express βρίσκεται σε έναν αριθμό ξεχωριστών αποθετηρίων.

Έχουν εμφανιστεί αρκετά πιρούνια Express και πρόσθετα για Express, όπως Locomotive, Hapi και Koa. Το Koa δημιουργήθηκε από έναν από τους κύριους συνεργάτες της Express.

Το Express είναι παλαιότερο από τα ίχνη του και έχει μεγαλύτερο αποτύπωμα. Ωστόσο, έχει επίσης μεγαλύτερη κοινότητα και μεγαλύτερη σταθερότητα. Βλέπω συνεχώς το Express ενσωματωμένο σε άλλα πλαίσια και εργαλεία χωρίς σχόλιο, σαν να ήταν η μόνη πιθανή επιλογή για τη δημιουργία ενός διακομιστή Web στο Node.js. Στο GitHub, το πλαίσιο έχει περισσότερα από 23.000 αστέρια και 4.000 πιρούνια.

Χάπι. Το Hapi είναι ένα απλό στη χρήση, κεντρικό πλαίσιο διαμόρφωσης με ενσωματωμένη υποστήριξη για επικύρωση εισόδου, προσωρινή αποθήκευση, έλεγχο ταυτότητας και άλλες βασικές εγκαταστάσεις για την κατασκευή εφαρμογών Ιστού και υπηρεσιών. Το Hapi επιτρέπει στους προγραμματιστές να επικεντρώνονται στη συγγραφή επαναχρησιμοποιήσιμης λογικής εφαρμογών με έναν εξαιρετικά αρθρωτό και περιοριστικό τρόπο. Αναπτύχθηκε από την Walmart Labs και είναι μια καλή επιλογή για μεγάλες ομάδες και μεγάλα έργα.

Το Hapi χτίστηκε αρχικά στην κορυφή του Express, αλλά αργότερα επανασχεδιάστηκε για να είναι αυτόνομο. Βασίζεται στις ιδέες ότι «η διαμόρφωση είναι καλύτερη από τον κώδικα» και «η επιχειρησιακή λογική πρέπει να απομονωθεί από το επίπεδο μεταφοράς». Στο παραπάνω παράδειγμα, παρατηρήστε πόσο καθαρή και καθαρή είναι η διαμόρφωση των διαδρομών διακομιστή στον κώδικα.

Κόα. Το Koa είναι ένα νέο πλαίσιο Web που σχεδιάστηκε από την ομάδα πίσω από το Express, αλλά ανεξάρτητα από τον κωδικό Express. Το Koa στοχεύει να είναι ένα μικρότερο, πιο εκφραστικό και πιο ισχυρό θεμέλιο για εφαρμογές Ιστού και API. Η Koa χρησιμοποιεί γεννήτριες ES6 για μεσαίο λογισμικό αντί να χρησιμοποιεί επιστροφές κλήσεων Node.js. Το παρακάτω είναι μια εφαρμογή «Γεια, Κόσμος» χρησιμοποιώντας μια γεννήτρια, η οποία κάνει ένα απόδοση μετά για να περάσετε τον έλεγχο στην επόμενη γεννήτρια:

Η διαφορά μεταξύ των γεννητριών μεσαίου λογισμικού, όπως χρησιμοποιείται από την Koa, και των επιστροφών κλήσεων, όπως χρησιμοποιούνται από τις Express και Connect, είναι ότι έχετε μεγαλύτερη ευελιξία με τις γεννήτριες. Για παράδειγμα, το Connect απλώς περνά τον έλεγχο μέσω μιας σειράς συναρτήσεων έως ότου επιστρέψει κάποιος, ενώ ο Koa αποδίδει τον έλεγχο «downstream» και μετά τον έλεγχο ρέει πίσω «upstream». Στο παραπάνω παράδειγμα, ο χρόνος απόκρισης x «τυλίγει» τη γεννήτρια απόκρισης, με το απόδοση μετά δήλωση που σηματοδοτεί την κλήση. Η απόδοση είναι πιο ευέλικτη από τις σαφείς κλήσεις λειτουργίας, καθώς διευκολύνει την εισαγωγή μιας άλλης γεννήτριας στην ακολουθία — για παράδειγμα, ένα καταγραφικό Web μεταξύ του χρονοδιακόπτη και της απόκρισης.

Κράκεν. Ένα έργο ανοιχτού κώδικα PayPal, το Kraken είναι ένα ασφαλές και επεκτάσιμο στρώμα που επεκτείνει το Express παρέχοντας δομή και σύμβαση, όπως η Locomotive. Αν και το Kraken είναι ο κύριος πυλώνας του πλαισίου του, οι ακόλουθες ενότητες μπορούν επίσης να χρησιμοποιηθούν ανεξάρτητα: Lusca (ασφάλεια), Kappa (διακομιστής μεσολάβησης NPM), Makara (LinkedIn Dust.js I18N) και Adaro (LinkedIn Dust.js Templating).

Ο Κράκεν βασίζεται ναι για τη δημιουργία έργων, όπως φαίνεται στο στιγμιότυπο οθόνης στα αριστερά. Όπως η Locomotive, οργανώνει τα έργα της σε συμβατικούς καταλόγους τύπου Rails, συμπεριλαμβανομένων μοντέλων, ελεγκτών και config. Όπως δημιουργήθηκε, ο Kraken συνδέεται με το Express ως βασικό μεσαίο λογισμικό, που ορίζεται ως εφαρμογή, το οποίο στη συνέχεια έχει app.use () και app.listen () μέθοδοι που ονομάζονται. Κάθε διαδρομή σε έναν διακομιστή Kraken ζει στο δικό της αρχείο στο φάκελο ελεγκτών.

Κινητήριος. Ως διαδικτυακό πλαίσιο για το Node.js, η Locomotive υποστηρίζει μοτίβα MVC, διαδρομές RESTful και ρυθμίσεις σχετικά με τη διαμόρφωση (όπως Rails), ενώ ενσωματώνεται απρόσκοπτα σε οποιαδήποτε μηχανή βάσης δεδομένων και προτύπου. Η ατμομηχανή βασίζεται στο Express and Connect, το οποίο είναι ένα απλό πλαίσιο κόλλας για μεσαίο λογισμικό που χρησιμοποιείται από διάφορα πλαίσια Node.js.

Το Locomotive προσθέτει στο Express κάποια δομή τύπου Ruby on Rails, την οποία μπορείτε να δείτε στην παραπάνω εικόνα, που άλλως δεν διαθέτει το Express. Οι προβολές ατμομηχανής είναι συχνά ενσωματωμένα αρχεία JavaScript (html.ejs), όπως φαίνεται εδώ, αλλά το Locomotive υποστηρίζει επίσης Jade και άλλους συμβατούς κινητήρες προτύπων για το Express. Η λειτουργικότητα REST ελέγχεται από διαδρομές, όπως συμβαίνει συνήθως στους διακομιστές που βασίζονται σε Express. Μπορείτε να χρησιμοποιήσετε ό, τι επίπεδο βάσης δεδομένων και ORM (αντιστοίχιση-αντικειμενικής αντιστοίχισης) θέλετε με το Locomotive. Ο οδηγός καταδεικνύει τη χρήση του MongoDB με το Mongoose, καθώς και τη συνεργασία με το Passport για έλεγχο ταυτότητας χρήστη.

Μετέωρο. Το Meteor σάς προσφέρει έναν ριζικά απλούστερο τρόπο για να δημιουργήσετε εφαρμογές σε πραγματικό χρόνο για κινητά και Web, εξ ολοκλήρου σε JavaScript, από μία βάση κώδικα. Αντί να στέλνει HTML μέσω του καλωδίου, ο Meteor στέλνει δεδομένα από το διακομιστή για την απόδοση του πελάτη. Εκτός από το αυτόνομο, το Meteor μπορεί να ενσωματωθεί στο AngularJS και στο React. Το Meteor δεν είναι τίποτα σαν το Express, παρόλο που είναι επίσης χτισμένο πάνω από το Node.js και υποστηρίζει πρότυπα τιμονιού, Blaze και Jade.

Το Meteor επιτρέπει την ταχεία δημιουργία πρωτοτύπων και παράγει κώδικα πολλαπλών πλατφορμών (Web, Android, iOS). Ενσωματώνεται με το MongoDB, χρησιμοποιώντας το Πρωτόκολλο Κατανεμημένων Δεδομένων και ένα μοτίβο δημοσίευσης-εγγραφής για την αυτόματη μετάδοση αλλαγών δεδομένων σε πελάτες χωρίς να απαιτείται από τον προγραμματιστή να γράψει κώδικα συγχρονισμού. Στον πελάτη, το Meteor εξαρτάται από το jQuery και μπορεί να χρησιμοποιηθεί με οποιαδήποτε βιβλιοθήκη widget UI JavaScript.

Το Meteor αναπτύχθηκε από την Meteor Development Group, μια εκκίνηση που επωάστηκε από το Y Combinator. Ο Meteor είναι πλέον αρκετά ώριμος για να υποστηρίξει μισή ντουζίνα βιβλία φροντιστηρίου. Το έργο έχει συγκεντρώσει περισσότερα από 32.000 αστέρια στο GitHub.

Το ίδιο το Meteor είναι δωρεάν λογισμικό ανοιχτού κώδικα, αλλά η ομάδα του Meteor το αποφέρει κέρδος με την πώληση συνδρομών Meteor Galaxy DevOps, οι οποίες περιλαμβάνουν χώρο διακομιστή AWS και βασική υποστήριξη Meteor και μια ξεχωριστή συνδρομή υποστήριξης Premium.

Sails.js. Με τα Sails, μπορείτε να δημιουργήσετε προσαρμοσμένες εφαρμογές Node.js εταιρικού επιπέδου. Έχει σχεδιαστεί για να προσομοιώνει το γνωστό μοτίβο πλαισίων-view-controller (MVC) όπως το Ruby on Rails, αλλά με υποστήριξη για τις απαιτήσεις των σύγχρονων εφαρμογών: API βάσει δεδομένων με επεκτάσιμη αρχιτεκτονική προσανατολισμένη στις υπηρεσίες. Είναι ιδιαίτερα καλό για τη δημιουργία εφαρμογών συνομιλίας, ταμπλό πραγματικού χρόνου ή παιχνιδιών για πολλούς παίκτες, αλλά μπορείτε να το χρησιμοποιήσετε για οποιοδήποτε έργο εφαρμογής Ιστού. Το Sails υποστηρίζει WebSockets και στέλνει αυτόματα μηνύματα υποδοχής στις διαδρομές της εφαρμογής σας.

Όπως και τα Rails, το Sails εκτιμά τη συνθήκη για τη διαμόρφωση, παρέχει γεννήτριες και ικριώματα για τη δημιουργία REST API γρήγορα από σχεδιαγράμματα και χρησιμοποιεί ένα μοτίβο σχεδίασης MVC / ενεργής εγγραφής. Το Sails είναι χτισμένο πάνω από το Express και χρησιμοποιεί το Waterline για το ORM του, με υποστήριξη για συνδέσεις ORM. Το Waterline υποστηρίζει βάσεις δεδομένων SQL και NoSQL.

Το Sails είναι ένα πλαίσιο back-end που έχει σχεδιαστεί για να είναι συμβατό με οποιοδήποτε πλαίσιο Web front-end, όπως Angular ή Backbone ή κινητή συσκευή, όπως iOS ή Android, που τυχαίνει να σας αρέσει ή πρέπει να υποστηρίξετε. Υπάρχει ένα βιβλίο στα έργα στο Sails.js, ακόμη μερικώς ολοκληρωμένο.

Πλαίσια HTML5 / JavaScript

Παραδοσιακά θεωρούμε ότι οι βιβλιοθήκες και τα πλαίσια JavaScript λειτουργούν σε προγράμματα περιήγησης. Όπως ανέφερα νωρίτερα, μερικά από αυτά - jQuery, Dojo και MooTools - εμφανίστηκαν στα μέσα της δεκαετίας του 2000 κυρίως για να κάνουν το Dynamic HTML και το Ajax ευκολότερο να γράψει. Ορισμένα από αυτά έχουν επεκταθεί έκτοτε σε πρόσθετους τομείς λειτουργικότητας, όπως widget διεπαφής χρήστη και διεπαφές κινητής συσκευής.

Άλλοι εμφανίστηκαν πιο πρόσφατα. Το AngularJS είναι ένα πλαίσιο front-end που επεκτείνει HTML με σήμανση για δυναμικές προβολές και δέσμευση δεδομένων. Τα Backbone.js και Ember έχουν σχεδιαστεί για την ανάπτυξη εφαρμογών Ιστού μίας σελίδας. Το React προορίζεται για τη δημιουργία διεπαφής χρήστη ή προβολής, συνήθως για εφαρμογές μιας σελίδας.

Ακόμα άλλα πλαίσια επιδιώκουν στενότερους τομείς εξειδίκευσης. Το D3 κάνει οπτικοποίηση δεδομένων και κινούμενες εικόνες. Το Socket.IO υλοποιεί εφαρμογές Web σε πραγματικό χρόνο. Το Knockout είναι ένας τρόπος υψηλού επιπέδου για τη σύνδεση ενός μοντέλου δεδομένων με μια διεπαφή χρήστη Ιστού. Το Polymer προσφέρει ένα ελαφρύ στρώμα «ζαχαρούχου» πάνω από τα Web Components API που βοηθούν στην κατασκευή των δικών σας στοιχείων Web. Το Underscore είναι μια βιβλιοθήκη γενικής χρησιμότητας.

Όπως μπορείτε να περιμένετε, έχετε μια αμηχανία πλούτου για να διαλέξετε για ανάπτυξη Web από την πλευρά του πελάτη.

Γωνιακό JS. Το AngularJS (ή απλώς Angular, μεταξύ φίλων) είναι ένα πλαίσιο JavaScript-Ajax, ό, τιδήποτε (MVW) που επεκτείνει το HTML με σήμανση για δυναμικές προβολές και δέσμευση δεδομένων. Το Angular είναι ιδιαίτερα καλό για την ανάπτυξη εφαρμογών Ιστού μίας σελίδας και τη σύνδεση φορμών HTML με μοντέλα και ελεγκτές JavaScript.

Το παράξενο ηχητικό μοντέλο-ό, τι μοτίβο είναι μια προσπάθεια να συμπεριληφθούν τα πρότυπα μοντέλου-προβολέα, μοντέλου-προβολής-μοντέλου (MVVM) και μοντέλων-προβολής-παρουσιαστή (MVP) κάτω από ένα moniker. Ενώ οι προγραμματιστές λατρεύουν να υποστηρίζουν τις διαφορές μεταξύ αυτών των τριών στενά συνδεδεμένων προτύπων, οι προγραμματιστές Angular αποφάσισαν να εξαιρεθούν από τη συζήτηση.

Βασικά, το Angular συγχρονίζει αυτόματα δεδομένα από τη διεπαφή χρήστη (προβολή) με τα αντικείμενα JavaScript (μοντέλο) μέσω αμφίδρομης σύνδεσης δεδομένων. Για να σας βοηθήσει να διαμορφώσετε την εφαρμογή σας καλύτερα και να διευκολύνετε τη δοκιμή, η Angular διδάσκει στο πρόγραμμα περιήγησης πώς να κάνει την εξάρτηση και την αντιστροφή του ελέγχου.

Το Angular δημιουργήθηκε από την Google και ανοιχτού κώδικα με την άδεια MIT. Το αποθετήριο στο GitHub έχει περισσότερα από 47.000 αστέρια και 22.000 πιρούνια. Κατασκευασμένο με Angular, προβάλλονται εκατοντάδες ιστότοποι που έχουν δημιουργηθεί με το Angular, πολλές από αυτές υψηλής ποιότητας ιστοσελίδες.

$config[zx-auto] not found$config[zx-overlay] not found