Un flux de lucru mai bun pentru dezvoltare web: Confluență, Airtabil, Jira și Rezumat

Confluență, Jira, Airtable și Abstract

中文 版 連結 (versiunea chineză) / Postat inițial pe vinceshao.com

Lucrând ca dezvoltator front-end timp de aproape doi ani, am primit experiență utilă din partea a mai multor proiecte de dezvoltare web a proiectelor / agențiilor digitale.

O lecție evidentă, dar valoroasă pe care am învățat-o este că a colabora între fiecare grup cu un singur obiectiv, dar responsabilități și scopuri distincte nu este ușor. Există diferite aspecte și niveluri de dificultăți în ceea ce privește colaborarea, iar partea specifică pe care aș dori să o abordez aici este procesul de lucru.

Pe baza experienței mele și cu ajutorul prietenilor mei proiectanți și dezvoltatori, am construit un flux de lucru pentru dezvoltare de site-uri conceput pentru o echipă mică (5-15 persoane). Sistemul este compus din Confluence, Jira, Airtable și Abstract. În acest articol, voi împărtăși de ce și cum de acest flux de lucru.

Motivația pentru construirea unui nou flux de lucru

Pentru a livra un site web personalizat fără a utiliza șabloane furnizate de constructorii de site-uri web, cerințele minime de talent includ un proiectant, dezvoltator și manager de proiect. După ce am participat la câteva cazuri, am avut un sentiment că nu a fost ceva în neregulă cu fluxul de lucru pe care îl aveam: informațiile importante nu au fost întotdeauna aliniate atât intern, între roluri diferite, cât și extern la client. Această comunicare ineficientă a încetinit în mod clar ciclul de dezvoltare și a rănit echipa.

Așa că am început să rezolv această problemă.

Căutarea Google resurse excelente: funcții de sisteme de proiectare, resurse de ghid de stil și definiție a fluxului de lucru

Google am căutat resurse despre crearea și îmbunătățirea unui flux de lucru. Deși am învățat multe din toate resursele deosebite, nu am găsit aproape niciuna dintre acestea pentru proiecte de dezvoltare web într-o agenție de design / digital. Acesta a fost fie un sistem de proiectare sau ghiduri de codare care au vizat proiectarea sau rolurile front-end, sau un flux de lucru care a fost creat pentru o echipă cu propriul său produs.

Drept urmare, am decis să aleg cireșele pieselor de care aveam nevoie pentru rezolvarea problemelor noastre și am format un flux de lucru personalizat pentru dezvoltarea site-urilor web.

Probleme și obiective

În continuare, sunt problemele pe care le-am inspectat din fluxul nostru de lucru existent și obiectivele corespunzătoare de îmbunătățire:

1. Metodologia cascadei

cascadă model abstract abstract

Problemă: Pe baza experienței mele, proiectele site-ului web adoptă o abordare a cascadei, deoarece clienții nu au un concept de produs viabil minim (MVP). În loc să împartă funcționalitățile din vizualizări și modulare, clienții tind să se gândească la site într-un mod tradițional de la pagină la pagină, ceea ce obligă atât designerii cât și dezvoltatorii să lucreze pagină după pagină în secvență. Acest lucru îi determină să piardă o perspectivă universală asupra proiectului. Această situație are ca rezultat o mulțime de revizii redundante între pagini.

Obiectiv: Schimbarea mentalității clienților este atât arogantă, cât și nerealistă. Scopul este de a găsi o modalitate de a separa cerințele de vizualizări cât mai curând posibil și de a dezvolta o modalitate cât mai modulată posibil pe baza modelului pagină cu pagină.

2. Jetoane și componente de design universal gestionate atât de designeri cât și de dezvoltatori

jetoane de design de la Salesforce

Problemă: aceasta este o problemă comună la care multe articole au împărtășit soluții grozave, care propun mai ales construirea unui sistem de proiectare gestionat de ghidul de stil / generatorii de bibliotecă. Deși este o soluție excelentă, gestionarea unui site suplimentar care abia a oferit permisiunea de editare proiectanților nu a fost adecvată în situația noastră.

Obiectiv: cu excepția creării de jetoane și limbaje de design universale pe care designerii, dezvoltatorii și managerii le pot înțelege cu toții, să construiască un sistem care să permită tuturor să gestioneze activele într-un mod sincron.

3. Tabloul de bord cu progrese exacte și actualizate

avem nevoie de un tablou de bord pentru progres și accesibil

