En bedre arbejdsgang til webudvikling: Confluence, Airtable, Jira og Abstract

Confluence, Jira, Airtable og Abstract

中文 版 連結 (kinesisk version) / Oprindeligt postet på vinceshao.com

Arbejder som en front-end udvikler i næsten to år, jeg har fået nyttige erfaringer fra at være en del af flere webudviklingsprojekter for design / digitale agenturer.

En åbenlys, men værdifuld lektion, jeg har lært, er, at samarbejde mellem hver gruppe med ét mål, men forskellige ansvarsområder og formål ikke er let. Der er forskellige aspekter og niveauer af vanskeligheder med hensyn til samarbejde, og den specifikke del, som jeg gerne vil adressere her, er workflow-processen.

Baseret på min erfaring og med hjælp fra mine designer- og udviklervenner byggede jeg en arbejdsgang til webstedsudvikling designet til lille team (5-15 personer). Systemet er sammensat af Confluence, Jira, Airtable og Abstract. I denne artikel deler jeg hvorfor og hvordan denne arbejdsgang er.

Motivation til at opbygge en ny arbejdsgang

For at levere et tilpasset websted uden brug af skabeloner leveret af webstedsbyggerne inkluderer kravene til minimum talent en designer, udvikler og projektleder. Efter at have deltaget i et par tilfælde havde jeg en fornemmelse af, at der var noget galt med den arbejdsgang, vi havde: vigtig information var altid ikke tilpasset både internt mellem forskellige roller og eksternt til klienten. Denne ineffektive kommunikation bremsede tydeligvis udviklingscyklussen og gjorde teamet ondt.

Så jeg begyndte at løse dette problem.

Google-søgning store ressourcer: Design systemfunktioner, stilguide ressourcer og workflow definition

Jeg Google søgte ressourcer om etablering og forbedring af en arbejdsgang. Selvom jeg lærte meget af alle de store ressourcer, fandt jeg næsten ingen af ​​dem, der var til webudviklingsprojekter i et design / digitalt bureau. Det var enten et designsystem eller kodningsretningslinjer, der scoped i design eller front-end roller, eller en arbejdsgang, der blev bygget til et team med sit eget produkt.

Som et resultat besluttede jeg at kirsebær vælge de dele, jeg havde brug for for at løse vores problemer, og dannede en tilpasset arbejdsgang til webstedsudvikling.

Problemer og mål

Følgende er de problemer, jeg har inspiceret fra vores eksisterende arbejdsgang, og de tilsvarende forbedringsmål:

1. Vandfaldsmetodik

vandfald model abstrakt demo

Problem: Baseret på min erfaring vedtager webstedsprojekter en vandfaldstilgang, fordi klienter ikke har et begreb om et minimum levedygtigt produkt (MVP). I stedet for at opdele funktionaliteter fra visninger og modulering, har klienter en tendens til at tænke på stedet på en traditionel side for side-måde, hvilket tvinger både designere og udviklere til at arbejde side for side i rækkefølge. Dette får dem til at miste et universelt perspektiv på tværs af projektet. Denne situation resulterer i masser af frem og tilbage overflødige revisioner mellem sider.

Mål: Det er både arrogant og urealistisk at ændre klienters tankegang. Målet er at finde en måde til at adskille krav fra synspunkter så hurtigt som muligt og udvikle sig på en så moduleret måde som muligt internt baseret på side-for-side-model.

2. Universal design tokens og komponenter administreret af både designere og udviklere

design-tokens fra Salesforce

Problem: Dette er et almindeligt problem, som mange artikler har delt gode løsninger på, som for det meste foreslår at opbygge et designsystem, der administreres af stilguider / biblioteksgeneratorer. Selvom det er en god løsning, var det ikke relevant i vores situation at administrere et ekstra websted, der næppe gav redigeringstilladelse til designere.

Mål: Bortset fra at skabe universelle designtokener og sprog, som designere, udviklere og ledere alle kan forstå, opbygge et system, der giver alle mulighed for at styre aktiverne på en synkron måde.

3. Nøjagtigt, opdateret statusdashboard

vi har brug for et redigerbart og tilgængeligt progressionsdashboard

