10 εφαρμογές Web που έχουν δημιουργηθεί με το Backbone.js [Μελέτη περίπτωσης]

Έχετε ποτέ εμπλακεί σε κώδικες σπαγγέτι; Θα προτιμούσατε να τροφοδοτήσετε την εφαρμογή σας με κάτι πιο υγιεινό; Αν ναι, ρίξτε μια ματιά στο τι μπορεί να επιτευχθεί με το Backbone.js. Σπονδυλική στήλη είναι μια βιβλιοθήκη JavaScript που βασίζεται χαλαρά στο μοτίβο σχεδίασης μοντέλου-προβολέα-ελεγκτή αλλά επειδή δεν διαθέτει το στοιχείο του ελεγκτή, είναι καλύτερο να το ονομάζετε πλαίσιο MV *.

Σας βοηθά να χτίσετε γρήγορη, κομψή και πλούσια σε δεδομένα εφαρμογές ιστού μιας σελίδας, διατηρεί το δικό σας λογική των δεδομένων ξεχωριστά από τη διεπαφή χρήστη, σας εξοικονομεί από τη σύνδεση των δεδομένων σας στο DOM, και ζυγίζει όσο μεγαλώνει η εφαρμογή σας. Καθώς το Backbone συγχρονίζεται με οποιοδήποτε από τα RESTful API από προεπιλογή, μπορείτε εύκολα να συνδέσετε την εφαρμογή πελάτη με το υπάρχον API της διακομιστής σας μέσω μιας διεπαφής RESTful JSON.

Σε αυτήν την ανάρτηση θα μελετήσουμε 10 εφαρμογές ιστού που χρησιμοποιούν τα χαρακτηριστικά της βιβλιοθήκης Backbone για να σας βοηθήσουν να κατανοήσετε το δυναμικό του Backbone.js για τα μελλοντικά σας έργα εφαρμογών ιστού.

1. Trello

Trello είναι μια εφαρμογή ηλεκτρονικής συνεργασίας και διαχείρισης έργων που σας βοηθά να οργανώσετε τα σχέδιά σας σε πίνακες, πίνακες ελέγχου, κάρτες, λίστες καρτών και σας παρέχει εργαλεία όπως Conversations για την επικοινωνία με τα μέλη της ομάδας.

Το Trello χτίστηκε από το έδαφος με το Backbone.js. Το backbone συνεργάζεται με το API ιστορικού HTML5 και τη γλώσσα χωρίς τη λογική Mustache που δημιουργεί λογική στο προφίλ. Όλα τα στοιχεία της Trello Tech Stack σχεδιάστηκαν κατά τρόπο που είχε ως αποτέλεσμα την διατηρήσιμο πελάτη που χειρίζεται εύκολα τις ενημερώσεις, και συγχρονίζει ξανά δυναμικά με το διακομιστή κάθε φορά που ενεργοποιείται ένα συμβάν DOM.

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

2. Τετράγωνο

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

Το βασικό API του JavaScript για το Foursquare βασίζεται σε μοντέλα Backbone, όπου το Κλάσεις μοντέλων του API Foursquare (όπως Χρήστες, Εγκαταστάσεις και Έλεγχοι) είναι οι υποκατηγορίες των κατηγοριών Backbone Model και κληρονομήσουν τις μεθόδους και τις ιδιότητές τους.

Η εφαρμογή του κώδικα μπορεί να σχεδιαστεί ως εξής: fourSq.api.models.Venue = τέσσεριςSq.api.models.Model.extend (...); Ναι, αυτό είναι σωστό, το Backbone δίνει τη δυνατότητα στους προγραμματιστές γράψτε ωραίο αντικειμενοστραφή JavaScript.

Οι προβολές Backbone έχουν επίσης τον ρόλο τους στην εφαρμογή Foursquare, καθώς βελτιώνουν την εμπειρία των χρηστών με χαρακτηριστικά όπως χάρτες και λίστες αρχικής σελίδας. Εκτός από το Backbone, το API του Foursquare του JavaScript χρησιμοποιεί επίσης jQuery, Underscore.js (η οποία είναι η μόνη σκληρή εξάρτηση του Backbone) και το Compiler Closure.

3. Ημερολόγιο βάσης