Problemă: Deși trackerele de emisiuni, kanban și mai multe modele de gestionare a proiectelor sunt utile și practice, majoritatea nu au reușit să funcționeze ca un tablou de bord de progres simplu, flexibil și prietenos. Acest tip de tablă de bord ar economisi mult timp echipa deoarece ar împiedica membrii echipei să raporteze activ sau să întrebe despre situația actuală a sarcinilor specifice. De asemenea, ușurează viața managerilor dacă au o cunoaștere clară a întregului proiect fără prea mult efort.

Obiectiv: construiți un sistem de bord care oferă permisiunea de editare pentru persoanele responsabile de anumite sarcini.

Schema fluxului de lucru

Înainte de a ne afunda în introducerea detaliată a stivei de instrumente de management, aruncăm o privire la fluxul de lucru simplificat pe care l-am organizat. Este doar o vizualizare a unui flux de lucru normal pe care majoritatea agențiilor îl au, dar aici trebuie menționate două puncte.

diagrama fluxului de lucru am proiectat

1. Evaluarea dezvoltatorilor

În primul rând, atunci când cerințele sau problemele care vin din partea clientului sunt aprobate și documentate de către manager, cu excepția trimiterii sarcinii către un proiectant, ei merg și la un dezvoltator pentru evaluare. În acest proces, dezvoltatorul examinează specificațiile sarcinii, verificând dacă sunt incluse funcții sau funcții destul de complicate. Dacă este pozitiv, dezvoltatorul ar putea începe să lucreze la el sau să-l anunțe proiectantului despre posibilele probleme.

2. Sursa unică de adevăr

De asemenea, observați că, după ce proiectarea livrării este aprobată de client și înainte de a preda sarcina pe mâna dezvoltatorului, aceasta trece printr-un proces de înregistrare / modificare / ștergere a magazinului de design realizat de proiectant. Acest lucru se datorează faptului că dezvoltatorul ar trebui să fie întotdeauna expus la o singură sursă de magazin de design, care conține active permanent întreținute și actualizate gata de dezvoltare.

Acum putem să ne scufundăm în stiva de instrumente de management pe care am pregătit-o și să vedem cum instrumentele ne ajută să ne rezolvăm problemele.

Instrumentele se stivuiesc

După ce am experimentat diverse opțiuni de pe piață, stiva pe care o propun aici este compusă din Confluence, Jira, Airtable și Abstract. Pe lângă introducerea de bază și câteva exemple cheie de aplicație, nu voi acoperi toate detaliile privind utilizarea instrumentelor.

design atomic și ABEM

Notă: sistemul presupune că echipa de dezvoltare adoptă metodologia de proiectare atomică și sistemul de denumire ABEM.

1. Confluența

Rolul: centru de informații și resurse

Deși la început este intimidant, Confluence oferă un spațiu de lucru puternic, ușor de organizat și are tone de funcții, integrare de aplicații și șabloane personalizate. Cu siguranță nu este o soluție universală pentru toate problemele, dar este perfectă pentru documentarea specificațiilor, cerințelor, notelor de întâlnire și multe altele.

Prin urmare, Confluence în acest stack funcționează ca un centru de informații și resurse, ceea ce înseamnă că fiecare legătură și detalii legate de acest proiect ar trebui documentate corect aici.

Avantajul meu preferat de Confluence este capacitatea de a personaliza șabloane de documente. Această caracteristică face cu adevărat convenabil să standardizeze fluxul de lucru.

etapa de evaluare a dezvoltatorilor

Exemplu: Revizuirea funcționalității componentelor

Am menționat mai sus procesul de evaluare a dezvoltatorilor, care este de fapt o muncă complicată. Acest lucru se datorează faptului că acest proces include informații de bază ale componentei, revizuirea FSM a dezvoltatorului (dacă este necesar), spațiu frecvent și multe altele. Dar flexibilitatea șabloanelor și a instrumentelor pe care le oferă Confluența face acest lucru ușor. Creează doar un șablon în setările de configurare și ești bine să mergi.

șablon personalizat pentru revizuirea componentelor în Confluence

2. Jira

Rolul: urmărirea problemelor și gestionarea tipului de acțiune

De asemenea, un membru al familiei atlassiene, Jira este un software puternic de urmărire a problemelor și de planificare a proiectelor. Partea mea preferată despre aceasta este crearea de fluxuri de lucru cu probleme personalizate. Întrucât există o mulțime de tutoriale grozave despre cum să folosești puterea Jira, singurul lucru pe care vreau să-l subliniez aici este utilizarea tipului de problemă menționat mai jos.

magazin de design de actualizare a designerului

Exemplu: Actualizați dezvoltatorul pentru modificările magazinului de design în funcție de tipul problemei

