Lucrând ca dezvoltator front-end de aproape doi ani, am o experiență utilă ca parte a mai multor proiecte de dezvoltare web ale agențiilor de design / digitale.

O lecție evidentă, dar valoroasă, pe care am învățat-o este că colaborarea dintre fiecare grup cu un singur scop, dar responsabilități și scopuri distincte nu este ușoară. 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 fluxului de lucru.

Pe baza experienței mele și cu ajutorul prietenilor mei de proiectare și dezvoltator, am construit un flux de lucru pentru dezvoltarea site-urilor web conceput pentru o echipă mică (5-15 persoane). Sistemul este compus din Confluenţă, Jira, Masa aeriană și Abstract. În acest articol, vă voi împărtăși de ce și cum se desfășoară acest flux de lucru.

Motivația pentru construirea unui nou flux de lucru

Pentru a livra un site web personalizat fără a utiliza șabloanele furnizate de constructori 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 simțit că este ceva în neregulă cu fluxul de lucru pe care îl aveam: informațiile importante nu erau întotdeauna aliniate atât intern între roluri diferite, cât și extern clientului. 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ă.

ad-banner
Un flux de lucru mai bun pentru dezvoltarea web Confluence
Flux de lucru de căutare Google, resurse excelente: Caracteristici ale sistemelor de proiectare, resurse de ghid de stil și definirea fluxului de lucru

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

Drept urmare, am decis să aleg piesele de care aveam nevoie pentru a rezolva problemele noastre și am format un flux de lucru personalizat pentru dezvoltarea site-ului web.

Probleme și obiective

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

1. Metodologia cascadei

1611926651 41 Un flux de lucru mai bun pentru dezvoltarea web Confluence
demo abstract model de cascadă

Problemă: Pe baza experienței mele, proiectele de site-uri web adoptă o abordare a cascadei, deoarece clienții nu au conceptul unui produs minim viabil (MVP). În loc să împartă funcționalitățile de vizualizări și modulizare, clienții tind să se gândească la site într-un mod tradițional pagină cu pagină, ceea ce îi obligă atât pe designeri, cât și pe dezvoltatori să lucreze pagină cu pagină în ordine. Acest lucru îi face să piardă o perspectivă universală în cadrul proiectului. Această situație are ca rezultat o mulțime de revizuiri redundante înainte și înapoi între pagini.

Poartă: 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 într-un mod cât mai modulat pe plan intern, pe baza modelului pagină cu pagină.

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

1611926652 565 Un flux de lucru mai bun pentru dezvoltarea web Confluence
proiectați jetoane de la Forta de vanzare

Problemă: Aceasta este o problemă obișnuită la care multe articole au împărtășit soluții excelente, care propun în general construirea unui sistem de proiectare gestionat de ghid de stil / generatoare de biblioteci. Deși este o soluție excelentă, gestionarea unui site suplimentar care abia a oferit proiectanților permisiunea de editare nu a fost adecvată în situația noastră.

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

3. Tabloul de bord precis, actualizat

1611926652 626 Un flux de lucru mai bun pentru dezvoltarea web Confluence
avem nevoie de un tablou de bord editabil și accesibil

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

Poartă: Construiți un sistem de tablou de bord care oferă permisiuni de editare pentru persoanele responsabile de sarcini specifice.

Diagrama fluxului de lucru

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

1611926652 115 Un flux de lucru mai bun pentru dezvoltarea web Confluence
diagrama fluxului de lucru pe care am proiectat-o

1. Evaluarea dezvoltatorului

În primul rând, atunci când cerințele sau problemele care vin de la client sunt aprobate și documentate de către manager, cu excepția trimiterii sarcinii unui proiectant, acestea merg și la un dezvoltator pentru evaluare. În acest proces, dezvoltatorul revizuiește specificațiile sarcinii, verificând dacă sunt incluse funcții sau caracteristici destul de complicate. Dacă este pozitiv, dezvoltatorul ar putea începe să lucreze la acesta sau să anunțe proiectantul despre posibilele probleme în prealabil.

2. Sursa unică de adevăr

De asemenea, observați că după ce livrarea proiectului este aprobată de client și, înainte de a preda sarcina în mâna dezvoltatorului, aceasta trece printr-un proces de înregistrați / modificați / ștergeți peste magazinul de design condusă 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 întreținute și actualizate constant gata de dezvoltare.

Acum ne putem scufunda în teancul de instrumente de management pe care l-am pregătit și putem vedea cum instrumentele ne ajută să ne rezolvăm problemele.

Stiva de instrumente

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

1611926653 235 Un flux de lucru mai bun pentru dezvoltarea web Confluence
design atomic și ABEM

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

1. Confluență

Rol: centru de informare și resurse

Deși la început este intimidant, Confluenţă oferă un spațiu de lucru puternic, ușor de organizat și are o mulțime de caracteristici, integrarea aplicațiilor și șabloane personalizate. Cu siguranță nu este o soluție universală pentru toate problemele, dar este perfectă pentru documentarea specificațiilor, cerințelor, note de întâlnire și multe altele.

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

Avantajul meu preferat de Confluence este abilitatea de a personaliza șabloanele de documente. Această caracteristică face cu adevărat comodă standardizarea fluxului de lucru.

1611926653 890 Un flux de lucru mai bun pentru dezvoltarea web Confluence
etapa de evaluare a dezvoltatorului

Exemplu: Componenta revizuirea funcționalității