Κατασκήνωση βάσης, η δημοφιλής εφαρμογή διαχείρισης έργου χρησιμοποιεί το Backbone.js για τη λειτουργία του Ημερολογίου.

Ο βασικός σχεδιαστικός στόχος του Ημερολογίου Basecamp ήταν να δημιουργήσει μια διαδραστική διασύνδεση που να κάνει διαισθητικό προγραμματισμό ομάδων πιθανή και ενημερώνεται σε χιλιοστά του δευτερολέπτου. Στο backbone Ημερολόγιο βάσεων καθιστά τις προβολές σε πρότυπα ECO (Embedded CoffeeScript) κάθε φορά που ενημερώνονται Μοντέλα (δεδομένα από την πλευρά του πελάτη).

Είναι ενδιαφέρον να σημειώσουμε ότι η ομάδα προγραμματιστών δεν έκανε ολόκληρη την εφαρμογή Basecamp μια ενιαία σελίδα, η οποία είναι η κύρια περίπτωση χρήσης του Backbone.js, αλλά χρησιμοποίησε μόνο τη βιβλιοθήκη στη λειτουργία Ημερολογίου, όπου θα μπορούσε πραγματικά να κάνει χρήση των πλεονεκτημάτων της. Απλά δείχνει ότι δεν χρειάζεται απαραίτητα να δημιουργήσετε μια πλήρη εφαρμογή μιας σελίδας με Backbone. είναι καλύτερα να σκεφτείτε προσεκτικά το πού μπορεί να εφαρμοστεί.

Διαβάστε περισσότερα σχετικά με τα αντίγραφα Backbone για να αποφασίσετε αν χρειάζεστε Backbone για ολόκληρη την εφαρμογή σας ή όχι.

4. Ροδάκινο

Flowdock είναι μια εφαρμογή επικοινωνίας ομάδας σε πραγματικό χρόνο που σας παρέχει λειτουργίες όπως ομαδική συζήτηση, εισερχόμενα ομάδας και ροές εργασίας σε πραγματικό χρόνο

Το Flowdock χτίστηκε από το έδαφος πάνω από το Backbone.js. Η κύρια πρόκληση της ομάδας ανάπτυξης ήταν να επιτρέψει μηνύματα και ροές εργασίας σε πραγματικό χρόνο. Από προεπιλογή, το Backbone.js συνδέεται στην πλευρά του διακομιστή μέσω μιας διεπαφής RESTful, η οποία δεν καθιστά δυνατή τη ροή δεδομένων σε πραγματικό χρόνο. Επομένως οι devs αποφάσισε να αποθηκεύσει μηνύματα μέσω του κινητήρα Socket.io σε πραγματικό χρόνο αντί του API REST.

Για να το επιτύχουν αυτοί έγραψε μια προσαρμοσμένη μέθοδο που ονομάζεται Backbone.sync. Δεδομένου ότι το Socket.io είναι επίσης βιβλιοθήκη JavaScript, κάνει την επικοινωνία μεταξύ του προενισχυμένου με JavaScript JavaScript και του backend (Node.js) απρόσκοπτη. Το Flowdock είναι κατά κύριο λόγο μια εφαρμογή Rails από την πλευρά του διακομιστή, αλλά έχει ξεχωριστό αντίγραφο Node.js που χειρίζεται τις συνδέσεις Socket.io.

Flowdock βελτιώνει την εμπειρία χρήστη σε πραγματικό χρόνο ακόμη περισσότερο με το Bacon.js, μια εύχρηστη βιβλιοθήκη JavaScript που επιτρέπει λειτουργικό αντιδραστικό προγραμματισμό. Η δυνατότητα EventStreams του Bacon.js βοηθά το Flowdock να διατηρεί το Μοντέλο του Κορμού και τις Συλλογές του μέχρι σήμερα.

5. Αναζήτηση κοκτέιλ

Αναζήτηση κοκτέιλ είναι μια εφαρμογή ανοιχτού κώδικα που σας δίνει την ευκαιρία να ρίξετε μια ματιά στον κώδικα μιας πολύ απλής εφαρμογής του Backbone.js. Το backend τροφοδοτείται από την Python, αλλά αυτό που μας ενδιαφέρει είναι το αρχείο script.js της εφαρμογής.