Problem: Selvom problemsporere, kanban og flere projektstyringsmodeller er nyttige og praktiske, kunne de fleste af dem ikke fungere som et ligetil, fleksibelt og venligt fremskridtspanel. Denne form for instrumentbræt sparer holdet meget tid, fordi det forhindrer teammedlemmer i aktivt at rapportere eller spørge om den aktuelle situation med specifikke opgaver. Det gør også ledernes liv lettere, hvis de har et klart kendskab til hele projektet uden for stor indsats.

Mål: Opbyg et dashboard-system, der giver redigeringstilladelse for personer, der er ansvarlige for specifikke opgaver.

Arbejdsdiagram

Før vi dykker ind i detaljeret introduktion af administrationsværktøjstakken, så lad os se på den abstrakte forenklede arbejdsgang, jeg organiserede. Det er stort set bare en visualisering af en normal arbejdsgang, som de fleste agenturer har, men der er to punkter, der skal bemærkes her.

arbejdsdiagram, jeg designet

1. Udviklerevaluering

For det første, når krav eller problemer, der kommer fra klienten er godkendt og dokumenteret af manager, med undtagelse af at sende opgaven til en designer, går de også til en udvikler for evaluering. I denne proces gennemgår udvikleren specifikationen af ​​opgaven og kontrollerer, om der er nogen ret komplicerede funktioner eller funktioner inkluderet. Hvis det er positivt, kan udvikleren begynde at arbejde på det eller underrette designeren om de potentielle problemer på forhånd.

2. Enkel kilde til sandhed

Bemærk også, at når design, der kan leveres, er godkendt af klienten, og inden det overleveres opgaven til udviklerens hånd, gennemgår det en proces med at registrere / ændre / slette over designbutik, som designeren udfører. Dette skyldes, at udvikleren altid skal udsættes for en og kun en kilde til designbutik, som konstant indeholder vedligeholdte og opdaterede aktiver klar til udvikling.

Nu kan vi dykke ned i administrationsværktøjstakken, jeg har forberedt, og se, hvordan værktøjerne hjælper os med at løse vores problemer.

Værktøjstakken

Efter at have eksperimenteret med forskellige muligheder på markedet er stakken, jeg foreslår her, sammensat af Confluence, Jira, Airtable og Abstract. Ud over grundlæggende introduktion og få nøgleeksempeleksempler dækker jeg ikke alle detaljer ved brug af værktøjerne.

atom design og ABEM

Bemærk: Systemet antager, at udviklingsholdet vedtager metoderne for atomisk design og ABEM-navngivningssystemet.

1. Confluence

Rolle: informations- og ressourcecenter

Selvom det er skræmmende til at begynde med, giver Confluence et stærkt arbejdsområde, der er let at organisere, og det har masser af funktioner, integration af apps og tilpassede skabeloner. Det er bestemt ikke en universel løsning på alle problemer, men det er perfekt til dokumentation af specifikationer, krav, mødeanvisninger og mere.

Derfor fungerer sammenløb i denne stakke som et informations- og ressourcecenter, hvilket betyder, at alle relaterede links og detaljer om dette projekt skal dokumenteres korrekt her.

Min favorit fordel ved Confluence er muligheden for at tilpasse dokumentskabeloner. Denne funktion gør det virkelig praktisk at standardisere arbejdsgangen.

udvikler evaluering fase

Eksempel: Gennemgang af komponentfunktionalitet

Jeg nævnte udviklerevalueringsprocessen ovenfor, som faktisk er et kompliceret job. Dette skyldes, at denne proces inkluderer grundlæggende oplysninger om komponenten, en udviklers FSM-gennemgang (om nødvendigt), ofte stillede spørgsmål og mere. Men fleksibiliteten i skabelonen og værktøjerne, som Confluence giver, gør dette super let. Bare opbyg en skabelon i konfigurationsindstillinger, og du er god til at gå.

brugerdefineret skabelon til komponentgennemgang i Confluence

2. Jira

Rolle: problemsporing og handlingstypestyring

Også et medlem af den atlasiske familie er Jira en super kraftig problemsporing og projektplanlægningssoftware. Min favorit del om det er at lave tilpassede emne-arbejdsgange. Da der er masser af gode tutorials om, hvordan man udnytter kraften i Jira, er det eneste, jeg vil påpege her, at bruge problemtypen som nævnt nedenfor.

designer opdatering design butik

Eksempel: Opdater udvikler om ændringer i designbutik efter emnetype

