Καταγραφή αρχιτεκτονικής απόφασης: πλαίσιο CSS

Περιεχόμενα:

• Περίληψη
  • Ζήτημα
  • Απόφαση
  • Κατάσταση
• Λεπτομέρειες
  • Παραδοχές
  • Περιορισμοί
  • Θέσεις
  • Επιχείρημα
  • Επιπτώσεις
• Σχετικά
  • Σχετικές αποφάσεις
  • Σχετικές απαιτήσεις
  • Σχετικά τεχνουργήματα
  • Σχετικές αρχές
• Σημειώσεις

Περίληψη

Ζήτημα

Θέλουμε να χρησιμοποιήσουμε ένα πλαίσιο CSS για τη δημιουργία των διαδικτυακών εφαρμογών μας:

• Θέλουμε η εμπειρία χρήστη να είναι γρήγορη και αξιόπιστη, σε όλα τα δημοφιλή προγράμματα περιήγησης και μεγέθη οθόνης.

• Θέλουμε ταχεία επανάληψη στη σχεδίαση, τη διάταξη, το UI/UX κ.λπ.

• Θέλουμε προσαρμοστικές (responsive) εφαρμογές, ειδικά για μικρότερες οθόνες όπως σε κινητές συσκευές, μεγαλύτερες οθόνες όπως σε πανοραμικές 4K και δυναμικές οθόνες όπως περιστρεφόμενες οθόνες.

Απόφαση

Αποφασίστηκε το Bulma.

Κατάσταση

Αποφασίστηκε το Bulma. Είμαστε ανοικτοί σε νέες επιλογές πλαισίων CSS όταν εμφανίζονται.

Λεπτομέρειες

Παραδοχές

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

Οι τυπικές σύγχρονες εφαρμογές ιστού μειώνουν/εξαλείφουν τη χρήση του jQuery για πολλούς λόγους:

• Η σύγχρονη JavaScript εισάγει σταδιακά πολλές δυνατότητες που παρείχε το jQuery, οπότε το jQuery χρειάζεται λιγότερο, και υπάρχουν καλύτερες/ταχύτερες/μικρότερες μονάδες που παρέχουν συγκεκριμένες υλοποιήσεις

• Η ευρεία προσέγγιση του jQuery είναι ο άμεσος χειρισμός του DOM, που αποτελεί αντι-μοτίβο για τα σύγχρονα πλαίσια JavaScript (π.χ. React, Vue, Svelte)

• Το jQuery παρεμβαίνει στον εαυτό του αν φορτωθεί δύο φορές κ.λπ.

Περιορισμοί

Αν επιλέξουμε ένα πλαίσιο CSS που χρησιμοποιεί jQuery, τότε είμαστε υποχρεωμένοι να εισάγουμε το jQuery. Για παράδειγμα, το Semantic UI χρησιμοποιεί jQuery και το Tachyons όχι.

Αν επιλέξουμε ένα πλαίσιο CSS που είναι ελάχιστο, τότε παραιτούμαστε από στοιχεία του πλαισίου που μπορεί να θέλουμε τώρα ή σύντομα. Για παράδειγμα, το Semantic UI παρέχει καρουζέλ εικόνων και το Tachyons όχι.

Θέσεις

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

Εξετάσαμε πολλά πλαίσια CSS με γρήγορη διαλογή σε σύντομη λίστα: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons κ.λπ. Οι δύο επιλογές μας για βαθύτερη αναθεώρηση είναι το Semantic UI (επειδή έχει την πιο σημασιολογική προσέγγιση) και το Bulma (επειδή έχει την ελαφρύτερη προσέγγιση που παρέχει τα στοιχεία που θέλουμε τώρα).

Εξετάσαμε το Semantic UI. Παρέχει πολλά στοιχεία, συμπεριλαμβανομένων αυτών που θέλουμε για το έργο μας: καρτέλες, πλέγματα, κουμπιά κ.λπ. Κάναμε πιλοτική εφαρμογή με το Semantic UI με δύο τρόπους: χρησιμοποιώντας τυπικά αρχεία CDN και χρησιμοποιώντας αποθετήρια NPM. Πετύχαμε με το Semantic UI σε στατική σελίδα HTML, αλλά δεν πετύχαμε εντός του χρονικού μας ορίου να χτίσουμε ένα SPA JavaScript (κυρίως λόγω προβλημάτων φόρτωσης του jQuery). Ανακαλύψαμε ότι άλλοι προγραμματιστές ζητούν από τους προγραμματιστές του Semantic UI να δημιουργήσουν έκδοση χωρίς jQuery, για τους ίδιους λόγους με εμάς. Άλλοι προγραμματιστές ζητούν έκδοση χωρίς jQuery εδώ και πολλά χρόνια, αλλά οι προγραμματιστές έχουν πει όχι και δήλωσαν ότι κάθε έκδοση χωρίς jQuery θα ήταν πολύ δύσκολο να γραφτεί, π.χ. ~«το έργο Semantic UI έχει πάνω από 22.000 σημεία επαφής που χρησιμοποιούν jQuery».

Παράδειγμα με Semantic:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

Εξετάσαμε το Bulma. Το Bulma έχει πολλές παρόμοιες δυνατότητες με το Semantic UI, αν και όχι τόσα πολλά εξελιγμένα στοιχεία. Το Bulma είναι χτισμένο με σύγχρονες τεχνικές, όπως χωρίς jQuery. Το Bulma έχει ορισμένα στοιχεία τρίτων, μερικά από τα οποία μπορεί να θέλουμε να χρησιμοποιήσουμε.

Παράδειγμα με Bulma:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

Επιχείρημα

Όπως παραπάνω.

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

Επιπτώσεις

Αν βρούμε ένα καλό πλαίσιο CSS χωρίς jQuery, αυτό είναι γενικά χρήσιμο και καλό.

Σχετικά

Σχετικές αποφάσεις

Το πλαίσιο CSS που θα επιλέξουμε μπορεί να επηρεάσει τη δυνατότητα ελέγχου (testability).

Σχετικές απαιτήσεις

Θέλουμε να διαθέσουμε γρήγορα μια καθαρά σύγχρονη εφαρμογή.

Δεν θέλουμε να ξοδεύουμε χρόνο δουλεύοντας με παλαιότερα πλαίσια (ιδίως το Semantic UI) που χρησιμοποιούν παλαιότερες εξαρτήσεις (ιδίως το jQuery).

Σχετικά τεχνουργήματα

Επηρεάζει όλο τον τυπικό HTML που θα χρησιμοποιεί αυτό το CSS.

Σχετικές αρχές

Εύκολα αναστρέψιμο.

Ανάγκη για ταχύτητα.

Σημειώσεις

Οποιεσδήποτε σημειώσεις εδώ.