Pentru a se asigura că dezvoltatorii construiesc componentele pe baza vizualizărilor corecte de proiectare, acestea trebuie notificate de fiecare dată când se actualizează ceva din magazinul de proiectare, care include acțiuni precum înregistrarea, modificarea și ștergerea. Deci, pe măsură ce o componentă este actualizată, proiectantul ar trebui să deschidă o problemă cu dezvoltatorul responsabil alocat și tipul corect de acțiune / acțiune selectat.

Funcțiile tipurilor de probleme Jira

3. Accesibil

Rolul: managementul componentelor și tabloul de bord de progres

Airtable, un amestec de foi de calcul și bază de date, este ceea ce face ca această stivă să funcționeze. Există două caracteristici uimitoare care acceptă fluxul meu de lucru: patru tipuri de tranziție de vizualizare într-un tabel unic și link-uri de conținut conexe. Voi prezenta aici două exemple de utilizare a acestor două funcții.

dezvoltatorul începe să lucreze la sarcină

Exemplul 1: Managementul componentelor

Cum vă gestionați biblioteca de componente? Am ales să nu utilizăm un generator de ghiduri de stil, deoarece nu este accesibil pentru editori de designeri. Folosirea bibliotecii componente Sketch nu a fost adecvată, deoarece are prea multe limitări dacă am încercat să o utilizăm în afara domeniului de aplicare al software-ului în sine.

Nu aș spune că Airtable este o soluție perfectă, dar este cea mai ușoară și mai flexibilă opțiune la care m-aș putea gândi. Uitați-vă la șablonul demonstrativ al tabelului de gestionare a componentelor aici:

tabel de componente

Odată ce o vizualizare de proiectare recent înregistrată, care este pregătită pentru a fi dezvoltată programatic, este transmisă dezvoltatorului, acestea vor evalua vizualizarea bazată pe sistemul ABEM și o vor înregistra în tabel. Există 9 coloane în tabel, inclusiv:

1. Nume: denumirea componentei în principiul ABEM

2. Previzualizare: captură de ecran sau imagine exportată a componentei

3. Pagina legată: linkul către pagina conține această componentă

4. Componenta copiilor: legătura cu componentele copiilor conține aceasta

5. Modificator: verifică dacă există variații de stil (ex: - activ, - roșu)

6. Categorie de componente: o clasificare a categoriei generale (ex: text, erou, bara laterală)

7. Starea dezvoltării: starea progresului dezvoltării (în așteptare, alocare, în desfășurare, completă, în revizuire)

8. Destinatar: dezvoltator responsabil pentru această componentă

9. Nivel atomic: categorie atomică a acestei componente (atom, moleculă, organism)

Cel mai bun lucru este faptul că puteți face referințe de date atât în ​​aceleași tabele, cât și în alte tabele. Această conexiune de puncte împiedică lucrurile să devină mai încordate pe măsură ce scara crește. De asemenea, observați că puteți filtra, sorta și schimba opiniile cu ușurință.

Exemplul 2: starea dezvoltării paginii

Întrucât presupunem aici că în mod inevitabil vom analiza progresul dezvoltării pagină cu pagină, este necesar un model de tabel conceput în acest scop. Acest tabel poate fi un tablou de bord pentru ambele echipe interne și partajat în același timp cu clientul.

tabel cu lista de pagini

Orice informații despre pagină, inclusiv termenul limită, linkul prototipului InVision, destinatarul și componenta copiilor pot fi organizate aici. Rețineți că este foarte convenabil să documentați și să actualizați în același timp starea de dezvoltare, front-end și back-end.

4. Rezumat

Rolul: unică sursă de control al versiunii activelor de proiectare

Rezumatul este GitHub pentru Sketch active care salvează designerii din infernul copierii și lipirii fișierelor. Nu se află în sfera acestui articol pentru a demonstra detalii despre gestionarea fluxului de control al versiunilor. Cea mai importantă opțiune este că Rezumatul este magazinul de design care acționează ca o singură sursă de adevăr. Proiectanții ar trebui să continue actualizarea filialei master la cea mai recentă versiune a proiectării confirmate și apoi să anunțe dezvoltatorii. Pe de altă parte, dezvoltatorii ar trebui să ia doar ca referință activele de proiectare în ramura principală.

Model de ramură abstractă

Mai multă muncă de făcut

Din experiența mea, dezvoltarea întregului proiect după adoptarea acestui nou flux de lucru a fost de cel puțin două ori mai rapid decât înainte. Nu este o soluție perfectă, deoarece necesită totuși multă muncă manuală pentru actualizare și întreținere.

Dar cred că ar putea fi o referință utilă la echipele de dezvoltare a site-urilor web care caută un flux de lucru mai bun și sper că mai multe persoane își pot împărtăși fluxurile de lucru în viitor!