Πώς κατασκευάσαμε έναν μηχανισμό Sketch-to-code σε πραγματικό χρόνο (με ζωντανή προεπισκόπηση)

Γειά σου Κόσμε,

γρήγορες ερωτήσεις:

Δεν είναι υποψήφιοι σχεδιαστές και προγραμματιστές (Web / Mobile) να μιλούν την ίδια γλώσσα;

Δεν επιδιώκουμε όλοι εφαρμογές / ιστότοπους που φαίνονται όμορφοι και λειτουργούν ομαλά;

Μπορούμε να κάνουμε ολόκληρη τη διαδικασία κατασκευής κινητών / ιστών κάπως πιο ανθρώπινη;

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

Μπορούμε να κάνουμε αυτό το λάθος;

Περίπου ένα χρόνο πίσω, καθώς εργαζόμουν σε μια εφαρμογή για κινητά, πήρα τον εαυτό μου κολλημένος σε μια ατέλειωτη πινγκ-πονγκ με τον σχεδιαστή μου, κυρίως μικροαλλαγές πώς η εφαρμογή φαίνεται και συμπεριφέρεται. Οι περισσότερες από αυτές τις αλλαγές αφορούν μόνο την τοποθέτηση, τα χρώματα, τις αποστάσεις και ούτω καθεξής. Αντί να χρησιμοποιήσω το χρόνο μου για να υλοποιήσω την πραγματική αξία που φέρνει τα κότσια της εφαρμογής, περίπου το 60% δαπανάται για να κάνει τη μη-επιχειρηματική λογική σχετική εργασία που λέγεται "pixel pushing". Ουσιαστικά, όλες οι "ενέργειες" που έκανε ο σχεδιαστής στο Sketch, έπρεπε να επαναλάβω στον κώδικα. Αυτό, για μένα, έμοιαζε με μια εντελώς αναποτελεσματική διαδικασία και τον πλακόστρωτο δρόμο προς την απογοήτευση. Και μια χαμένη προθεσμία. Ή δύο :)

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

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

Περίμενε, έτσι ... τι ψάχνουμε πραγματικά;

Με λίγα λόγια αυτό είναι αυτό που θα ήθελα:

  1. ο σχεδιαστής θα πρέπει να είναι σε θέση να "προεπισκόπηση" τα σχέδια στη συσκευή / browser του σε πραγματικό χρόνο. Αλλά, δεν προσομοιώνεται. Θα πρέπει να δει την προεπισκόπηση ως την πραγματική διαπραγμάτευση, σαν να το εφάρμοσε ένας προγραμματιστής.
  2. όταν ο σχεδιαστής αντλεί ένα κουμπί, ο προγραμματιστής θα πρέπει να αποκτήσει ένα απόσπασμα κώδικα "Κουμπιού" έτοιμο για χρήση στην εφαρμογή / τοποθεσία
  3. Ο προγραμματιστής πρέπει να επιλέξει τη γλώσσα και το διάλεκτο ή το στυλ κωδικοποίησης του αποσπάσματος.

Φαίνεται ότι υπάρχουν μερικά εξαιρετικά εργαλεία για την κάλυψη τμημάτων των απαιτήσεων και εμπίπτουν σε δύο κατηγορίες: εργαλεία δημιουργίας πρωτοτύπων και συγκεκριμένους "βοηθούς".

Ενώ εργαλεία όπως το InVision και πρόσφατα το ενσωματωμένο στο πρωτότυπο σύστημα του Sketch κάνουν μια σπουδαία δουλειά για τα πρωτότυπα, πάνε μόνο στο "πρωτότυπο". Πρόκειται κυρίως για προσεγγίσεις ή προσομοιώσεις του τελικού αποτελέσματος και σταματούν να είναι χρήσιμες εκεί. Δεν υπάρχει τίποτα περισσότερο που μπορείτε να κάνετε με τα πρωτότυπά σας αφού τα έχετε κατασκευάσει (εκτός από το να σκεφτείτε την ομορφιά τους). Δεν μπορούν να επαναχρησιμοποιηθούν ή να επεκταθούν περαιτέρω προς ένα "πραγματικό", έτοιμο για παραγωγή. Ως εκ τούτου, χρειάζεστε τώρα έναν προγραμματιστή για να κωδικοποιήσετε το UI, έτσι πίσω στο τετράγωνο.