Αν εξετάσετε τον κώδικα μπορείτε να δείτε μια πολύ βασική δομή του πλαισίου Model-View- *: περιέχει ένα Μοντέλο που ορίζονται στο Κοκτέιλ class που δεν αλλάζει τις προεπιλεγμένες ρυθμίσεις της κλάσης γονέων Backbone.Model, μία Συλλογή ραχοκοκαλιάς για τα αποτελέσματα αναζήτησης και 3 προβολές Backbone, κάθε μία προσθέτει νέες μεθόδους στο Backbone.View γονική τάξη.

Εάν ρίξετε μια ματιά στο αρχείο index.html, μπορείτε να ανακαλύψετε πώς ο προγραμματιστής πρόσθεσε το Backbone.js και τις εξαρτήσεις του, Underscore.js και jQuery στο τμήμα κεφαλής. Το Underscore.js είναι η μόνη δυνατή εξάρτηση του Backbone ενώ απαιτείται jQuery εάν θέλετε να χειριστείτε το DOM με τη βοήθεια των προβολών Backbone (που είναι η περίπτωση της εφαρμογής αναζήτησης κοκτέιλ).

6. Bitbucket

Bitbucket είναι μια φιλοξενία πηγαίου κώδικα και εφαρμογή διαχείρισης κώδικα παρόμοια με την Github. Atlassian, η εταιρεία πίσω από το χρησιμοποιεί Backbone στο εμπορικό λογισμικό παρακολούθησης JIRA, το άλλο κύριο προϊόν τους.

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

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

Εάν είστε ενοχλημένοι από το ίδιο πράγμα, μπορείτε να προσθέσετε Backbone.Brace στη δική σας εφαρμογή, καθώς είναι ένα έργο ανοιχτού κώδικα που φιλοξενείται στο ίδιο το Bitbucket. Το BitBucket χρησιμοποιεί τη γλώσσα που μοτίβο Mustache ακριβώς όπως το Trello για την απόδοση προβολών Backbone στο front.

7. SoundCloud

SoundCloud είναι μια δημοφιλής πλατφόρμα διανομής ήχου όπου μπορείτε να καταγράφετε, να ανεβάζετε και να μοιράζεστε το δικό σας ήχο ή να ακούτε μουσική δωρεάν.

Οι προγραμματιστές του SoundCloud χρησιμοποίησαν το Backbone.js πρώτα ως το πλαίσιο διεπαφών της εφαρμογής για κινητά τους, αλλά τους άρεσαν τόσο πολύ που το χρησιμοποίησαν και στην πλευρά του πελάτη της ιστοσελίδας της επιφάνειας εργασίας τους. Στο Backstage Blog εξηγούν την επιλογή του πλαισίου με την ικανότητα του Backbone να παρέχουν μια σταθερή δομική βάση ενώ εξακολουθούν να παραμένουν ευέλικτες.

Η κλιμάκωση αποτελεί βασική μέριμνα για μια εφαρμογή ροής ήχου και η SoundCloud το αναγνωρίζει “έχει περισσότερη σχέση με την οργάνωση παρά με την εφαρμογή” γεγονός που καθιστά την καλά οργανωμένη αλλά ελαφριά Backbone ιδανική επιλογή για αυτούς.

Το SoundCloud χρησιμοποιεί το σύστημα σημασιολογικής σημασιολογίας Handlebars για την απόδοση προβολών Backbone στο μετωπικό.

8. AirBnB

AirBnB είναι μια εξωφρενικά επιτυχημένη αγορά στην οποία μπορείτε να βρείτε και να κάνετε κράτηση σε διαφορετικούς τύπους καταλυμάτων σε σχεδόν 200 χώρες σε όλο τον κόσμο

Η AirBnB χρησιμοποίησε για πρώτη φορά το Backbone.js στην εφαρμογή για κινητά της, όπως ακριβώς και το SoundCloud, αλλά αργότερα το χρησιμοποίησε όλο και περισσότερο στις λειτουργίες της εφαρμογής του ιστού, όπως λίστες ευχών, αντιστοιχίσεις, αναζήτηση, κοινότητες και πληρωμές. Η AirBnB αγάπησε την Backbone τόσο πολύ που δεν τα συμφώνησε μόνο για τη χρήση της στο frontend, αλλά θέλησε επίσης να καταστήσει δυνατή τη λειτουργία της βιβλιοθήκης στο backend.

