Web Components με το Stencil.js - είναι ο καλύτερος τρόπος για να δημιουργήσετε επαναχρησιμοποιήσιμα στοιχεία UI το 2018;

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

Αλλά περιμένετε, ποια είναι τα στοιχεία του διαδικτύου;

Τα Web Components είναι μια σουίτα διαφορετικών τεχνολογιών που σας επιτρέπουν να δημιουργήσετε επαναχρησιμοποιήσιμα προσαρμοσμένα στοιχεία διεπαφής χρήστη - με τη λειτουργικότητα που είναι ενσωματωμένα μακριά από τον υπόλοιπο κώδικα - και να τα χρησιμοποιήσετε στις εφαρμογές ιστού σας.
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Εκατομμύρια άνθρωποι σε όλο τον κόσμο χρησιμοποιούν ήδη αυτήν την τεχνολογία κάθε μέρα. Η δεύτερη πιο δημοφιλής ιστοσελίδα του προηγούμενου έτους, youtube.com, βασίζεται σε στοιχεία Web. Η καρτέλα "Ιστορικό" στο Chrome είναι γραμμένη χρησιμοποιώντας τη βιβλιοθήκη Polymer, μια συλλογή από Web Components! Σύμφωνα με τη Wikipedia, τα στοιχεία του διαδικτύου παρουσιάστηκαν για πρώτη φορά από τον Alex Russell στο Fronteers Conference 2011 για πρώτη φορά.

Λίγα λόγια για τις τεχνολογίες που εμπλέκονται

Σκιά DOM

Η ενσωμάτωση είναι ίσως το κλειδί για την επιτυχία όταν σκέφτεστε για τη δημιουργία επαναχρησιμοποιήσιμων στοιχείων - η δυνατότητα να διαχωρίζετε τις λεπτομέρειες, το στυλ και την εφαρμογή από το υπόλοιπο έγγραφο είναι αυτό που κάνει την ιδέα των Web Components τόσο ελκυστική. Το API Shadow DOM κάνει το τέχνασμα. Είναι το API του προγράμματος περιήγησης, είναι αυτό που σας επιτρέπει να δημιουργήσετε το υποσύνολο scoped μέσα στο στοιχείο DOM.

Μπορείτε να επηρεάσετε τους κόμβους στο σκιασμένο DOM με τον ίδιο ακριβώς τρόπο όπως τους μη σκιώδεις κόμβους - για παράδειγμα την προσάρτηση παιδιών ή τις ιδιότητες ρύθμισης, το styling μεμονωμένων κόμβων χρησιμοποιώντας το element.style.foo ή την προσθήκη στυλ σε ολόκληρο το δέντρο DOM σκιάς μέσα σε ένα < style> στοιχείο. Η διαφορά είναι ότι κανένας από τον κώδικα μέσα σε μια DOM σκιά δεν θα επηρεάσει οτιδήποτε έξω από αυτό, επιτρέποντας την εύχρηστη ενθυλάκωση.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Το Shadow DOM έχει δύο λειτουργίες: ανοιχτό και κλειστό. Η κλειστή λειτουργία του Shadow DOM παρέχει στους συντάκτες των στοιχείων τον έλεγχο του τρόπου με τον οποίο εκτίθεται η ρίζα σκιάς της συνιστώσας τους μέσω του js. Μπορείτε να διαβάσετε περισσότερα για το shadow DOM εδώ.

Σχεδίαση

Οι μορφές στο σκιά DOM έχουν σκοπό και δεν διαρρέουν. Το Global CSS θα επηρεάσει τα στοιχεία του Shadow DOM όπως κάθε άλλο στοιχείο html - με κληρονομικότητα των ιδιοτήτων, οπότε η ρύθμιση γραμματοσειράς-οικογένειας στο σώμα θα κληρονομηθεί από το προσαρμοσμένο συστατικό στοιχείο. Η ρύθμιση των στυλ σε * θα επηρεάσει επίσης το στοιχείο ριζωμένου DOM Shadow, καθώς επηρεάζει όλα τα στοιχεία. Εάν θέλετε να επιτρέψετε στους χρήστες των συστατικών σας να στυλιστούν το στοιχείο, θα πρέπει να χρησιμοποιήσετε ιδιότητες CSS.

