Η δημιουργία και διαχείριση των σχεδιαστικών παραλλαγών σε [[LFT:0]]Nx[[[LFT:1]]] είναι μια θεμελιώδης δυνατότητα για ομάδες που χτίζουν κλιμακούμενες, πολυ-εμπειρίες εφαρμογές μέσα σε ένα μονορεπ. Παραλλαγές σχεδιασμού ⁇ είτε για δοκιμές A/B, είτε για σημαίες χαρακτηριστικών, θέμα με το εμπορικό σήμα, είτε για προσωπικές διεπαφές ⁇ απαιτούν μια δομημένη προσέγγιση για την αποφυγή της επικάλυψης κώδικα, τη διατήρηση της συνέπειας και τη διατήρηση της κατασκευής χρόνους γρήγορα. Nx, ως ένα έξυπνο εργαλείο monorepo με προηγμένη οργάνωση και την ευαισθητοποίηση γραφημάτων εξάρτησης, παρέχει αρκετές αποδεδειγμένες τεχνικές για την αποτελεσματική διαχείριση των σχεδιαστικών παραλλαγών.

Κατανόηση των Παραλλαγές Σχεδίου σε Nx

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

Οι παραλλαγές σχεδιασμού επιτρέπουν τη χρήση περιπτώσεων όπως:

  • A/B δοκιμή ⁇ Σερβίροντας διαφορετικά στυλ ή διατάξεις κουμπιών στις κοόρτεις των χρηστών.
  • Λευκή σήμανση ⁇ Κάθε πελάτης παίρνει ένα προσαρμοσμένο χρωματικό σχήμα και λογότυπο.
  • Προεπισκόπηση χαρακτηριστικών ⁇ Εκπόνηση νέου σχεδιασμού σε ποσοστό χρηστών.
  • Ειδικά για Platform UIs ⁇ Κινητό έναντι επιφάνειας εργασίας, ή λειτουργία φωτός/σκοτεινού.

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

Μέθοδοι για τη δημιουργία των παραδειγμάτων σχεδιασμού

1. Χρησιμοποιώντας τα αρχεία περιβάλλοντος και τις μεταβλητές κατασκευής χρόνου

Μία από τις απλούστερες και πιο αξιόπιστες μεθόδους είναι η έγχυση πληροφοριών παραλλαγής σχεδιασμού μέσω αρχείων περιβάλλοντος. Το Nx υποστηρίζει τις περιβαλλοντικές ρυθμίσεις που χρησιμοποιούν [[LFT:0]] αρχεία και το [[LFT:1] αντικείμενο στο [[LFT:2]] ή [[LFT:3]]].

Για παράδειγμα, μπορεί να έχετε:

  • ⁇ Περιέχει
  • ⁇ Περιέχει

Στη συνέχεια, στο συστατικό σας ή CSS, παραπομπή [[LFT:8]] (ή το Nx-συμβατό [[[LFT:9]]] πρόθεμα). Αυτή η προσέγγιση είναι καθαρή και λειτουργεί με οποιοδήποτε πλαίσιο του περιβάλλοντος. Για παραλλαγές στυλ, μπορείτε υπό όρους να εισάγετε ένα φύλλο στυλ θέματος:

if (theme === 'corporate') {
 import('./corporate-theme.scss');
} else {
 import('./startup-theme.scss');
}

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

2. Υπερβολές και στυλ με CSS προσαρμοσμένες ιδιότητες

Για παραλλαγές που μπορούν να αλλάξουν χρόνο, CSS προσαρμοσμένες ιδιότητες[[LFT:1]] (μεταβλητές CSS) είναι μια ισχυρή, χαμηλού κόστους λύση. Καθορίστε ένα σύνολο βασικών μεταβλητών σε ένα κοινό φύλλο στυλ, στη συνέχεια παρακάμψτε τις ανά παραλλαγή. Σε έναν χώρο εργασίας Nx, μπορείτε να δημιουργήσετε μια βιβλιοθήκη [[LFT:11]] που εξάγει αντικείμενα θέματος (π.χ., , [[LFT:13]]]).