Αργότερα πραγματοποίησαν την κεντρική βιβλιοθήκη Backbone server, Rendr, ανοιχτή πηγή και διατίθενται στη σελίδα Github. Το Rendr γράφεται στον Node.js και ακολουθεί τη φιλοσοφία του “επιβάλλοντας ελάχιστη δομή, επιτρέποντας στον προγραμματιστή να χρησιμοποιήσει τη βιβλιοθήκη με τον πλέον κατάλληλο τρόπο για την εφαρμογή τους” ακριβώς όπως το ίδιο το Backbone

Αν ενδιαφέρεστε περισσότερο για την τεχνολογική στοίβα της AirBnB, διαβάστε την αναρτήση του ιστολογίου τους σχετικά με το ταξίδι τους από ένα Backside Back to the Holy Grail of the ταυτόχρονη χρήση του Backbone τόσο στην πλευρά του πελάτη όσο και του διακομιστή.

9. Hulu

Hulu είναι μια εφαρμογή ροής βίντεο που σας δίνει τη δυνατότητα να παρακολουθείτε δωρεάν τηλεοπτικές εκπομπές και ταινίες, αν βρίσκεστε στις ΗΠΑ.

Ο Hulu έκανε χρήση του Backbone.js για να δημιουργήσει μια απρόσκοπτη και γρήγορη εμπειρία χρήστη για τους λάτρεις των ταινιών. Η διασύνδεση σας επιτρέπει να μετακινείτε γρήγορα μέσω της εφαρμογής με ήπια μεταβάσεις κατά την περιήγησή σας. Σπονδυλική στήλη εξοικονομεί εύρος ζώνης για τους χρήστες όπως σενάρια και ενσωματωμένα βίντεο μην επαναφορτωθείτε όλη την ώρα.

Ο Hulu τρέχει μια μηχανή Rails στο backend, και αν σας αρέσουν οι διασκεδαστικές αλλά ενημερωτικές συνομιλίες, μπορείτε να διαβάσετε πώς η ομάδα των προγραμματιστών μπλέχτηκε με το jQuery πριν τελικά αποφασίσει να αλλάξει πιο οργανωμένο πλαίσιο Backbone.

Το Backbone.js επέτρεψε στον Hulu να μετατρέψτε σταδιακά την απόδοση τους από την πλευρά του διακομιστή στην πλευρά του πελάτη αντί να κάνει μια επικίνδυνη επανεξέταση της υπάρχουσας βάσης Rails.

10. Αρκετά

Αμέτρητα είναι μια εφαρμογή αναλυτικών δεδομένων για κινητά σε πραγματικό χρόνο που σας επιτρέπει να παρακολουθείτε την απόδοση του iPhone, του Android ή του Windows Phone app σας απευθείας από το παράθυρο του προγράμματος περιήγησης.

Ρίξτε μια ματιά στον αξιόλογο κατάλογο λογισμικού ανοιχτού κώδικα που χρησιμοποιήθηκε για την ανάπτυξη της πλατφόρμας, συμπεριλαμβανομένων των superstars των τελευταίων ετών: Nginx, MongoDB, Node.js για την πλευρά του διακομιστή και φυσικά Backbone.js για το front end.

Χρησιμοποιεί πολλές φορές τη βιβλιοθήκη που επεξεργάζεται τη σημασιολογική χειρολαβή Handlebars για να καταστήσει τις προβολές Backbone που εμφανίζουν δεδομένα που έχουν προετοιμαστεί και φορτωθεί με μοντέλα Backbone. Η Countly είναι μια εφαρμογή φιλική προς τους προγραμματιστές: δεν είναι μόνο εύκολα επεκτάσιμη, αλλά και η τεκμηρίωση της παρέχει επίσης προγράμματα με tutorials όπως αυτή για πώς να δημιουργήσετε προσαρμοσμένες προσθήκες πάνω από τον κεντρικό πελάτη Backbone.

Σημείωση του συντάκτη: Αυτό γράφτηκε από την Άννα Μονού για το Hongkiat.com. Η Άννα είναι προγραμματιστής ιστοσελίδων και συγγραφέας κώδικα με ενδιαφέρον για την επιστήμη, την τεχνητή νοημοσύνη και τις καταστροφικές τεχνολογίες.