For at sikre, at udviklere bygger komponenterne baseret på korrekte designvisninger, skal de underrettes, når noget i designbutikken opdateres, som inkluderer handlinger som at registrere, ændre og slette. Efterhånden som en komponent opdateres, skal designeren åbne et problem med den ansvarlige udvikler tildelt og den korrekte udgave / handlingstype valgt.

Jira problemtyper fungerer

3. Luftbord

Roll: komponentstyring og fremskridt instrumentbræt

Airtable, en blanding af regneark og database, er det, der får denne stak til at fungere. Der er to fantastiske funktioner, der understøtter min arbejdsgang: fire typer visningsovergang i én tabel og relateret indholdslinkning. Jeg viser to eksempler på brug af disse to funktioner her.

udvikleren begynder at arbejde på opgaven

Eksempel 1: Komponenthåndtering

Hvordan administrerer du dit komponentbibliotek? Vi valgte ikke at bruge en stilguidegenerator, fordi det ikke er tilgængeligt for designere at redigere. Brug af Sketch-komponentbiblioteket var heller ikke passende, fordi det har for mange begrænsninger, hvis vi forsøgte at bruge det uden for selve softwaren.

Jeg ville ikke sige, at Airtable er en perfekt løsning, men det er den nemmeste og mest fleksible mulighed jeg kunne tænke på. Se på demoskabelonen i komponentadministrationstabellen her:

komponenttabel

Når en nyregistreret designvisning, der er klar til at blive udviklet programmatisk, er sendt til udvikleren, vurderer de visningen baseret på ABEM-systemet og registrerer den i tabellen. Der er 9 kolonner i tabellen, herunder:

1. Navn: navngivning af komponenten i ABEM-princippet

2. Eksempel: skærmbillede eller eksporteret billede af komponenten

3. Koblet side: link til siden indeholder denne komponent

4. Børnekomponent: link til børnekomponenter indeholder denne

5. Modifier: kontrollerer, om der er stilvariationer (eks: - aktiv, - rød)

6. Komponentkategori: en generel kategoriklassificering (eks: tekst, helt, sidebjælke)

7. Udviklingsstatus: status for udviklingsfremskridt (afventende, tildelt, i gang, komplet, i revision)

8. Mottager: udvikler, der er ansvarlig for denne komponent

9. Atomniveau: atomkategori af denne komponent (atom, molekyle, organisme)

Det bedste her er, at du kan referere til data i både de samme og andre tabeller. Denne forbindelse med prikker forhindrer ting i at blive mere messende, når skalaen vokser. Bemærk også, at du nemt kan filtrere, sortere og ændre visninger.

Eksempel 2: Status for sideudvikling

Da antagelsen her er, at vi uundgåeligt vurderer udviklingsfremskridt side for side, er en tabelskabelon designet til dette formål nødvendig. Denne tabel kan være et fremskridt-dashboard for begge interne teams og deles med klienten på samme tid.

sideliste tabel

Alle oplysninger om siden, inklusive frist, InVision-prototype-link, ansøger og børn, kan arrangeres her. Bemærk, at det er meget praktisk at dokumentere og opdatere status for design, front-end og back-end på samme tid.

4. Abstrakt

Rolle: en enkelt kilde til sandhed og design aktiver versionskontrol

Abstract er GitHub for Sketch-aktiver, der redder designere fra helvede til at kopiere og indsætte filer. Det er uden for denne artikels rækkevidde at demonstrere detaljer om styring af versionskontrolstrøm. Den vigtigste afhentning her er, at Abstract er designbutikken, der fungerer som den eneste kilde til sandhed. Designere skal fortsætte med at opdatere mastergrenen til den nyeste version af bekræftet design og derefter underrette udviklere. På den anden side bør udviklere kun tage designaktiver i mastergrenen som reference.

Abstrakt gren skabelon

Mere arbejde der skal gøres

Fra min egen erfaring har udviklingen af ​​hele projektet efter vedtagelse af denne nye arbejdsgang været mindst to gange hurtigere end før. Det er ikke en perfekt løsning, fordi det stadig kræver masser af manuelt arbejde for at opdatere og vedligeholde.

Men jeg tror, ​​det kan være en nyttig henvisning til webstedsudviklingshold, der søger efter en bedre arbejdsgang, og forhåbentlig kan flere mennesker dele deres arbejdsgange fremover!