Γεφυρώνοντας το χάσμα μεταξύ σχεδιασμού και κώδικα

Το «Design & Code» είναι μια σειρά από πειράματα, διαδικασίες και μαθήματα σχεδίασης και μηχανικής που σας έφεραν οι ομάδες AirSwap.

Στο AirSwap, έχουμε μια ασύγχρονη και επαναληπτική προσέγγιση στην ανάπτυξη προϊόντων. Ωστόσο, μία από τις πρώτες προκλήσεις που αντιμετωπίσαμε ήταν η διατήρηση μιας σταθερής ταυτότητας προϊόντος μέσω επαναλήψεων της λειτουργίας των χαρακτηριστικών, σε πολλούς ιδιοκτήτες προϊόντων. Εργαζόμενοι στις πρώτες εκδόσεις του AirSwap Token Trader και του AirSwap Widget, συγκεντρώσαμε γρήγορα μια χούφτα αρχείων Sketch - κάθε αρχείο περιείχε μια σακούλα με σύμβολα και στυλ που αντιπροσωπεύουν την κατάσταση της ταυτότητας του προϊόντος μας εκείνη την χρονική στιγμή. Παρόλο που αυτό λειτούργησε στην αρχή, η έλλειψη μιας ενοποιημένης πηγής αλήθειας γρήγορα μεγάλωσε σε ένα χάος ξεπερασμένων στυλ σε πολλαπλές πηγές.

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

Κάθε εμπειρία frontend στο AirSwap γράφεται στο React. Στην αρχή, είχαμε έναν κατάλογο κοινών στοιχείων, μια προκαταρκτική βιβλιοθήκη συστατικών, αν θέλετε, με τα κατάλληλα στυλ που ταιριάζουν με την ταυτότητα του προϊόντος. Ωστόσο, όπως επαναλάβαμε, άλλαξε η ταυτότητα του προϊόντος μας. Οι αναφορές σχεδίασης αναφορών για νεότερες λειτουργίες καθιστούν πιο δύσκολο να προσδιοριστεί εάν ένα συγκεκριμένο στοιχείο υπήρχε ήδη ή έπρεπε να εφαρμοστεί. Πραγματοποιήσαμε μια έγκαιρη απόφαση να χρησιμοποιήσουμε τα στυλ στοιχεία, τα οποία μας επέτρεψαν να επαναλάβουμε γρήγορα και να δημιουργήσουμε χαρακτηριστικά. Η ευκολία χρήσης που συνοδεύει τα κομψά στοιχεία ήταν μια τεράστια νίκη, αλλά μας άφησε επίσης να κάνουμε κάποιες φτωχές αποφάσεις για την επέκταση των στυλ. Χωρίς αυστηρούς κανόνες για το πώς να δημιουργήσουμε ή να επεκτείνουμε εξαρτήματα, ο κώδικας βάσης μας γρήγορα έγινε οικισμός σε πολύ διπλό κώδικα με μικρές μόνο διαφορές. Αυτό όχι μόνο μείωσε την ταχύτητα ανάπτυξης και αυξήθηκε το χρέος της τεχνολογίας, αλλά και εισήγαγε ασυνέπεια στην ταυτότητα του προϊόντος μας.

Λόγω της απουσίας ενός σαφώς καθορισμένου συστήματος για τα comps σχεδιασμού, πολλά αρχεία στο codebase μας θα εισήγαγαν νέα εξαρτήματα που ήταν παρόμοια με τα υπάρχοντα, ή θα μπορούσαν να κάνουν μικρές αλλαγές στα υπάρχοντα στοιχεία.

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

Τεχνολογία σχεδιασμού

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

Περίπου πριν από ένα χρόνο, η ομάδα τεχνολογίας σχεδιασμού της Airbnb κυκλοφόρησε ένα έργο ανοικτού πηγαίου κώδικα που ονομάζεται αντίδραση-sketchapp, το οποίο επέτρεψε στα στοιχεία React να μετατραπούν σε Sketch. Η κοινότητα του React ανταποκρίθηκε ευνοϊκά και αρκετά σύντομα, τα στοιχεία στυλ απελευθέρωσαν μια επέκταση της βιβλιοθήκης τους, στυλ-συστατικά / πρωτόγονα, με υποστήριξη για απόδοση πολλαπλών στόχων (συμπεριλαμβανομένης της απόδοση στο Sketch). Τα έργα αυτά έγιναν βασικές τεχνικές λύσεις στα προβλήματα ασυνέπειας που αντιμετωπίζαμε.

Βιβλιοθήκη εξαρτημάτων AirSwap

Μετά από έναν εξαντλητικό έλεγχο του widget AirSwap, εντοπίσαμε και αναδημιουργήσαμε στο Sketch το σύνολο των στοιχείων που θα χρησιμοποιηθούν σε όλες τις παρούσες και μελλοντικές λειτουργίες. Στη συνέχεια, πήραμε το χρόνο να αναδημιουργήσουμε αυτή την ολόκληρη βιβλιοθήκη στοιχείων στο React, χρησιμοποιώντας τα στυλ συστατικά / πρωτόγονα ως βάση μας. Τα συστατικά μας έγιναν ως σύμβολα μέσα από την αντίδραση-sketchapp, δημιουργώντας μια μοναδική πηγή αλήθειας για τα σχέδιά μας.

Αντιδράστε τα στοιχεία που έχουν δοθεί στο Sketch

