Ich arbeite seit etwa zwei Jahren als Frontend-Entwickler und war an der Erstellung verschiedenster Projekte beteiligt. Eine der Lektionen, die ich gelernt habe, ist, dass die Zusammenarbeit zwischen verschiedenen Entwicklerteams, die das gleiche Ziel verfolgen, aber unterschiedliche Aufgaben und Verantwortlichkeiten haben, nicht einfach ist.
In Absprache mit anderen Teammitgliedern, Designern und Entwicklern habe ich einen Website-Erstellungszyklus erstellt, der für kleine Teams (5-15 Personen) konzipiert ist. Es umfasst Tools wie Confluence, Jira, Airtable und Abstract. In diesem Artikel werde ich die Funktionen zum Organisieren des Workflows vorstellen.
Skillbox empfiehlt: Zweijähriges Praktikum .
Erinnerung: für alle Leser von „Habr“ – ein Rabatt von 10 Rubel bei der Anmeldung zu einem beliebigen Skillbox-Kurs mit dem Aktionscode „Habr“.
Warum ist das alles nötig?
Das erforderliche Mindestteam für die Erstellung einer Website von Grund auf besteht aus einem Designer, Programmierer und Projektmanager. In meinem Fall wurde das Team gebildet. Aber nach der Veröffentlichung einiger Websites hatte ich das Gefühl, dass etwas damit nicht stimmte. Manchmal waren wir uns unserer Verantwortung einfach nicht vollständig bewusst und die Kommunikation mit dem Kunden ließ zu wünschen übrig. All dies verlangsamte den Prozess und störte alle.
Ich begann, an der Lösung des Problems zu arbeiten.
Eine Google-Suche liefert gute Ergebnisse zu unserem Problem.
Um die geleistete Arbeit visueller zu gestalten, habe ich ein Workflow-Diagramm erstellt, das einen Eindruck davon vermittelt, wie hier gearbeitet wird.
Klicken Sie auf das Bild, um es in voller Auflösung zu öffnen.
Ziele und Ziele
Eine der ersten Techniken, die ich testen wollte, war das „Kaskadenmodell“ (Wasserfall). Ich nutzte es, um Probleme hervorzuheben und zu verstehen, wie man sie löst.
Problem: Meistens bewertet der Kunde den Website-Erstellungsprozess nicht modular, wie es Entwickler tun. Er nimmt sie als eine reguläre Site wahr, das heißt, er denkt in einzelnen Seiten. Seiner Meinung nach erstellen Designer und Programmierer einzelne Seiten nacheinander. Dadurch versteht der Kunde einfach nicht, was im eigentlichen Prozess auf was folgt.
Aufgabe: Es hat keinen Sinn, den Kunden vom Gegenteil zu überzeugen; am besten ist es, einen modularen Prozess zur Erstellung einer Website im Unternehmen zu entwickeln, der auf einem seitenweisen Modell basiert.
Universelle Design-Tokens und -Komponenten werden sowohl von Entwicklern als auch von Designern verwaltet.
Problem: Dies ist eine häufige Situation, die viele Strategien angehen. Es gibt viele interessante Lösungen. In den meisten Fällen wird vorgeschlagen, ein Designsystem zu erstellen, das von einem Styleguide/Bibliotheksgeneratoren gesteuert wird. Aber in unserer Situation war es einfach nicht möglich, dem Entwicklungsprozess eine weitere Komponente hinzuzufügen, die es uns ermöglichen würde, Zugriffsebenen für Designer zu verwalten.
Aufgabe: Aufbau eines universellen Systems, in dem Designer, Entwickler und Manager synchron arbeiten können, ohne sich gegenseitig zu stören.
Genaue Entwicklungsverfolgung
Problem: Es stehen zwar viele nützliche Tools zur Verfügung, um Probleme zu verfolgen und den Gesamtfortschritt zu messen, die meisten sind jedoch nicht flexibel oder optimal. Das Tool kann nützlich sein, indem es dem Team Zeit spart, die normalerweise für Fragen und Erläuterungen zu bestimmten Aufgaben aufgewendet würde. Es erleichtert auch den Managern das Leben, indem es ihnen ein genaueres Verständnis des gesamten Projekts vermittelt.
Aufgabe: Erstellen Sie ein Dashboard, um den Fortschritt der von verschiedenen Teammitgliedern ausgeführten Aufgaben zu verfolgen.
Werkzeugsatz
Nachdem ich mit verschiedenen Tools experimentiert hatte, entschied ich mich für folgendes Set: Confluence, Jira, Airtable und Abstract. Im Folgenden werde ich die jeweiligen Vorteile erläutern.
Zusammenfluss
Rolle des Tools: Informations- und Ressourcenzentrum.
Der Arbeitsbereich von Confluence ist relativ einfach einzurichten und verfügt über viele Funktionen, Integration mit verschiedenen Apps und individuelle, anpassbare Vorlagen. Es handelt sich nicht um eine Einheitslösung, aber es eignet sich ideal als Informations- und Ressourcenzentrum. Das bedeutet, dass alle Referenzen oder technischen Details im Zusammenhang mit dem Projekt in die Datenbank eingegeben werden müssen.
Mit dem Tool können Sie jede Komponente und alle anderen Details zum Projekt ordnungsgemäß dokumentieren.
Der Hauptvorteil von Confluence ist die Anpassung von Dokumentvorlagen. Darüber hinaus kann damit ein einziges Repository für Spezifikationen und verschiedene Projektdokumentationen implementiert werden, wodurch die Zugriffsebenen der Teilnehmer getrennt werden. Jetzt müssen Sie sich keine Sorgen mehr machen, dass Sie eine alte Version der Spezifikation zur Hand haben, wie es beim Versenden von Dokumenten per E-Mail der Fall ist.
Weitere Informationen zum Tool .
Jira
Rolle des Tools: Problemüberwachung und Aufgabenverwaltung.
Jira ist ein sehr leistungsfähiges Projektplanungs- und Managementtool. Der Hauptteil der Funktionalität ist die Erstellung anpassbarer Workflows. Um Probleme effektiv verwalten zu können (was wir brauchen), lohnt es sich, besonders auf die korrekte Verwendung des Anforderungstyps und des Problemtyps (Issue-Typ) zu achten.
Um sicherzustellen, dass Entwickler Komponenten auf der Grundlage des richtigen Designs erstellen, müssen sie daher jedes Mal benachrichtigt werden, wenn sich etwas am Design ändert. Sobald die Komponente aktualisiert ist, muss der Designer ein Problem eröffnen, einen verantwortlichen Entwickler zuweisen und ihm den richtigen Problemtyp zuweisen.
Mit Jira können Sie sicher sein, dass absolut alle Prozessbeteiligten (ich möchte Sie daran erinnern, in unserem Fall sind es 5–15) korrekte Aufgaben erhalten, die nicht verloren gehen und ihren Ausführenden finden.
Erfahren Sie mehr über Jira .
Airable
Rolle des Tools: Komponentenverwaltung und Fortschrittsanzeige.
Airtable ist eine Mischung aus Tabellenkalkulationen und Datenbanken. All dies ermöglicht es, die Bedienung aller oben besprochenen Tools individuell anzupassen.
Beispiel 1: Komponentenverwaltung
Der Styleguide-Generator ist nicht immer bequem zu verwenden – das Problem besteht darin, dass Designer ihn nicht bearbeiten können. Darüber hinaus wäre es keine gute Entscheidung, die Sketch-Komponentenbibliothek zu verwenden, da diese viele Einschränkungen aufweist. Höchstwahrscheinlich können Sie diese Bibliothek einfach nicht außerhalb des Programms verwenden.
Airtable ist auch nicht perfekt, aber besser als viele andere ähnliche Lösungen. Hier ist eine Demo der Komponentenverwaltungstabellenvorlage:
Wenn ein Entwickler eine Designkomponente akzeptiert, bewertet er das resultierende ABEM, indem er die Komponente in einer Tabelle aufzeichnet. Insgesamt gibt es 9 Spalten:
- Name – der Name der Komponente nach dem ABEM-Prinzip.
- Vorschau – Hier wird entweder ein Screenshot oder ein Bild der von einer anderen Quelle heruntergeladenen Komponente platziert.
- Eine verlinkte Seite ist ein Link zur Seite einer Komponente.
- Untergeordnete Komponente – ein Link zu untergeordneten Komponenten.
- Modifikator – prüft, ob Stiloptionen vorhanden sind und definiert diese (z. B. aktiv, rot usw.).
- Die Komponentenkategorie ist eine allgemeine Kategorie (Text, Werbebild, Seitenleiste).
- Entwicklungsstatus – der tatsächliche Entwicklungsfortschritt und seine Definition (abgeschlossen, in Bearbeitung usw.).
- Verantwortlich – der Entwickler, der für diese Komponente verantwortlich ist.
- Die atomare Ebene ist die atomare Kategorie dieser Komponente (gemäß dem Konzept des Atomdesigns).
- Daten können in derselben oder in verschiedenen Tabellen referenziert werden. Das Verbinden der Punkte verhindert Verwirrung beim Skalieren. Darüber hinaus können die Daten problemlos gefiltert, sortiert und verändert werden.
Beispiel 2: Fortschritt der Seitenentwicklung
Um den Fortschritt der Seitenentwicklung bewerten zu können, benötigen Sie eine Vorlage, die speziell für diesen Zweck erstellt wurde. Der Tisch kann sowohl den Bedürfnissen des Teams selbst als auch des Kunden gerecht werden.
Hier können beliebige Informationen zur Seite markiert werden. Dies ist eine Frist, ein Link zum InVision-Prototyp, ein Ziel, eine untergeordnete Komponente. Es fällt sofort auf, dass die Vorgänge sehr komfortabel durchzuführen sind, sowohl was die Dokumentation und Aktualisierung des Designs als auch den Status der Front-End- und Backend-Entwicklung betrifft. Darüber hinaus werden diese Vorgänge gleichzeitig ausgeführt.
Abstrakt
Rolle des Tools: eine einzige Quelle der Versionskontrolle für Design-Assets.
Abstract kann als GitHub für Assets in Sketch bezeichnet werden und erspart Designern das Kopieren und Einfügen von Dateien. Der Hauptvorteil des Tools besteht darin, dass es ein Design-Repository bereitstellt, das als „Single Source of Truth“ fungiert. Designer müssen den Hauptzweig auf die neueste Version des genehmigten Layouts aktualisieren. Danach müssen sie die Entwickler benachrichtigen. Diese wiederum sollten nur mit Designer-Assets aus dem Hauptzweig funktionieren.
Als Schlussfolgerung
Nachdem wir den neuen Entwicklungsprozess und alle oben genannten Tools implementiert hatten, erhöhte sich die Geschwindigkeit unserer Arbeit mindestens um das Doppelte. Es ist keine perfekte Lösung, aber eine sehr gute. Damit es funktioniert, muss man sich zwar viel Mühe geben – es erfordert „manuelle Arbeit“, um alles zu aktualisieren und in funktionsfähigem Zustand zu halten.
Skillbox empfiehlt:
- Praktischer Kurs .
- Online Kurs .
- Praktisches Jahr .
Source: habr.com