Effizienter Webentwicklungs-Workflow: Zusammenfluss, Lufttüchtigkeit und mehr

Ursprünglicher Autor: Vince MingPu Shao
  • Übersetzung


Ich arbeite seit ungefähr zwei Jahren als Front-End-Entwickler und habe an einer Vielzahl von Projekten mitgewirkt. Eine der Lektionen, die ich gelernt habe: Die Interaktion zwischen verschiedenen Gruppen von Entwicklern, die durch ein Ziel vereint sind, aber unterschiedliche Aufgaben und ein gewisses Maß an Verantwortung haben, ist keine leichte Aufgabe.

In Absprache mit anderen Teammitgliedern, Designern und Entwicklern habe ich einen Website-Erstellungszyklus für kleine Teams (5-15 Personen) erstellt. Es enthält Tools wie Confluence, Jira, Airtable und Abstract. In diesem Artikel werde ich die Funktionen der Organisation des Workflows erläutern.

Skillbox empfiehlt: Zweijähriges Praktikum "Ich bin ein PRO Web Developer . "

Wir erinnern Sie daran: für alle Leser von "Habr" - einen Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Promo-Code "Habr".

Warum brauchst du das alles?


Das Team, das mindestens benötigt wird, um eine Site von Grund auf neu zu erstellen, besteht aus einem Designer, Programmierer und Projektmanager. In meinem Fall wurde das Team gebildet. Aber nach der Veröffentlichung einiger Seiten hatte ich das Gefühl, dass etwas mit ihr nicht stimmte. Manchmal haben wir unsere Verantwortung einfach nicht vollständig verstanden, und die Kommunikation mit dem Kunden ließ zu wünschen übrig. All dies verlangsamte den Prozess und störte alle.

Ich fing an, an einer Lösung des Problems zu arbeiten.


Eine Suche bei Google liefert gute Ergebnisse zu unserem Problem.

Um die geleistete Arbeit besser sichtbar zu machen, habe ich ein Workflow-Diagramm erstellt, das ein Verständnis dafür vermittelt, wie die Arbeit mit uns erledigt wird. Wenn Sie darauf klicken, wird das Bild in voller Auflösung geöffnet.




Ziele und Aufgaben


Eine der ersten Techniken, die ich testen wollte, war das Wasserfallmodell. Ich habe es angewendet, um Probleme hervorzuheben und zu verstehen, wie man sie löst.



Problem: In den meisten Fällen bewertet der Client den Prozess der modularen Erstellung einer Site nicht wie Entwickler. Er nimmt es als reguläre Site wahr, denkt also in einzelnen Seiten. Nach seinen Worten erstellen Designer und Programmierer nacheinander getrennte Seiten. Infolgedessen versteht der Kunde einfach nicht, was im Verlauf des realen Prozesses folgt.

Ziel: Es lohnt sich nicht, den Kunden vom Gegenteil zu überzeugen, am besten ist es, einen modularen Prozess für die Erstellung einer Site im Unternehmen auf der Basis eines Seitenmodells zu entwickeln.

Universelle Designtoken und -komponenten werden sowohl von Entwicklern als auch von Designern verwaltet.



Problem: Dies ist eine häufige Situation, der eine große Anzahl von Strategien gewidmet ist. Es gibt viele interessante Lösungen. In den meisten Fällen wird vorgeschlagen, ein Entwurfssystem zu erstellen, das von einem Styleguide / Bibliotheksgenerator gesteuert wird. In unserer Situation war es jedoch einfach unmöglich, dem Entwicklungsprozess eine weitere Komponente hinzuzufügen, mit der die Zugriffsebenen für Designer verwaltet werden können.

Aufgabe: Aufbau eines universellen Systems, in dem Designer, Entwickler und Manager synchron arbeiten können, ohne sich gegenseitig zu stören.

Genaue Verfolgung des Entwicklungsprozesses