Προσαρμοσμένα στοιχεία

Με προσαρμοσμένα στοιχεία μπορούμε να δημιουργήσουμε προσαρμοσμένες ετικέτες html ή να βελτιώσουμε τις υπάρχουσες ετικέτες και εξαρτήματα. Χάρη σε αυτή την τεχνολογία, τα συστατικά του ιστού θα μοιάζουν με κανονικές ετικέτες html, για παράδειγμα το .

Οι βιβλιοθήκες συνεργάζονται με τα συστατικά του ιστού

Δημιουργώντας Web Components με βανίλια js είναι φυσικά πιθανό (πρέπει να θυμόμαστε για το polyfilling για browsers χωρίς υποστήριξη για τις απαιτούμενες τεχνολογίες), αλλά η εγγραφή εξαρτημάτων με απλή js μπορεί να είναι δύσκολη και απαιτεί πολλούς κωδικούς boilerplate. Αυτό είναι όπου οι βιβλιοθήκες διαδικτυακών εξαρτημάτων έρχονται χρήσιμες. Δεν τα χρειάζεστε, αλλά η προσπάθεια δημιουργίας έτοιμων για παραγωγή προϊόντων Web Components θα είναι λιγότερο επώδυνη χρησιμοποιώντας ένα από αυτά.

Πολυμερές

Αυτή είναι η πιο δημοφιλής βιβλιοθήκη Web Components, που δημιουργήθηκε και χρησιμοποιήθηκε σε μεγάλο βαθμό από την Google. Παρέχει απλό API για τη δημιουργία στοιχείων. Η έκδοση 3.0, η οποία θα αποσταλεί φέτος θα χρησιμοποιήσει lit-html, που φαίνεται να είναι ωραίος τρόπος για να δημιουργήσετε html σε js.

Skate.js

Το Skate.js ισχυρίζεται ότι είναι μια λειτουργική αφαίρεση των προτύπων του Web Components. Το ενδιαφέρον κομμάτι είναι ότι σας επιτρέπει να χρησιμοποιήσετε πολλαπλές βιβλιοθήκες προβολής, συμπεριλαμβανομένων των lit-html, preact και ακόμη και να αντιδράσετε.

Stencil.js

Το Stencil.js είναι σχετικά νέο compiler του Web Components που δημιουργήθηκε από την Ιωνική ομάδα. Χρειάζονται δημοφιλείς σύγχρονες έννοιες ανάπτυξης ιστοσελίδων (όπως Virtual DOM, Async rendering, ροή αντιδραστικών συμβάντων και TSX) και δημιουργούν καθαρό, βασισμένο στον πρότυπο κώδικα web component.

Δημιουργία στοιχείων Web με το Stencil.js

Θα ήθελα να σας πω λίγα περισσότερα σχετικά με τη δημιουργία του Web Components με το Stencil.js. Γιατί έχω επιλέξει αυτή τη βιβλιοθήκη; Κυρίως εξαιτίας της ενσωματωμένης υποστήριξης τύπου Tyescript και της χρήσης αντιδραστικών μοτίβων που γνωρίζω από την εμπειρία γωνίας και αντιδράσεων μου, και βεβαίως την προσέγγιση με βάση το stencil-is-not-a-framework. Το Stencil.js ισχυρίζεται ότι αποτελεί απλώς έναν μεταγλωττιστή Web Components και τα συστατικά που δημιουργούνται είναι vanilla js - small και fast, επιπλέον μπορούν να εισαχθούν χρησιμοποιώντας την ετικέτα