Η δημιουργία της βιβλιοθήκης εξαρτημάτων έγινε η βάση της προκαταρκτικής μας διαδικασίας σχεδιασμού από την AirSwap. Τα σχέδια για τα εξαρτήματα ήρθαν πρώτα, ακολουθούμενα από την εφαρμογή. Επειδή χρησιμοποιούσαμε στυλ-εξαρτήματα και αντίδραση-sketchapp, θα μπορούσαμε να κάνουμε τον εφαρμοσμένο κώδικα πίσω στο Sketch για αναθεώρηση. Μετά την έγκριση, τα παραγόμενα εξαρτήματα θα γίνουν τα νέα σχέδια, έτοιμα για μελλοντική αναθεώρηση, εάν είναι απαραίτητο.

Πολλαπλές εκδόσεις της βιβλιοθήκης εξαρτημάτων, που έχουν καταγραφεί στο Sketch και έχουν μεταφορτωθεί στο Figma

Εισάγετε το Σχ

Αυτός ο κύκλος εξαλείφει τη διαφορά μεταξύ κώδικα και σχεδιασμού. Ωστόσο, ανακαλύψαμε γρήγορα τα πρόσθετα οφέλη αυτής της λύσης όταν ξεκινήσαμε να κάνουμε το μεγαλύτερο μέρος του σχεδιαστικού μας έργου στο Figma. Επειδή τα εργαλεία σχεδίασης μας επιτρέπουν να δημιουργήσουμε έγγραφα σκίτσων από τη βιβλιοθήκη συνιστωσών μας, ανεβάζουμε κάθε νέα αναθεώρηση στο Figma. Τα σχόλια και οι αιτήσεις αλλαγών μπορούν να γίνουν με διαδραστικό τρόπο στην τελευταία αναθεώρηση, η οποία παρέχει προδιαγραφές για την επόμενη αναθεώρηση, η οποία πρέπει να μεταφορτωθεί μόνο όταν έχουν ληφθεί όλα τα προηγούμενα σχόλια. Αυτό δεν είναι απολύτως απρόσκοπτο (ακόμα), αλλά δημιουργεί μια διαδικασία αναθεώρησης του Διεπαφή Χρήσης που είναι πληροφοριακά παρόμοια με τα αιτήματα έλξης του GitHub.

Χρησιμοποιώντας τη νέα βιβλιοθήκη εξαρτημάτων μας για να δημιουργήσουμε ψεύδη για το νέο OTC Trading AirSwap

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

Το όνομα του στοιχείου εμφανίζεται στο Figma, το οποίο παρέχει αμέσως πληροφορίες στους προγραμματιστές που βλέπουν τα ψεύτικα

Τι έπεται

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

Για ένα, το Figma δεν παρέχει προς το παρόν API με δυνατότητα εγγραφής για έγγραφα, απαιτώντας από μας να φορτώσουμε με μη αυτόματο τρόπο τα δημιουργούμενα αρχεία Sketch. Με τη σωστή υποστήριξη API, μπορούμε εύκολα να ενσωματώσουμε αυτή τη διαδικασία από άκρο σε άκρο στον συνεχή αγωγό ολοκλήρωσης μας. Προβλέπουμε ένα μέλλον όπου ένας αγωγός CI μετατρέπει ένα αρχείο σκίτσου από μια ετικέτα ή υποκατάστημα σε ένα repo (ή ακόμα καλύτερα, να καταστήσει τα εγγενή αντικείμενα του Figma αντί να περάσει από το Sketch), να μεταφορτώσει το αρχείο στο Figma και να συνδέσει το προκύπτον έγγραφο σε ένα pull αίτηση. Σχόλια από το Figma μπορούν να διασταυρωθούν στο GitHub, παρέχοντας απρόσκοπτη επικοινωνία και ανατροφοδότηση μεταξύ σχεδιασμού και κώδικα.

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

Με αυτή τη νέα βιβλιοθήκη εξαρτημάτων, παρατηρήσαμε αύξηση της παραγωγικότητας και της αποδοτικότητας με τις παραγγελίες σχεδιασμού-κωδικού. Παρόλο που δεν είναι τέλεια, οι πλήρεις δυνατότητες από άκρο σε άκρο αυτής της νέας διαδικασίας μας επέτρεψαν να αυξήσουμε την ταχύτητα με την οποία επαναλαμβάνουμε το έργο, διατηρώντας παράλληλα ένα υψηλό επίπεδο ακεραιότητας στην ταυτότητα του προϊόντος. Η συζήτηση γύρω από την τεχνολογία σχεδιασμού και σχεδίασης αναπτύσσεται γρήγορα σε πολλές ομάδες προϊόντων σε όλο τον κόσμο. Σχεδιασμός είναι κάτι που μας ενδιαφέρει βαθιά στο AirSwap και η τεχνολογία σχεδίασης έχει γίνει μια συναρπαστική διασταύρωση της ανάπτυξης προϊόντων που μπορούμε να εκμεταλλευτούμε για να μας βοηθήσουν στη ναυτιλία τρομερών προϊόντων.

  • Εγγραφείτε στο Blog του AirSwap
  • Εγγραφείτε στο επίσημο κανάλι μας στο Telegram
  • Ακολουθήστε μας στο Twitter
  • Βρείτε μας στο Facebook
  • Εγγραφείτε στο subreddit μας