Reveall B.V. (Next) – Ανασχεδιασμός frontend για πλατφόρμα event technology

Reveall B.V. case study — Ανακατασκευή της αρχιτεκτονικής frontend και του συστήματος components για το επόμενο κεφάλαιο της πλατφόρμας

Πελάτης:

Reveall B.V. (Next)

Ημερομηνία:

2023-01 – 2023-04

Διάρκεια:

4 μήνες
Reveall B.V. (Next) – Ανασχεδιασμός frontend για πλατφόρμα event technology
Στη Reveall B.V., σήμερα Next, ανασχεδίασα τη frontend αρχιτεκτονική ενώ η ανάπτυξη του προϊόντος συνεχιζόταν. Το αντικείμενο ήταν η δομή του UI, τα όρια των components και η επαναχρησιμοποίησή τους.
Reveall B.V. component system — Reusable components with typed props and variantsReveall B.V. layout architecture — Component hierarchy behind the event experience

Ο πελάτης

Η Next, πρώην Reveall B.V., αναπτύσσει εργαλεία event technology για διοργανωτές ζωντανών εκδηλώσεων.

Το έργο

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

Πριν αλλάξω την οπτική πλευρά, ξεκαθάρισα τις αρμοδιότητες στη δομή. Κάθε component χρειαζόταν σαφές όριο, ενώ η διάταξη και το state έπρεπε να έχουν συγκεκριμένη θέση στην αρχιτεκτονική.

Σχεδίασα custom components για τα μοτίβα που επαναλαμβάνονταν στην εφαρμογή. Όπου υπήρχε κατάλληλο έτοιμο component, διατήρησα τη χρήση του Vuetify ή του Bootstrap αντί να δημιουργήσω νέα υλοποίηση χωρίς λόγο.

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

Η πρόκληση

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

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

Τι έκανα εγώ

Εργάστηκα ως frontend μηχανικός με ευθύνη για την αρχιτεκτονική του UI. Όρισα τα όρια των components, τη δομή της διάταξης και τον τρόπο με τον οποίο οργανώνονταν τα επαναχρησιμοποιήσιμα μέρη της εφαρμογής.

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

Η υλοποίηση βασίστηκε σε custom components, με Vuetify ή Bootstrap όπου κάλυπταν την ανάγκη χωρίς νέα υλοποίηση.

Τεχνολογίες

  • Vue.js, Vuetify, Bootstrap, custom components, frontend αρχιτεκτονική και σταδιακό refactoring
Ετικέτες
Κατηγορίες

Περισσότερα

Flovi Oy case study — Ανασχεδιασμός του backoffice logistics αυτοκινήτων σε Φινλανδία, Σουηδία και Πολωνία

Flovi Oy – Ανασχεδιασμός backoffice logistics

Πλήρες ξαναχτίσιμο του frontend για το backoffice διαχείρισης μεταφορών αυτοκινήτων σε Φινλανδία, Σουηδία και Πολωνία. Νέο UX και νέα αρχιτεκτονική, με απαίτηση να παραμείνει το υπάρχον σύστημα σε λειτουργία κατά τη μετάβαση.

Πείτε μου για το έργο σας και πάρτε τιμή, χρονοδιάγραμμα και αντικείμενο με email. Χωρίς κλήση.
Σας άρεσε αυτό που είδατε; Ας συνεργαστούμε

    Πώς δουλεύει
    1. Πείτε μου για το έργο σας παρακάτω.
    2. Σας στέλνω με email μερικές γρήγορες ερωτήσεις, περίπου 2 λεπτά.
    3. Παίρνετε τιμή, χρονοδιάγραμμα και αντικείμενο έργου με email. Χωρίς κλήση.
    Ένα link με βοηθάει να εκτιμήσω πιο γρήγορα το έργο σας.

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

    Ο ιστότοπος προστατεύεται από reCAPTCHA. Ισχύουν η Πολιτική Απορρήτου και Όροι Χρήσης της Google.