Ik werk nu ongeveer twee jaar als front-end developer en heb meegewerkt aan de creatie van een grote verscheidenheid aan projecten. Een van de lessen die ik heb geleerd is dat samenwerking tussen verschillende teams van ontwikkelaars die hetzelfde doel delen maar verschillende taken en verantwoordelijkheden hebben, niet eenvoudig is.
In overleg met andere teamleden, ontwerpers en ontwikkelaars heb ik een website-creatiecyclus ontworpen voor kleine teams (5-15 personen). Het bevat tools zoals Confluence, Jira, Airtable en Abstract. In dit artikel zal ik de kenmerken van het organiseren van de workflow delen.
Skillbox beveelt aan: Tweejarige praktijkopleiding .
Herinnering: voor alle lezers van "Habr" - een korting van 10 roebel bij inschrijving voor een Skillbox-cursus met behulp van de promotiecode "Habr".
Waarom is dit allemaal nodig?
Het minimale team dat nodig is om een website helemaal opnieuw te maken, is een ontwerper, programmeur en projectmanager. In mijn geval werd het team gevormd. Maar na de release van een paar sites kreeg ik het gevoel dat er iets mis mee was. Soms begrepen we onze verantwoordelijkheden simpelweg niet helemaal en liet de communicatie met de klant te wensen over. Dit alles vertraagde het proces en verontrustte iedereen.
Ik begon te werken aan het oplossen van het probleem.
Een Google-zoekopdracht levert goede resultaten op voor ons probleem.
Om het werk visueeler te maken, heb ik een workflowdiagram gemaakt dat inzicht geeft in hoe hier wordt gewerkt.
Klik op de afbeelding om deze in volledige resolutie te openen.
Doelen en doelstellingen
Eén van de eerste technieken die ik besloot te testen was het “cascademodel” (Waterval). Ik gebruikte het om problemen onder de aandacht te brengen en te begrijpen hoe ik ze kon oplossen.
Probleem: Meestal evalueert de klant het proces voor het maken van een website niet modulair, zoals ontwikkelaars dat doen. Hij beschouwt het als een gewone site, dat wil zeggen dat hij denkt in termen van afzonderlijke pagina's. Volgens hem creëren ontwerpers en programmeurs individuele pagina's, de een na de ander. Het gevolg is dat de klant simpelweg niet begrijpt wat wat volgt tijdens het eigenlijke proces.
Taak: Het heeft geen zin om de klant van het tegendeel te overtuigen; de beste optie is het ontwikkelen van een modulair proces voor het creëren van een website binnen het bedrijf, gebaseerd op een pagina-voor-pagina-model.
Universele ontwerptokens en componenten worden beheerd door zowel ontwikkelaars als ontwerpers.
Probleem: Dit is een veel voorkomende situatie waar veel strategieën op inspelen. Er zijn veel interessante oplossingen, in de meeste gevallen wordt voorgesteld om een ontwerpsysteem te creëren dat wordt bestuurd door een stijlgids / bibliotheekgeneratoren. Maar in onze situatie was het eenvoudigweg niet mogelijk om nog een component aan het ontwikkelingsproces toe te voegen waarmee we de toegangsniveaus voor ontwerpers konden beheren.
Taak: het bouwen van een universeel systeem waarin ontwerpers, ontwikkelaars en managers synchroon kunnen werken zonder elkaar te hinderen.
Nauwkeurige tracking van de ontwikkeling
Probleem: Hoewel er veel nuttige hulpmiddelen beschikbaar zijn om problemen op te sporen en de algehele voortgang te meten, zijn de meeste niet flexibel of optimaal. De tool kan nuttig zijn door het team tijd te besparen die normaal gesproken zou worden besteed aan vragen en verduidelijkingen over specifieke taken. Het maakt het leven van managers ook gemakkelijker, omdat ze een nauwkeuriger inzicht krijgen in het hele project.
Taak: maak een dashboard om de voortgang te volgen van taken die door verschillende teamleden worden uitgevoerd.
Tool kit
Nadat ik met verschillende tools had geëxperimenteerd, kwam ik uit op de volgende set: Confluence, Jira, Airtable en Abstract. Hieronder zal ik de voordelen van elk onthullen.
samenvloeiing
Rol van de tool: informatie- en informatiecentrum.
De werkruimte van Confluence is relatief eenvoudig in te stellen, heeft veel functies, integraties met verschillende apps en heeft individuele, aanpasbare sjablonen. Het is geen one-size-fits-all oplossing, maar het is ideaal als informatie- en informatiecentrum. Dit betekent dat elke referentie of technisch detail met betrekking tot het project in de database moet worden ingevoerd.
Met de tool kunt u elk onderdeel en alle andere details van het project correct documenteren.
Het belangrijkste voordeel van Confluence is het aanpassen van documentsjablonen. Bovendien kan het worden gebruikt om één enkele opslagplaats van specificaties en diverse projectdocumentatie te implementeren, waarbij de toegangsniveaus van deelnemers worden gescheiden. U hoeft zich nu geen zorgen meer te maken dat u een oude versie van de specificatie bij de hand heeft, zoals wel het geval is wanneer u documenten per e-mail verzendt.
Meer informatie over het hulpmiddel .
Jira
Rol van de tool: probleemmonitoring en taakbeheer.
Jira is een zeer krachtige tool voor projectplanning en -beheer. Het grootste deel van de functionaliteit is het creëren van aanpasbare workflows. Om problemen effectief te kunnen beheren (wat we nodig hebben), is het de moeite waard om speciale aandacht te besteden aan het juiste gebruik van het verzoektype en het probleemtype (probleemtype).
Om er zeker van te zijn dat ontwikkelaars componenten bouwen op basis van het juiste ontwerp, moeten ze dus elke keer dat er iets verandert in het ontwerp op de hoogte worden gesteld. Zodra de component is bijgewerkt, moet de ontwerper een issue openen, een verantwoordelijke ontwikkelaar aanwijzen en hem het juiste issuetype toewijzen.
Met Jira kun je er zeker van zijn dat absoluut alle deelnemers aan het proces (laat me je eraan herinneren, in ons geval zijn dat er 5-15) de juiste taken ontvangen die niet verloren gaan en hun uitvoerder vinden.
Meer informatie over Jira .
Airtable
Rol van de tool: componentenbeheer en voortgangsbord.
Airtable is een mix van spreadsheets en databases. Dit alles maakt het mogelijk om de werking van alle hierboven besproken tools aan te passen.
Voorbeeld 1: Componentbeheer
Wat de stijlgidsgenerator betreft, deze is niet altijd handig in gebruik - het probleem is dat ontwerpers deze niet kunnen bewerken. Bovendien zou het geen goede beslissing zijn om de Sketch-componentenbibliotheek te gebruiken, omdat deze veel beperkingen heeft. Hoogstwaarschijnlijk kunt u deze bibliotheek eenvoudigweg niet buiten het programma gebruiken.
Airtable is ook niet perfect, maar het is beter dan veel andere vergelijkbare oplossingen. Hier is een demo van de Component Management Table-sjabloon:
Wanneer een ontwikkelaar een ontwerpcomponent accepteert, evalueert hij de resulterende ABEM door de component in een tabel vast te leggen. Er zijn in totaal 9 kolommen:
- Naam - de naam van het onderdeel volgens het ABEM-principe.
- Preview - Hier wordt een screenshot of een afbeelding geplaatst van het onderdeel dat is gedownload van een andere bron.
- Een gekoppelde pagina is een link naar de pagina van een component.
- Onderliggende component - een koppeling naar onderliggende componenten.
- Modifier - controleert op de aanwezigheid van stijlopties en definieert deze (bijvoorbeeld actief, rood, enz.).
- Componentcategorie is een algemene categorie (tekst, promotionele afbeelding, zijbalk).
- Ontwikkelingsstatus - de feitelijke voortgang van de ontwikkeling en de definitie ervan (voltooid, in uitvoering, enz.).
- Verantwoordelijk - de ontwikkelaar die verantwoordelijk is voor dit onderdeel.
- Atoomniveau is de atomaire categorie van dit onderdeel (volgens het concept van atomair ontwerp).
- Er kan naar gegevens worden verwezen in dezelfde of in verschillende tabellen. Door de punten met elkaar te verbinden, voorkom je verwarring bij het schalen. Bovendien kunnen de gegevens zonder problemen worden gefilterd, gesorteerd en gewijzigd.
Voorbeeld 2: voortgang van paginaontwikkeling
Om de voortgang van de pagina-ontwikkeling te evalueren, heeft u een sjabloon nodig die speciaal voor dit doel is gemaakt. De tafel kan zowel aan de behoeften van het team zelf als aan de klant voldoen.
Alle informatie over de pagina kan hier worden gemarkeerd. Dit is een deadline, een link naar het InVision-prototype, een bestemming, een onderliggende component. Het valt meteen op dat de handelingen erg handig zijn om uit te voeren, zowel wat betreft het documenteren en updaten van het ontwerp, als de status van front-end en back-end ontwikkeling. Bovendien worden deze bewerkingen gelijktijdig uitgevoerd.
Abstract
Rol van de tool: één enkele bron voor versiebeheer voor ontwerpmiddelen.
Abstract kan de GitHub voor assets in Sketch worden genoemd, en het bespaart ontwerpers de noodzaak om bestanden te kopiëren en te plakken. Het belangrijkste voordeel van de tool is dat het een ontwerprepository biedt die fungeert als ‘enkele bron van waarheid’. Ontwerpers moeten de masterbranch bijwerken naar de nieuwste versie van de goedgekeurde lay-out. Daarna moeten ze de ontwikkelaars op de hoogte stellen. Deze zouden op hun beurt alleen moeten werken met designermiddelen uit de hoofdtak.
Als conclusie
Nadat we het nieuwe ontwikkelproces en alle bovengenoemde tools hadden geïmplementeerd, is de snelheid van ons werk minstens twee keer zo hoog geworden. Het is geen perfecte oplossing, maar wel een hele goede. Het is waar dat je, om het te laten werken, veel moeite moet doen - het vereist "handmatig werk" om alles bij te werken en in goede staat te houden.
Skillbox beveelt aan:
- Praktische cursus .
- Online cursus .
- Praktische jaarcursus .
Bron: www.habr.com