Ενσωματώστε με τη διαδικασία κατασκευής του Nx εισάγοντας το κατάλληλο θέμα στο σημείο εισόδου της εφαρμογής σας. Για την Αντιδραση ή τη Γωνιακή, μπορείτε να χρησιμοποιήσετε ένα πλαίσιο/παροχέα για να εφαρμόσετε δυναμικά μια τάξη θέματος στο ριζικό στοιχείο:

.theme-corporate {
 --primary-color: #0055a5;
 --secondary-color: #ff6600;
}
.theme-startup {
 --primary-color: #6c63ff;
 --secondary-color: #ff6584;
}

Στη συνέχεια, σε συστατικά στοιχεία, παραπομπή . Αυτή η προσέγγιση είναι ελαφριά και λειτουργεί όμορφα με [[LFT:0]]Tailwind CSS[[LFT:1]] αν χρησιμοποιήσετε τη στρατηγική [[LFT:16]] ⁇ να την επεκτείνετε για να υποστηρίξετε πολλαπλά θέματα.

Για πιο σύνθετες ρυθμίσεις CSS-in-JS (π.χ., στυλ-συνιστώσες ή Emotion), δημιουργήστε ένα αντικείμενο θέματος και περάστε το μέσω React context ή Vue παρέχει/ενέσετε. Nx’s Library limitage leave you share this theme logic cross apps without coplycture.

3. Παραλλαγές συστατικών μέσω Props και Slots

Όταν οι διαφορές σχεδιασμού υπερβαίνουν τα χρώματα και το διάστημα ⁇ όπως η αναδιάταξη διάταξης ή πρόσθετα στοιχεία ⁇ η μόχλευση [[LFT:0]] των συστατικών παραλλαγών[[LFT:1]] μέσω των στηρίγματα (React) ή των υποδοχών (Vue) είναι αποτελεσματική. Για παράδειγμα, ένα [[LFT:17]] στοιχείο μπορεί να δεχτεί ένα [[LFT:18]] στήριγμα:

function Button({ variant, children }) {
 const className = variant === 'primary' ? styles.primary : styles.secondary;
 return <button className={className}>{children}</button>;
}

Nx σας ενθαρρύνει να κρατήσει αυτά τα συστατικά σε μια κοινόχρηστη βιβλιοθήκη UI. Όταν οι παραλλαγές γίνονται πολυάριθμες, σκεφτείτε να χρησιμοποιήσετε ένα [[LFT:0]]διαφορετικό μητρώο[[LFT:1]] μοτίβο: αποθηκεύστε τις διαμορφώσεις παραλλαγής σε ένα αντικείμενο JSON και χαρτογραφήστε τα σε εξαρτήματα. Αυτή η μέθοδος είναι καθαρή και δοκιμαστή.

Για μεγαλύτερες διαφορές, Η σύνθεση είναι καλύτερη από τους υπό όρους. Δημιουργήστε ξεχωριστά υποσυστήματα (π.χ., ], ]) που μοιράζονται μια κοινή βάση. Χρησιμοποιήστε το γράφημα εξάρτησης του Nx για να διασφαλίσετε ότι η βιβλιοθήκη βάσης μοιράζεται και αλλάζει μόνο όταν είναι απαραίτητο.

4. Χαρακτηριστικές σημαίες και εναλλαγή χρόνου λειτουργίας

Για τις σχεδιαστικές παραλλαγές που πρέπει να αλλάξουν πλευρά του διακομιστή ή για ένα υποσύνολο χρηστών, η ενσωμάτωση μιας υπηρεσίας ειδικής σημαίας (όπως [[LFT:0]]LaunceDarkly[[LFT:1]] ή [[LFT:2]]] Unleash[[LFT:3]]]]) με Nx είναι μια ισχυρή λύση. Δημιουργήστε μια αφιερωμένη [[LFT:22]] βιβλιοθήκη που αφάγει τον πάροχο της σημαίας. Κάθε εφαρμογή εισάγει αυτή τη βιβλιοθήκη και ελέγχει σημαίες για να αποδώσει διαφορετικά σχέδια.

