Αυτό είναι μέρος δύο από τρία (δείτε μέρος πρώτο).
Πώς λειτουργεί;
Πώς ενσωματώνεται στα εργαλεία; Χαίρομαι που ρώτησες!
Είναι επέκταση προγράμματος περιήγησης;
Έχουμε ήδη κάποιες εσωτερικές επεκτάσεις προγράμματος περιήγησης, κυρίως το Teleporter, το οποίο είναι εγκατεστημένο σχεδόν σε κάθε υπολογιστή Guardian και εμφανίζει ορισμένες πρόσθετες λειτουργίες σε διάφορα σημεία (π.χ. στον ιστότοπο και σε ορισμένα από τα εργαλεία μας) για να διευκολύνει την πλοήγηση για τους εσωτερικούς χρήστες. αλλο.
Ίσως πιστεύετε ότι το Pinboard είναι μια επέκταση προγράμματος περιήγησης. Δυστυχώς, η απελευθέρωση επεκτάσεων προγράμματος περιήγησης είναι κουραστική και αργή. Η διαδικασία είναι αρκετά περίπλοκη, διαφέρει ανάλογα με το πρόγραμμα περιήγησης και διαρκεί ώρες/ημέρες για να παραδοθεί στους χρήστες. Επομένως, δεν είναι πραγματικά κατάλληλο, ειδικά όταν το έργο ήταν σε ενεργό ανάπτυξη, συχνά με πολλές εκδόσεις την ημέρα.
Είναι βιβλιοθήκη;
Ίσως σκεφτείτε, μια βιβλιοθήκη που εξαρτάται από τα άλλα εργαλεία, έχουμε πολλά προηγούμενα γι ‘αυτό, ειδικά στον τομέα των εργαλείων έχουμε τα σχετικά μοντέρνα “prosemirror-elements”, μια ωραία βιβλιοθήκη TypeScript React στην οποία όλα τα διαφορετικά “στοιχεία “, που αποτελούν άρθρα κ.λπ., υλοποιούνται (π.χ. στοιχείο κειμένου, στοιχείο εικόνας, στοιχείο βίντεο, στοιχείο tweet κ.λπ.). Αυτή η βιβλιοθήκη χρησιμοποιείται στη συνέχεια σε διάφορα μέρη, κυρίως στο πρόγραμμα επεξεργασίας κειμένου Composer. Η εφαρμογή κεντρικού υπολογιστή (Composer) είναι γραμμένη σε Angular και επομένως απαιτεί πολύ κώδικα κόλλας για τη σύνδεση μεταβλητών στο React. Το ίδιο ισχύει και για άλλα εργαλεία, και ακόμη κι αν είναι κατασκευασμένα με React (π.χ. το εργαλείο βίντεο), είναι απίθανο να έχουν την ίδια έκδοση κ.λπ.
Ακόμη και με μια ωραία βιβλιοθήκη όπως αυτή που χρησιμοποιεί σημασιολογική κοινή χρήση, κάθε φορά που κάνετε μια αλλαγή πρέπει να αυξάνετε την εξάρτηση σε όλες τις εφαρμογές που καταναλώνουν. Επομένως, πρέπει να λάβετε υπόψη το χρόνο δημιουργίας του κώδικα βιβλιοθήκης, στη συνέχεια να απελευθερώσετε τη διάδοση, μετά τον χρόνο κατασκευής της εφαρμογής φιλοξενίας και μετά τον χρόνο έκδοσης. Στην περίπτωση που αναφέρθηκε παραπάνω, πρόκειται για ένα ταξίδι μετ’ επιστροφής τουλάχιστον 30 λεπτών, το οποίο δεν ήταν πραγματικά κατάλληλο για Pinboard.
Αντίθετα, είναι το δικό του θηρίο!
… είναι η γραμμή μέσα composer.gutools.co.ukοι οποίες:
-
Είναι μια απλή ετικέτα σεναρίου που φορτώνει pinboard.loader.js εκτός pinboard.gutools.co.uk (π.χ. “bootstrapping lambda” μέσω μιας πύλης API). Το pinboard.loader.js δεν είναι ένα στατικό στοιχείο, αλλά μάλλον ένα τελικό σημείο που δημιουργεί μια μικρή ποσότητα JavaScript εν κινήσει και επομένως ρητά δεν αποθηκεύεται στην κρυφή μνήμη.
-
Προτού απαντήσει, ελέγχει το cookie Panda του χρήστη (κοινός έλεγχος ταυτότητας μεταξύ εργαλείων που βασίζονται στον τομέα ανώτατου επιπέδου. Λάβετε υπόψη ότι το Pinboard και το Composer είναι και οι δύο υποτομείς του ). guttools.co.uk) και ελέγχει την άδεια τοίχου, αναζητά τις λεπτομέρειες σύνδεσης/URL του AppSync και, τέλος, δημιουργεί ένα διακριτικό ελέγχου ταυτότητας για το AppSync.
-
Το επιστρεφόμενο JS ουσιαστικά λέει στην κεντρική σελίδα να προσθέσει άλλη ετικέτα σεναρίου για φόρτωση. Pinboard.main.[HASH].js Αυτό είναι το μοναδικό πιο σημαντικό πακέτο για την εφαρμογή πίνακα ανακοινώσεων, το περιεχόμενο της οποίας είναι το ίδιο για όλους και έχει ένα κατακερματισμό στο όνομα, ώστε να μπορεί να αποθηκευτεί στην προσωρινή μνήμη επ’ αόριστον.
-
Όταν φορτωθεί αυτό το σενάριο, θα κληθεί Τοποθέτηση pinboard Μεταβίβαση των λεπτομερειών σύνδεσης και του διακριτικού, το οποίο με τη σειρά του εμφανίζει τη μικρή αιωρούμενη σταγόνα καρφίτσας κ.λπ.
Μαγεία!
Έτσι μια πολύ εύκολη ενσωμάτωση στην εφαρμογή κεντρικού υπολογιστή (μία γραμμή) και το πιο σημαντικό, αποσυνδέει τα κοινόχρηστα στοιχεία από τον πίνακα pinboard και την εφαρμογή υποδοχής.
Τι γίνεται τώρα με τα μικρά κουμπιά “Προσθήκη στο 📌” που βλέπουμε στο πλέγμα στο βίντεο και τα οποία φαίνεται να είναι πιο βαθιά ενσωματωμένα στο εργαλείο υποδοχής; Είναι επίσης πολύ ελαφριά όσον αφορά το σημείο ενσωμάτωσης.
Εδώ μπορείτε να δείτε τον κώδικα προτύπου στο Grid (Angular), μια ετικέτα “χειρισμού στοιχείων” που δεν έχει νόημα για την εφαρμογή κεντρικού υπολογιστή και δεν εμφανίζει τίποτα οπτικό όταν ο πίνακας δεν έχει φορτωθεί (π.χ. BBC Who). (Ξεκινήσατε να χρησιμοποιείτε το πλέγμα τα τελευταία χρόνια) διαφορετικά η πλακέτα μπορεί να έχει σπάσει. Αυτά είναι όλα όσον αφορά το πλέγμα.
Μόλις φορτωθεί η πλακέτα, αυτός ο κωδικός θα εκτελεστεί…
…κάτι που κάνει αυτές τις λαβές περιουσιακών στοιχείων πολύ εύχρηστες…
… και τα αποθηκεύει στην πολιτεία. Στη συνέχεια, το Pinboard ενημερώνεται για τυχόν αλλαγές στην εφαρμογή κεντρικού υπολογιστή (σημειώστε ότι το Grid είναι γραμμένο σε Angular, το οποίο έχει διαφορετικό κύκλο ζωής απόδοσης από το React στο Pinboard). Αυτό γίνεται χρησιμοποιώντας το MutationObserver, ένα τυπικό API DOM. Μόλις έχει αναφορές στους κόμβους DOM αυτών των χειρισμών στοιχείων, κατά την απόδοση απλώς επαναλαμβάνει και δημιουργεί στιγμιότυπα ορισμένα στοιχεία…
…τα οποία είναι συσκευασμένα σε React Portal…
…μια βασική αλλά λιγότερο γνωστή δυνατότητα του React που σας επιτρέπει να μεταφέρετε στοιχεία DOM εκτός του στοιχείου στο οποίο είναι προσαρτημένη η εφαρμογή React.
Το τελευταίο πράγμα που θέλουμε να αναφέρουμε είναι ότι χρησιμοποιούμε ένα άλλο τυπικό αλλά λιγότερο γνωστό τμήμα του DOM API: Shadow DOM. Αυτό ουσιαστικά σάς επιτρέπει να αποθηκεύετε το CSS από το κύριο DOM. Όλα τα οπτικά στοιχεία στον πίνακα βρίσκονται σε ένα ή περισσότερα σκιώδη DOM για να απομονωθούν τα στυλ και να αποτραπεί η σύγχυση της εφαρμογής κεντρικού υπολογιστή με τα στυλ του πίνακα ή το αντίστροφο.
GraphQL (μέσω AWS AppSync)
Το GraphQL σάς επιτρέπει να κάνετε περίληψη σε πολλές πηγές δεδομένων και να παρουσιάσετε ένα μόνο (και αρκετά απλό) σχήμα στον πελάτη. Εκτός από τους τύπους που αντιπροσωπεύουν τα δεδομένα, έχετε τα εξής Ανακρίνω (για ανάγνωση δεδομένων), Μεταλλάξεις (για αλλαγή δεδομένων) και Συνδρομές (για να μάθετε για αυτές τις μεταλλάξεις σε πραγματικό χρόνο). Ο όρος “συνδρομές” ήταν ζωτικής σημασίας για την απόφασή μας να χρησιμοποιήσουμε το GraphQL/AppSync καθώς κατασκευάζαμε μια εφαρμογή συνεργασίας σε πραγματικό χρόνο – αυτές οι συνδρομές είναι ουσιαστικά υποδοχές ιστού κάτω από την κουκούλα, αλλά έχουν καλή αφαίρεση για εσάς.
Το AppSync είναι GraphQL που διαχειρίζεται AWS, επομένως δεν χρειάζεται να ανησυχείτε για την παροχή διακομιστών, την ενημέρωση του GraphQL κ.λπ. Συνδέεται με διάφορες πηγές δεδομένων μέσω “resolvers”. Μπορείτε να τα χρησιμοποιήσετε για να συνδεθείτε με όλα τα είδη. Lambdas, http endpoints, DynamoDB, ακόμη και RDS. Αυτά τα προγράμματα επίλυσης διαθέτουν προαιρετική αντιστοίχιση αιτημάτων και απαντήσεων, αλλά είναι σε μια μη ιδιαίτερα φιλική προς το χρήστη ιδιόκτητη γλώσσα, επομένως χρησιμοποιούμε απλώς λάμδα και απλώς αναλύουμε το ωφέλιμο φορτίο JSON από το AppSync στο λάμδα και απαντάμε με λίγο JSON – κάτι που είναι ωραίο και ωφέλιμο από αυτόν τον κοινό κώδικα κ.λπ.
Υπάρχουν πολλές επιλογές ελέγχου ταυτότητας. Κλειδιά API, AWS Cognito κ.λπ. αλλά έχουμε μόνο ένα προσαρμοσμένο λάμδα. Από την εμπειρία μου, το AppSync ήταν υπέροχο και πρέπει οπωσδήποτε να το ελέγξετε και ίσως να το εξετάσετε για κάποια έργα. Ωστόσο, αξίζει να αναφέρουμε ότι δεν είναι το φθηνότερο, και ενώ δεν θα το έλεγα ακριβό, μάλλον δεν θα το χρησιμοποιούσα για σκοπούς που σχετίζονται με τον αναγνώστη, καθώς είναι πληρωμή ανά αίτημα.
Αυτό είναι μέρος δύο από τρία (δείτε μέρος πρώτο).
Πιστώσεις
Το Pinboard κατασκευάστηκε από Τομ Ρίτσαρντς, Τζένι Γκράχαμ Τζόουνς, Θάλεια Ασημένια, Άντριου Νόβακ, Φίλιπ Μπάρον & Ara Cho με πρόσθετες συνεισφορές προγραμματιστή από Φρεντ Ο’ Μπράιαν & Σαμάνθα Γκότλιμπ. Σχεδιασμός προϊόντος από Ana Prada και την κατεύθυνση του προϊόντος του Κάλβιν Ντίκσον. Ταυτόχρονα υποστηρίζεται από την υπόλοιπη ομάδα παραγωγής περιεχομένου στα τμήματα προϊόντων και μηχανικών. Χωρίς να ξεχνάμε τη συμβολή, τον χρόνο και την προσπάθεια αμέτρητων δημοσιογράφων της Guardian που βοήθησαν στη διαμόρφωση του Pinboard.