Am menționat procesul de evaluare a dezvoltatorului de mai sus, ceea ce este de fapt o muncă complicată. Acest lucru se datorează faptului că acest proces include informații de bază despre componentă, un dezvoltator Recenzie FSM (dacă este necesar), spațiu pentru întrebări frecvente și multe altele. Dar flexibilitatea șablonului și a instrumentelor pe care le oferă Confluence face acest lucru foarte ușor. Construiți doar un șablon în setările de configurare și sunteți bine să mergeți.

1611926654 242 Un flux de lucru mai bun pentru dezvoltarea web Confluence
șablon personalizat pentru examinarea componentelor în Confluence

2. Jira

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

De asemenea, membru al familiei Atlassian, Jira este un software foarte puternic de urmărire a problemelor și planificare a proiectelor. Partea mea preferată în acest sens este crearea de fluxuri de lucru cu probleme personalizate. Deoarece există o mulțime de tutoriale minunate despre modul de utilizare a puterii Jira, singurul lucru pe care vreau să-l subliniez aici este utilizarea tipului de problemă, așa cum se menționează mai jos.

1611926654 163 Un flux de lucru mai bun pentru dezvoltarea web Confluence
magazin de design actualizare design

Exemplu: Actualizați dezvoltatorul cu privire la modificările magazinului de design de către Tipul problemei

Pentru a se asigura că dezvoltatorii construiesc componentele pe baza vizualizărilor de proiectare corecte, trebuie să fie anunțați ori de câte ori se actualizează ceva din magazinul de design, care include acțiuni precum înregistrați, modificați și ștergeți. Deci, pe măsură ce o componentă este actualizată, proiectantul ar trebui să deschidă o problemă cu dezvoltatorul responsabil atribuit și să selecteze tipul corect de acțiune / problemă.

1611926654 308 Un flux de lucru mai bun pentru dezvoltarea web Confluence
Funcția tipurilor de probleme Jira

3. Masă aeriană

Rol: managementul componentelor și tabloul de bord al progresului

Masa aeriană, un amestec de foaie de calcul și bază de date, este lucrul care face ca această stivă să funcționeze. Există două caracteristici uimitoare care îmi susțin fluxul de lucru: patru tipuri de tranziție a vizualizării într-un singur tabel și conectarea la conținut conex. Voi prezenta două exemple de utilizare a acestor două caracteristici aici.

1611926654 670 Un flux de lucru mai bun pentru dezvoltarea web Confluence
dezvoltatorul începe să lucreze la sarcină

Exemplul 1: Managementul componentelor

Cum vă gestionați biblioteca de componente? Am ales să nu folosim un generator de ghid de stil, deoarece nu este accesibil pentru editori de către designeri. Nici utilizarea bibliotecii de componente Sketch nu a fost adecvată, deoarece are prea multe limitări dacă am încercat să o folosim în afara scopului 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. Aruncați o privire la șablonul demonstrativ al tabelului de gestionare a componentelor aici:

1611926655 977 Un flux de lucru mai bun pentru dezvoltarea web Confluence
tabelul de componente

Odată ce o vizualizare de proiect nou înregistrată, care este gata să fie dezvoltată programatic, este trimisă dezvoltatorului, acesta va evalua vizualizarea pe baza sistemului ABEM și o va î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. Pagină conectată: linkul către pagină conține această componentă

4. Componenta pentru copii: linkul către componentele pentru copii îl conține pe acesta

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

6. Categoria componentelor: o clasificare generală a categoriilor (ex: text, erou, bară laterală)

7. Starea de dezvoltare: stadiul progresului dezvoltării (în așteptare, atribuit, în curs, finalizat, în revizuire)

8. Destinatar: dezvoltator responsabil pentru această componentă

9. Nivelul atomic: categoria atomică a acestei componente (atom, moleculă, organism)

Cel mai bun lucru aici este că puteți face referință la date atât în ​​același tabel, cât și în alte tabele. Această conexiune de puncte împiedică lucrurile să se încurce pe măsură ce scara crește. De asemenea, observați că puteți filtra, sorta și modifica vizualizările cu ușurință.

Exemplul 2: Starea de dezvoltare a paginii

Deoarece presupunerea este că vom evalua în mod inevitabil progresul dezvoltării pagină cu pagină, este necesar un șablon de tabel conceput în acest scop. Acest tabel poate fi un tablou de bord de progres atât pentru echipele interne, cât și pentru partajarea cu clientul în același timp.

1611926655 753 Un flux de lucru mai bun pentru dezvoltarea web Confluence
tabelul listei de pagini

Orice informații despre pagină, inclusiv termenul limită, linkul prototip InVision, destinatar și componenta pentru copii 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

Rol: o singură sursă de control al versiunii adevărurilor și activelor de design

Abstract este GitHub pentru Schiță bunuri care salvează designerii de la naiba de a copia și lipi fișiere. Nu intră în sfera acestui articol pentru a demonstra detalii despre gestionarea fluxului de control al versiunilor. Aici, cheia este că Abstractul este magazinul de design care acționează ca sursă unică de adevăr. Proiectanții trebuie să actualizeze în continuare filiala principală la cea mai recentă versiune a designului confirmat și apoi să anunțe dezvoltatorii. Pe de altă parte, dezvoltatorii ar trebui să ia drept referință numai activele de proiectare din ramura principală.

1611926655 573 Un flux de lucru mai bun pentru dezvoltarea web Confluence
Șablon de ramură abstractă

Mai mult de lucru

Din propria mea experiență, 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 încă necesită 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ăm că mai mulți oameni își pot împărtăși fluxurile de lucru în viitor!


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