Παράδειγμα με τη χρήση ενός απλού γάντζου React:

import { useFeatureFlag } from '@myorg/feature-flags';
function HomePage() {
 const newLayout = useFeatureFlag('new-layout');
 return newLayout ? <NewLayout /> : <OldLayout />;
}

Η διαμόρφωση του έργου Nx σας επιτρέπει να κοροϊδεύετε σημαίες κατά τη διάρκεια της ανάπτυξης και των δοκιμών. Μπορείτε να δημιουργήσετε ξεχωριστούς στόχους Nx για διαφορετικά σενάρια σημαίας:

"targets": {
 "serve-with-flags": { ... },
 "test-flags": { ... }
}

Αυτό διατηρεί την εναλλακτική λογική σας απομονωμένη και εύκολη στην εναλλαγή χωρίς να επανατοποθετήσει ολόκληρη την εφαρμογή.

Διαχείριση των Παραλλαγών Σχεδίου

Οργανώστε τις παραλλαγές με μια σταθερή δομή φακέλων

Κρατήστε τον χώρο εργασίας σας τακτοποιημένο ομαδοποιώντας τα σχετικά με τις παραλλαγές αρχεία. Για παράδειγμα:

libs/
 ui/
 button/
 src/
 lib/
 variants/
 primary/
 secondary/
 ghost/
 index.ts

Κάθε φάκελος παραλλαγής περιέχει τα δικά του στυλ, δοκιμές και ιστορίες. Αυτή η προσέγγιση καθιστά εύκολη την εκτέλεση [[LFT:26]] μόνο στην αλλαγμένη παραλλαγή. Nx’s [[LFT:0]] tags[[LFT:1]] (π.χ., [[LFT:27]]]], [[LFT:28]]]) σας επιτρέπουν να επιβάλετε όρια ώστε μια εφαρμογή που χρησιμοποιεί “πρωτογενή” να μην μπορεί κατά λάθος να εξαρτάται από “φαντάσματα” εσωτερικά.

Προσβλημένες Εντολές του Nx για Παραλλαγές

Όταν τροποποιήσετε μια παραλλαγή, δεν θέλετε να ξαναχτίσετε ή να δοκιμάσετε κάθε εφαρμογή. Nx’s [[LFT:29]], [[LFT:30]], και [[LFT:31]] ανιχνεύουν αυτόματα ποια έργα επηρεάζονται με βάση το γράφημα εξάρτησης. Αυτό είναι ιδιαίτερα ισχυρό σε μια μονορεπώ με πολλές παραλλαγές σχεδιασμού ⁇ μόνο η παραλλαγή που άλλαξε ενεργοποιεί τον αγωγό του.

Για παράδειγμα, αν ενημερώσετε μόνο την «πρωτογενή» παραλλαγή κουμπί, Nx θα προγραμματίσει χτίζει για βιβλιοθήκες και εφαρμογές που εξαρτώνται από αυτή την παραλλαγή, αφήνοντας τους άλλους ανέγγιχτους. Αυτό εξοικονομεί σημαντικό χρόνο CI.

Παραλλαγές ονομάτων Συνεπώς και διαφορές εγγράφων

Τυποποιημένες συμβάσεις ονοματοδοσίας όπως , , ], ή , καθιστούν προβλέψιμες τις παραλλαγές. Χρησιμοποιήστε μια ] μέσα σε κάθε φάκελο παραλλαγής για να εξηγήσετε το σκοπό, τις οπτικές διαφορές και πότε να χρησιμοποιήσετε το καθένα. Για κοινές μάρκες σχεδιασμού, διατηρήστε μια ενιαία πηγή αλήθειας ⁇ όπως μια βιβλιοθήκη ⁇ που όλες οι παραλλαγές αναφέρονται.

