Jag har arbetat som frontend-utvecklare i ungefär två år och har deltagit i skapandet av en mängd olika projekt. En av lärdomarna jag lärde mig är att samarbete mellan olika team av utvecklare som delar samma mål men har olika uppgifter och ansvar inte är lätt.
I samråd med andra teammedlemmar, designers och utvecklare skapade jag en webbdesigncykel designad för små team (5-15 personer). Den innehåller verktyg som Confluence, Jira, Airtable och Abstract. I den här artikeln kommer jag att dela funktionerna för att organisera arbetsflödet.
Skillbox rekommenderar: Tvåårig praktisk kurs .
Påminnelse: för alla läsare av "Habr" - en rabatt på 10 000 rubel när du anmäler dig till någon Skillbox-kurs med hjälp av "Habr"-kampanjkoden.
Varför behövs allt detta?
Det minsta team som behövs för att skapa en webbplats från grunden är en designer, programmerare och projektledare. I mitt fall bildades laget. Men efter utgivningen av ett par sajter fick jag en känsla av att något var fel med den. Ibland förstod vi helt enkelt inte vårt ansvar fullt ut, och kommunikationen med kunden lämnade mycket övrigt att önska. Allt detta saktade ner processen och störde alla.
Jag började jobba på att lösa problemet.
En sökning på Google ger bra resultat på vårt problem.
För att göra arbetet mer visuellt skapade jag ett arbetsflödesdiagram som ger en förståelse för hur arbetet går till här.
Klicka på bilden för att öppna i full upplösning.
Mål och mål
En av de första teknikerna som jag bestämde mig för att testa var "kaskadmodellen" (vattenfall). Jag använde den för att lyfta fram problem och förstå hur man löser dem.
Problem: Oftast utvärderar klienten inte processen för att skapa webbsidor modulärt, som utvecklare gör. Han uppfattar det som en vanlig sajt, det vill säga han tänker i termer av enskilda sidor. Enligt hans åsikt skapar designers och programmerare individuella sidor, en efter en. Som ett resultat förstår kunden helt enkelt inte vad som följer efter under själva processen.
Uppgift: Det är ingen idé att övertyga kunden om något annat, det bästa alternativet är att utveckla en modulär process för att skapa en webbplats inom företaget baserat på en sida-för-sida-modell.
Universell design-tokens och komponenter hanteras av både utvecklare och designers.
Problem: Detta är en vanlig situation som många strategier åtgärdar. Det finns många intressanta lösningar, i de flesta fall föreslås det att skapa ett designsystem som styrs av en stilguide / biblioteksgeneratorer. Men i vår situation var det helt enkelt inte möjligt att lägga till ytterligare en komponent i utvecklingsprocessen som skulle tillåta oss att hantera åtkomstnivåer för designers.
Uppgift: bygga ett universellt system där designers, utvecklare och chefer kan arbeta synkront utan att störa varandra.
Exakt utvecklingsspårning
Problem: Även om det finns många användbara verktyg tillgängliga för att spåra problem och mäta övergripande framsteg, är de flesta inte flexibla eller optimala. Verktyget kan vara användbart genom att spara den teamtid som normalt skulle läggas på frågor och förtydliganden om specifika uppgifter. Det gör också livet lättare för chefer genom att ge dem en mer exakt förståelse för hela projektet.
Uppgift: skapa en instrumentpanel för att spåra framstegen för uppgifter som utförs av olika teammedlemmar.
verktygslåda
Efter att ha experimenterat med olika verktyg bestämde jag mig för följande set: Confluence, Jira, Airtable och Abstract. Nedan kommer jag att avslöja fördelarna med var och en.
Konfluens
Verktygets roll: informations- och resurscenter.
Confluences arbetsyta är relativt enkel att sätta upp, har många funktioner, integrationer med olika appar och har individuella, anpassningsbara mallar. Det är inte en lösning som passar alla, men den är idealisk som informations- och resurscenter. Detta innebär att alla referenser eller tekniska detaljer relaterade till projektet måste läggas in i databasen.
Verktyget låter dig dokumentera varje komponent och alla andra detaljer om projektet korrekt.
Den största fördelen med Confluence är anpassningen av dokumentmallar. Dessutom kan den användas för att implementera ett enda arkiv med specifikationer och olika projektdokumentation, som skiljer åt deltagarnas åtkomstnivåer. Nu behöver du inte oroa dig för att du har en gammal version av specifikationen på dina händer, som händer när du skickar dokument via e-post.
Mer information om verktyget .
Jira
Verktygets roll: problemövervakning och uppgiftshantering.
Jira är ett mycket kraftfullt projektplanerings- och ledningsverktyg. Huvuddelen av funktionaliteten är skapandet av anpassningsbara arbetsflöden. För att effektivt kunna hantera problem (vilket är vad vi behöver) är det värt att ägna särskild uppmärksamhet åt korrekt användning av förfrågningstyp och problemtyp (problemtyp).
Så för att säkerställa att utvecklare bygger komponenter baserat på rätt design måste de meddelas varje gång något ändras i designen. Så snart komponenten är uppdaterad måste designern öppna ett problem, tilldela en ansvarig utvecklare, tilldela honom rätt problemtyp.
Med Jira kan du vara säker på att absolut alla deltagare i processen (låt mig påminna dig, i vårt fall är det 5–15 stycken) får korrekta uppgifter som inte går vilse och hittar sin exekutor.
Lär dig mer om Jira .
Airtable
Verktygets roll: komponenthantering och framstegstavla.
Airtable är en blandning av kalkylblad och databaser. Allt detta gör det möjligt att anpassa driften av alla verktyg som diskuterats ovan.
Exempel 1: Komponenthantering
När det gäller stilguidegeneratorn är den inte alltid bekväm att använda - problemet är att designers inte kan redigera den. Dessutom skulle det inte vara ett bra beslut att använda Sketch-komponentbiblioteket, eftersom det har många begränsningar. Troligtvis kommer du helt enkelt inte att kunna använda det här biblioteket utanför programmet.
Airtable är inte heller perfekt, men det är bättre än många andra liknande lösningar. Här är en demo av komponenthanteringstabellmallen:
När en utvecklare accepterar en designkomponent utvärderar han den resulterande ABEM genom att registrera komponenten i en tabell. Det finns totalt 9 kolumner:
- Namn - namnet på komponenten enligt ABEM-principen.
- Förhandsgranskning - Här placeras antingen en skärmdump eller en bild av komponenten som laddats ner från en annan källa.
- En länkad sida är en länk till en komponents sida.
- Underordnad komponent - en länk till underordnade komponenter.
- Modifierare - kontrollerar förekomsten av stilalternativ och definierar dem (till exempel aktiv, röd, etc.).
- Komponentkategori är en allmän kategori (text, reklambild, sidofält).
- Utvecklingsstatus - det faktiska utvecklingsförloppet och dess definition (avslutat, pågående, etc.).
- Ansvarig - utvecklaren som är ansvarig för denna komponent.
- Atomnivå är atomkategorin för denna komponent (enligt begreppet atomdesign).
- Data kan refereras i samma eller i olika tabeller. Att koppla ihop prickarna kommer att förhindra förvirring vid skalning. Dessutom kan data filtreras, sorteras och ändras utan problem.
Exempel 2: framsteg i sidutveckling
För att utvärdera utvecklingen av sidan behöver du en mall som är skapad speciellt för detta ändamål. Bordet kan tjäna både teamets och kundens behov.
All information om sidan kan markeras här. Detta är en deadline, en länk till InVision-prototypen, en destination, en underordnad komponent. Det märks direkt att operationerna är mycket bekväma att utföra, både vad gäller att dokumentera och uppdatera designen, samt status för front-end och back-end utveckling. Dessutom utförs dessa operationer samtidigt.
Abstrakt
Verktygets roll: en enda källa för versionskontroll för designtillgångar.
Abstrakt kan kallas GitHub för tillgångar i Sketch, och det sparar designers från att behöva kopiera och klistra in filer. Den största fördelen med verktyget är att det tillhandahåller ett designlager som fungerar som en "enda källa till sanning." Designers måste uppdatera huvudgrenen till den senaste versionen av den godkända layouten. Efter det måste de meddela utvecklarna. Dessa ska i sin tur bara fungera med designertillgångar från huvudgrenen.
Som slutsats
Efter att vi implementerat den nya utvecklingsprocessen och alla verktyg som nämns ovan, ökade hastigheten på vårt arbete minst två gånger. Det är inte en perfekt lösning, men det är en väldigt bra lösning. Det är sant, för att det ska fungera måste du anstränga dig mycket - det kräver "manuellt arbete" för att uppdatera och underhålla allt i fungerande skick.
Skillbox rekommenderar:
- Praktisk kurs .
- Onlinekurs .
- Praktisk årskurs .
Källa: will.com