Από την άλλη πλευρά, τα συγκεκριμένα εργαλεία Target, όπως το Zeplin, συμβάλλουν σημαντικά στην ανάπτυξη των styling πληροφοριών από τον προγραμματιστή, αλλά σπάνια δίνουν το πλήρες πλαίσιο και επιπλέον είναι ακριβώς αυτό που ονομάζονται "target-specific" οποιεσδήποτε διαμορφώσεις είναι δυνατές.

Μια άλλη προσέγγιση που αξίζει να αναφερθεί έχει προταθεί από τα παιδιά από το Anima, μέσω του plugin Launchpad για το Sketch που εξάγει απλά HTML / CSS.

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

Στη συνέχεια, η σκέψη:

Τι θα έπαιρνε για να συλλάβει την "είσοδο" του σχεδιαστή και να μεταφράσει τον κώδικα σε πραγματικό χρόνο;

Και αυτός ήταν ο σπόρος που σκέφτηκε ότι συγκέντρωσε μια ομάδα τεχνικών που γνώρισα στο συνέδριο JSHeroes του 2017 στο Cluj, στη Ρουμανία.

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

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

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

Ενδιάμεση Αντιπροσωπεία JSON (JSON IR)

Το προτεινόμενο JSON IR αποτελείται από μια δομή τύπου δέντρου κόμβων που θα ονομάσουμε στοιχεία. Κάθε στοιχείο έχει τουλάχιστον ένα χαρακτηριστικό τύπου και πολλά άλλα προαιρετικά χαρακτηριστικά όπως στυλ, παιδιά και όνομα.

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

  • type: μια συμβολοσειρά που καθορίζει τη φύση του στοιχείου. Ανεξάρτητα αν μιλάμε για web ή κινητό σχεδιασμό και ανάπτυξη, τα δομικά στοιχεία είναι περίπου τα ίδια: οι προβολές, τα κείμενα, οι εικόνες, οι εισροές και τα κουμπιά που τελικά συγκεντρώνονται σε πιο σύνθετα στοιχεία. Είχαμε φτάσει στο σημείο να λέμε ότι αυτά τα δομικά στοιχεία είναι εδώ για να παραμείνουν ακόμα κι αν πάμε στον κόσμο AR / MR, έτσι μπορεί να συμφωνηθεί μια γενική περιγραφική ονομασία σύμβαση η οποία θα μπορούσε να μεταφραστεί μέσω χαρτογράφησης σε οποιοδήποτε στόχο.
  • στυλ: ένα αντικείμενο JSS. Το JSS έχει επιλεγεί καθώς καλύπτει όλες τις ιδιότητες του web styling και μπορεί να μεταφραστεί σε άλλες μορφές, όπως CSS, React αντικείμενα styling, React Native StyleSheet αντικείμενα κλπ ...
  • παιδιά: μια σειρά στοιχείων ή μια συμβολοσειρά (στην περίπτωση μιας απλής ετικέτας για παράδειγμα)

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

Παράδειγμα κουτιού, ετικέτας και εικόνας

Είναι ισοδύναμο το JSON IR που μοιάζει με αυτό:

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

Το προσχέδιο σκίτσων (ή η πηγή σχεδίασης)

Η ανοικτή μορφή αρχείου του Sketch μας επιτρέπει να διαβάσουμε το περιεχόμενό του, αλλά δεν ικανοποιεί τις απαιτήσεις μας σε πραγματικό χρόνο. Ωστόσο, το Sketch επιτρέπει σε ένα plugin να εγγραφεί σε συμβάντα που συμβαίνουν στο χώρο εργασίας του και να διαβάσει τις ιδιότητες των αντικειμένων Sketch, τα οποία μετατρέπουμε στο JSON IR.

Μέχρι τώρα έχουμε μια πηγή σχεδίασης (Sketch) και μια αντιπροσωπευτική αναπαράσταση σε πραγματικό χρόνο (JSON IR). Στη συνέχεια έχουμε υλοποιήσει έναν τοπικό διακομιστή, ο οποίος λειτουργεί ως σύστημα αποθήκευσης και αναμετάδοσης για το JSON IR που παράγεται από το πρόσθετο Sketch.