Αυτόματη δοκιμή παραλλαγής

Χρησιμοποιήστε τις γεννήτριες δοκιμών Nx για να δημιουργήσετε μονάδες δοκιμών για κάθε παραλλαγή. Ενσωματώστε εργαλεία δοκιμής οπτικής παλινδρόμησης όπως το Χρωματικό ή το Πέρσι. Στον αγωγό CI σας, χρησιμοποιήστε [[LFT:39]] για να εκτελέσετε οπτικές δοκιμές μόνο για τροποποιημένες παραλλαγές. ⁇ [[LFT:0]] Lighthouse CI[[LFT:1]] για να συγκρίνετε τις επιδόσεις σε διάφορες παραλλαγές.

Για παράδειγμα, προσθέστε έναν ξεχωριστό στόχο για δοκιμές παραλλαγής:

"test:variant": {
 "executor": "@nrwl/jest:jest",
 "options": {
 "jestConfig": "libs/ui/button/variants/primary/jest.config.ts"
 }
}

Στη συνέχεια ενορχήστρωσε με ένα σενάριο κελύφους ή Nx run-commands για να δοκιμάσει όλες τις παραλλαγές.

Βέλτιστες πρακτικές για τη διαχείριση των παραδειγμάτων σχεδιασμού

  • Διατηρήστε μια κοινή βιβλιοθήκη για το σχεδιασμό των σημείων για χρώματα, διαπόσταση, τυπογραφία.
  • Χρησιμοποιήστε το γράφημα έργου της Nx για να απεικονίσετε εξαρτήσεις μεταξύ των παραλλαγών και των εφαρμογών. Αποφύγετε κυκλικές εξαρτήσεις.
  • Έλεγχος στροφών οι παραλλαγές σας. Χρησιμοποιήστε ετικέτες στο Git (π.χ., ) αν χρειάζεται να επιστρέψετε μια συγκεκριμένη παραλλαγή.
  • Κύκλος ζωής παραλλαγής εγγράφων ⁇ Πότε αποτιμάται μια παραλλαγή; Πόσο καιρό παραμένει ενεργό; Αυτοματοποιημένος καθαρισμός με γεννήτριες Nx (π.χ., ).
  • Διατηρήστε την εναλλακτική λογική εκτός του βασικού επιχειρηματικού κώδικα. Χρησιμοποιήστε τα συστατικά υψηλότερης τάξης, mixins, ή διακοσμητές για να διαχωρίσετε τις ανησυχίες.
  • Επιλέξτε τη σωστή κοκκιοποίηση[ ⁇ Δεν χρειάζεται κάθε μικρή αλλαγή στυλ μια παραλλαγή.

Συμπέρασμα

Οι παραλλαγές σχεδιασμού είναι μια πραγματικότητα στη σύγχρονη ανάπτυξη ιστού και η Nx παρέχει το εργαλείο για τη διαχείρισή τους χωρίς να θυσιάζεται η ταχύτητα κατασκευής ή η ποιότητα κώδικα. Είτε επιλέγετε αρχεία περιβάλλοντος κατασκευής, προσαρμοσμένες ιδιότητες CSS χρόνου λειτουργίας, συνιστώσες συστατικών, ή σημαίες χαρακτηριστικών, το κλειδί είναι να παραμείνετε συνεπείς και να αξιοποιήσετε τις δυνατότητες μονορεπών της Nx ⁇ επηρεαζόμενες εντολές, όρια έργου και γραφικά εξάρτησης. Με την υιοθέτηση αυτών των μεθόδων και βέλτιστων πρακτικών, μπορείτε να δημιουργήσετε κλιμακούμενες, ευέλικτες εφαρμογές που προσαρμόζονται σε διαφορετικά ακροατήρια και επιχειρηματικές ανάγκες. Για περαιτέρω ανάγνωση, εξερευνήστε την τεκμηρίωση Nx μεταβλητών περιβάλλοντος[, Tailwind CSS theming, και ]Lutchedark features].