Problem: Trotz der Tatsache, dass es viele nützliche Tools gibt, um Probleme zu verfolgen und den Gesamtfortschritt zu bewerten, können die meisten nicht als flexibel oder optimal bezeichnet werden. Das Tool kann nützlich sein, um dem Team Zeit zu sparen, die im Normalfall für Fragen und Erläuterungen zu bestimmten Aufgaben aufgewendet wird. Dies erleichtert auch Managern das Leben und gibt ihnen ein genaueres Verständnis des gesamten Projekts.

Ziel: Erstellen Sie ein Dashboard, um den Fortschritt von Aufgaben durch verschiedene Teammitglieder zu verfolgen.

Werkzeugset


Nachdem ich mit verschiedenen Werkzeugen experimentiert hatte, entschied ich mich für das folgende Set: Confluence, Jira, Airtable und Abstract. Im Folgenden werde ich die Vorteile von jedem offenbaren. Rolle des

Confluence-

Tools: Informations- und Ressourcencenter.

Der Confluence-Arbeitsbereich ist relativ einfach zu organisieren, verfügt über viele Funktionen, die Integration in verschiedene Anwendungen und individuelle benutzerdefinierte Vorlagen. Es kann nicht als universelle Lösung für alle Probleme bezeichnet werden, eignet sich jedoch hervorragend als Informations- und Ressourcenzentrum. Dies bedeutet, dass alle Links oder technischen Details zum Projekt in die Datenbank aufgenommen werden sollten.

Mit dem Tool können Sie jede Komponente und alle anderen Details zum Projekt korrekt dokumentieren.



Der Hauptvorteil von Confluence ist die Anpassung von Dokumentvorlagen. Darüber hinaus kann ein einziges Repository mit Spezifikationen und verschiedenen Projektdokumentationen implementiert werden, die die Zugriffsebenen der Teilnehmer aufteilen. Sie müssen sich jetzt keine Sorgen mehr machen, dass Sie die alte Version der Spezifikation zur Hand haben, wie dies beispielsweise beim Versenden von Dokumenten per E-Mail der Fall ist.

Weitere Informationen zum Tool finden Sie auf der offiziellen Website des Produkts .

Jira

Rolle des Tools: Überwachung von Problemen und Aufgabenverwaltung.



Jira ist ein sehr leistungsfähiges Projektplanungs- und Management-Tool. Der Hauptteil der Funktionalität ist die Erstellung von benutzerdefinierten Arbeitsprozessen. Um die Aufgaben effektiv zu verwalten (was wir brauchen), ist es wichtig, besonders auf die korrekte Verwendung des Abfragetyps und der Aufgabe (Problemtyp) zu achten.

Um sicherzustellen, dass Entwickler Komponenten basierend auf dem richtigen Design erstellen, müssen sie jedes Mal benachrichtigt werden, wenn sich etwas am Design ändert. Sobald die Komponente aktualisiert ist, muss der Designer die Aufgabe öffnen, einen verantwortlichen Entwickler zuweisen und ihm den richtigen Aufgabentyp zuweisen.

Mit Jira können Sie sicher sein, dass absolut alle Teilnehmer des Prozesses (ich erinnere Sie daran, dass in unserem Fall 5–15) korrekte Aufgaben erhalten, die nicht verloren gehen und ihren Künstler finden.

Weitere Informationen zu Jira finden Sie auf der offiziellen Website des Produkts .

Airtable

Rolle des Tools: Komponentenverwaltung und Fortschrittsanzeige.

Airtable ist eine Mischung aus Tabellenkalkulationen und Datenbanken. All dies macht es möglich, den Betrieb aller oben diskutierten Werkzeuge anzupassen.

Beispiel 1. Komponentenverwaltung Die Verwendung

des Styleguide-Generators ist nicht immer bequem - das Problem ist, dass Designer ihn nicht bearbeiten können. Darüber hinaus ist die Entscheidung, die Sketch-Komponentenbibliothek zu verwenden, nicht allzu richtig, da sie viele Einschränkungen aufweist. Höchstwahrscheinlich funktioniert die Verwendung dieser Bibliothek außerhalb des Programms einfach nicht.

