Κωδικός με το σχέδιο - Πώς δημιουργήσαμε ένα εργαλείο για την εξαγωγή πρωτότυπων αντιδράσεων από το σκίτσο

Κάθε χρόνο, ακριβώς πριν από τις διακοπές, αφιερώνουμε μια εβδομάδα της εποχής μας στο Tictail για να κάνουμε κάτι που δεν αποτελεί μέρος της κανονικής δουλειάς μας. Ονομάζουμε αυτή την εβδομάδα επίδειξης και είναι μια μεγάλη ευκαιρία να διερευνήσουμε νέες ιδέες και να συνεργαστούμε με ανθρώπους με τους οποίους συνήθως δε δουλεύουμε. Αυτό μπορεί να είναι ένα νέο πειραματικό χαρακτηριστικό προϊόντος, μια βελτίωση της διαδικασίας μιας επιχείρησης, ένας χάρτης LED με ζωντανές αγορές ή οτιδήποτε άλλο θα βελτίωνε το Tictail. Όπως το όνομα υπονοεί, ωστόσο, πρέπει να είναι κάτι που μπορεί να αποδειχθεί στο τέλος της εβδομάδας.

Φέτος, εμένα και ο σχεδιαστής Petter Nilsson αποφάσισα να διερευνήσουμε τη δυνατότητα δημιουργίας ενός εργαλείου που να συνδέει τις ροές εργασίας μεταξύ σχεδιασμού και ανάπτυξης. Συγκεκριμένα, θέλαμε να οικοδομήσουμε ένα εργαλείο που μπορεί να εξάγει τα σχέδια σκίτσων μας σε εφαρμογές πλήρως διαδραστικής εφαρμογής React. Όπως το Sketch.app της Airbnb αντιδρά, αλλά το αντίστροφο!

Τώρα αυτό θα μπορούσε να ακούγεται σαν ένα τεράστιο έργο για να τελειώσει σε μόλις μία εβδομάδα, αλλά αποφασίσαμε μερικούς περιορισμούς του εργαλείου για να γίνει αυτό δυνατό:

  • Ο σχεδιασμός στο Sketch μπορεί να αποτελείται μόνο από προκαθορισμένα σύμβολα που αντιστοιχούν στα ήδη εφαρμοζόμενα συστατικά του React UI.
  • Ο εξαγόμενος κώδικας θα χρησιμεύσει μόνο ως ένα διαδραστικό πρωτότυπο για την εμφάνιση της διάταξης της εφαρμογής και των ροών μεταξύ διαφορετικών οθονών, παρόμοιο με αυτό που σκοπεύει να κάνει ο Framer. Ο κώδικας μπορεί να χρησιμοποιηθεί ως σημείο εκκίνησης για την υλοποίηση της παραγωγής, αλλά δεν θα περιέχει πραγματικά δεδομένα παραγωγής ή επιχειρησιακή λογική.
  • Είναι δυνατή η εξαγωγή μιας προσαρμοσμένης διάταξης, αλλά ο σχεδιαστής θα χρειαστεί να κάνει τη βαριά ανύψωση της κατανόησης της δομής των γραμμών και των στηλών, καθορίζοντας εκείνες τις ομάδες που ονομάζονται στο Sketch.

Εδώ έχουμε καταλήξει στο τέλος της εβδομάδας:

Λαμβάνοντας υπόψη το περιορισμένο χρονικό διάστημα που κατορθώσαμε να φτάσουμε αρκετά μακριά στο όραμα που θέλαμε να επιτύχουμε. Σε αυτήν την ανάρτηση στο blog θα προσπαθήσω να δώσω μια περιγραφή υψηλού επιπέδου για το πώς κατασκευάσαμε αυτό το εργαλείο.

Ανάγνωση αρχείων σκίτσου

Με τη νέα μορφή ανοιχτού αρχείου του Sketch, ένα αρχείο Sketch είναι απλά ένας φάκελος με αρχεία JSON (και οποιεσδήποτε εικόνες bitmap που έχουν χρησιμοποιηθεί στο σχεδιασμό). Για να μπορέσετε εύκολα να αποκτήσετε πρόσβαση σε αυτές τις πληροφορίες και για να δείτε την αυτόματη επαναφόρτωση που βλέπετε παραπάνω, δημιούργησα έναν προσαρμοσμένο φορτωτή Webpack. Ο φορτωτής αποσυνδέει το αρχείο Sketch στη μνήμη και επιστρέφει τα αρχεία JSON σε ένα μόνο αντικείμενο:

{
  έγγραφο: {...},
  meta: {...},
  χρήστης: {...},
  σελίδες: {...},
}}

Το πιο ενδιαφέρον κομμάτι εδώ είναι το αντικείμενο σελίδων, το οποίο περιέχει κάθε σελίδα στο έγγραφο Σκίτσο ως δέντρο των στρώσεων. Ένα στρώμα μπορεί να είναι μια ομάδα, ένα στοιχείο κειμένου, ένα σύμβολο, ένα ορθογώνιο κλπ., Με κάθε στρώμα να έχει πιθανώς περισσότερα παιδικά στρώματα.

Ο φορτωτής χρησιμοποιεί επίσης το emitFile API του Webpack για να κάνει οποιαδήποτε από τις εικόνες bitmap διαθέσιμες από τις διαδρομές τους στον εξυπηρετητή ανάπτυξης. Τέλος, δεδομένου ότι τα περισσότερα από τα δεδομένα κειμένου αποθηκεύονται ως δυαδικά πλέγματα, αποσυμπιέζουν αυτά τα πεδία ώστε να είναι ευανάγνωστα στον πελάτη. Μπορείτε να δείτε τον φορτωτή στο σύνολό του σε αυτή την οριζόντια πλοήγηση.

Εξαρτήματα και στηρίγματα

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

Ένα στρώμα στο σκίτσο είναι ως επί το πλείστον είτε μια ομάδα (φάκελος παιδικών στρώσεων) είτε ένα προκαθορισμένο σύμβολο (π.χ. ένα κουμπί ή ένα πλαίσιο επιλογής). Έχουμε επίσης ειδικό χειρισμό για στρώματα εικόνας και κειμένου. Οι ομάδες ακολουθούν μια συμφωνημένη σύμβαση ονομασίας που μπορούμε να αναλύσουμε για να τις χαρτογραφήσουμε σε συστατικά στοιχεία δοχείου με διάκενα και στηρίγματα ευθυγράμμισης.

Για να μπορέσουμε να ορίσουμε όλα τα στηρίγματα των στοιχείων UI, ελαττώνουμε ελαφρώς το χαρακτηριστικό Overrides Symbol Overrides. Στο παρακάτω παράδειγμα έχουμε ένα πεδίο ετικέτας που αναπαριστάται οπτικά στο έγγραφο Sketch, αλλά έχουμε επίσης και ένα αριθμό κρυφών πεδίων που χρησιμοποιούνται μόνο στο συστατικό React με αντιστοιχισμένη αντιστοίχιση.

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

Σχέδιο

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

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

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

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

Οφέλη

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

Έχοντας μια πιο στενά ενσωματωμένη ροή εργασίας μεταξύ σχεδιασμού και ανάπτυξης έρχεται με μερικά τεράστια οφέλη:

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

Προχωρώντας μπροστά

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

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

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