Δημιουργία κώδικα και Live Previewer

Μόλις επιμείναμε το JSON IR, θα μπορούσαμε να το μεταφέρουμε σε μια βιβλιοθήκη δημιουργίας κώδικα ή σε ένα live previewer. Έχουμε στοχεύσει στο React and React Native σε αυτό το στάδιο, δεδομένου ότι χρησιμοποιούν αρχιτεκτονική βασικής συνιστώσας και καλύπτουν δύο σημαντικούς "στόχους": ιστό και κινητό, έτσι έχουμε δημιουργήσει ένα ζευγάρι από καθένα και για τους δύο στόχους.

Παρακάτω μπορείτε να δείτε ένα πολύ βασικό διάγραμμα ροής που περιγράφει τη ροή JSON IR προς μια γεννήτρια κώδικα και έναν ζωντανό προγνωστήρα με τις αντίστοιχες εξόδους τους:

Θα δημοσιεύσουμε σύντομα περισσότερες πληροφορίες σχετικά με το πώς λειτουργούν, αλλά, για τώρα, ας δούμε πώς θα φαινόταν ένας κώδικας που θα δημιουργούσε το React για το JSON IR:

Εναλλακτικά, ο κώδικας React-Native θα μοιάζει με αυτόν τον τρόπο:

ΣΗΜΕΙΩΣΗ: σε αυτό το παράδειγμα, η τοποθέτηση είναι σκοπίμως ρυθμισμένη σε απόλυτη για λόγους απλότητας. Θα καλύψουμε αυτό το θέμα σε ένα μελλοντικό άρθρο δεδομένης της πολυπλοκότητας του θέματος. Εν τω μεταξύ, μπορείτε να ρίξετε μια ματιά στο άρθρο του Karl σχετικά με το Σχάμα για να αντιδράσει η δημιουργία κώδικα.

Sneak Peek

Εδώ είναι ένα μικρό demo του πώς όλα αυτά λειτουργούν. Στο βίντεο μπορείτε να δείτε το plugin Σκακιού πρώιμου σταδίου σε δράση και πώς αισθάνεται η σχεδίαση-πηγή> ενδιάμεση αναπαράσταση> δημιουργία κώδικα> ζωντανή ροή προεπισκόπησης.

Το βίντεο είναι μια προσομοίωση της εμπειρίας ενός σχεδιαστή που κτίζει το μενού της ιστοσελίδας JSHeroes.

Στην οθόνη:

  • η αριστερή πλευρά: ο πίνακας εργαλείων μας εμφανίζει το JSON IR και τον κώδικα React που παράγεται δίπλα-δίπλα
  • στην επάνω δεξιά γωνία: ένα web live προεπισκόπησης
  • κάτω δεξιά: Σκίτσο με φορτωμένο plugin Teleport.

Τύλιξε

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

Μέχρι στιγμής, μπορούμε να δημιουργήσουμε κώδικα React, React Native, Vue, HTML / CSS και AngularJS.

Σίγουρα, το ιερό γρανάκι θα ήταν μια αμφίδρομη προσέγγιση, όπου το JSON IR θα μπορούσε να δημιουργηθεί ερμηνεύοντας τον πηγαίο κώδικα, επομένως αγαπάμε την προσέγγιση του Jon Gold στο React Sketch App. Σας συνιστούμε ιδιαίτερα να ελέγξετε το έργο.

Στόχος μας είναι επίσης να ανοίξουμε αυτά τα εργαλεία ASAP, μέσω του Github στη διεύθυνση https://github.com/teleporthq, οπότε, μείνετε συντονισμένοι.

Ανυπομονούμε τις σκέψεις και τα σχόλιά σας, επομένως, επικοινωνήστε μαζί μας μέσω του Twitter. :)

Στην υγειά σας!

P .: αν ενδιαφέρεστε να μάθετε περισσότερα για το ταξίδι μας, μπορείτε να εγγραφείτε στο newsletter μας εδώ.