Auch lufttauglich kann man nicht als ideal bezeichnen, aber es ist besser als viele andere ähnliche Lösungen. Hier ist eine Demo der Komponentenverwaltungstabellenvorlage:



Wenn ein Entwickler eine Entwurfskomponente akzeptiert, wertet er die resultierende Komponente basierend auf ABEM aus und registriert die Komponente in der Tabelle. Insgesamt gibt es 9 Spalten:

  • Name - der Name der Komponente nach dem ABEM-Prinzip.
  • Vorschau - hier wird entweder ein Screenshot oder ein Bild einer von einer anderen Quelle heruntergeladenen Komponente platziert.
  • Eine verknüpfte Seite ist ein Link zur Seite einer Komponente.
  • Untergeordnete Komponente - Verweis auf untergeordnete Komponenten.
  • Modifikator - Überprüfen Sie, ob Stiloptionen vorhanden sind, und bestimmen Sie sie (z. B. aktiv, rot usw.).
  • Die Komponentenkategorie ist eine allgemeine Kategorie (Text, Werbung, Seitenleiste).
  • Entwicklungsstatus - der tatsächliche Entwicklungsfortschritt und seine Definition (abgeschlossen, in Bearbeitung usw.).
  • Verantwortlich ist der Entwickler, der für diese Komponente verantwortlich ist.
  • Die atomare Ebene ist die atomare Kategorie dieser Komponente (gemäß dem Konzept des atomaren Designs).
  • Sie können Daten in derselben oder in verschiedenen Tabellen referenzieren. Durch die Verbindung von Punkten werden Sie beim Skalieren nicht verwirrt. Darüber hinaus können die Daten problemlos gefiltert, sortiert und geändert werden.

Beispiel 2: Seitenentwicklungsfortschritt

Zum Bewerten des Seitenentwicklungsfortschritts benötigen Sie eine Vorlage, die speziell für diesen Zweck erstellt wurde. Der Tisch kann sowohl für die Bedürfnisse des Teams selbst als auch für den Kunden dienen.



Alle Informationen zu dieser Seite können hier markiert werden. Dies ist eine Frist, ein Link zu einem InVision-Prototyp, ein Ziel, eine untergeordnete Komponente. Es wird sofort deutlich, dass die Operationen sowohl in Bezug auf die Dokumentation und Aktualisierung des Designs als auch in Bezug auf den Entwicklungsstatus des Frontends und des Backends sehr bequem durchzuführen sind. Darüber hinaus werden diese Operationen gleichzeitig ausgeführt.

Zusammenfassung

Die Rolle des Tools: eine einzige Quelle für die Versionskontrolle von Design-Assets.



Abstract kann in Sketch als GitHub für Assets bezeichnet werden und erspart Designern das Kopieren und Einfügen von Dateien. Der Hauptvorteil des Tools besteht darin, dass es ein Speicher für Design ist und als "einzige Quelle der Wahrheit" fungiert. Designer sollten den Hauptzweig auf die neueste Version des genehmigten Layouts aktualisieren. Danach müssen sie die Entwickler benachrichtigen. Diese wiederum sollten nur mit Designer-Assets der Hauptbranche zusammenarbeiten.

Als Fazit


Nachdem wir den neuen Entwicklungsprozess und alle oben genannten Tools eingeführt hatten, hat sich die Geschwindigkeit unserer Arbeit mindestens verdoppelt. Dies ist keine ideale Lösung, aber sehr gut. Es stimmt, damit es funktioniert, müssen Sie sich viel Mühe geben - es erfordert „manuelle Arbeit“, um all dies zu aktualisieren und in einem funktionierenden Zustand zu halten.
Skillbox empfiehlt:



Jetzt auch beliebt: