Lavoro come sviluppatore front-end da circa due anni e ho partecipato alla creazione di un'ampia varietà di progetti. Una delle lezioni che ho imparato è che la collaborazione tra diversi team di sviluppatori che condividono lo stesso obiettivo ma hanno compiti e responsabilità diverse non è facile.
Consultandomi con altri membri del team, designer e sviluppatori, ho creato un ciclo di creazione di siti Web progettato per piccoli team (5-15 persone). Include strumenti come Confluence, Jira, Airtable e Abstract. In questo articolo condividerò le funzionalità di organizzazione del flusso di lavoro.
Skillbox consiglia: Corso pratico di due anni .
Ti ricordiamo: per tutti i lettori di "Habr" - uno sconto di 10 rubli al momento dell'iscrizione a qualsiasi corso Skillbox utilizzando il codice promozionale "Habr".
Perché è necessario tutto questo?
Il team minimo necessario per creare un sito web da zero è composto da designer, programmatore e project manager. Nel mio caso, la squadra è stata formata. Ma dopo il rilascio di un paio di siti, ho avuto la sensazione che qualcosa non andasse. A volte semplicemente non comprendevamo appieno le nostre responsabilità e la comunicazione con il cliente lasciava molto a desiderare. Tutto ciò ha rallentato il processo e ha disturbato tutti.
Ho iniziato a lavorare per risolvere il problema.
Una ricerca su Google dà buoni risultati sul nostro problema.
Per rendere il lavoro svolto più visivo, ho creato un diagramma del flusso di lavoro che fornisce una comprensione di come viene svolto il lavoro qui.
Clicca sull'immagine per aprirla a piena risoluzione.
Obiettivi e obiettivi
Una delle prime tecniche che ho deciso di sperimentare è stata il “modello a cascata” (Waterfall). L’ho usato per evidenziare i problemi e capire come risolverli.
Problema: molto spesso il cliente non valuta il processo di creazione del sito web in modo modulare, come fanno gli sviluppatori. Lo percepisce come un sito normale, cioè pensa in termini di singole pagine. Secondo lui designer e programmatori creano singole pagine, una dopo l'altra. Di conseguenza, il cliente semplicemente non capisce cosa segue cosa durante il processo vero e proprio.
Compito: Non ha senso convincere il cliente del contrario; la soluzione migliore è sviluppare un processo modulare per la creazione di un sito web all'interno dell'azienda basato su un modello pagina per pagina.
I token e i componenti di progettazione universale sono gestiti sia dagli sviluppatori che dai progettisti.
Problema: questa è una situazione comune che molte strategie affrontano. Esistono molte soluzioni interessanti, nella maggior parte dei casi si propone di creare un sistema di progettazione controllato da generatori di guide di stile/librerie. Ma nella nostra situazione, aggiungere un altro componente al processo di sviluppo che ci permettesse di gestire i livelli di accesso per i progettisti semplicemente non era possibile.
Obiettivo: costruire un sistema universale in cui designer, sviluppatori e manager possano lavorare in modo sincrono senza interferire tra loro.
Monitoraggio accurato dello sviluppo
Problema: sebbene siano disponibili molti strumenti utili per tenere traccia dei problemi e misurare i progressi complessivi, la maggior parte non è flessibile o ottimale. Lo strumento può essere utile facendo risparmiare al team il tempo che normalmente verrebbe dedicato a domande e chiarimenti su compiti specifici. Inoltre, semplifica la vita ai manager fornendo loro una comprensione più accurata dell'intero progetto.
Compito: creare una dashboard per tenere traccia dello stato di avanzamento delle attività eseguite dai diversi membri del team.
Kit di attrezzi
Dopo aver sperimentato diversi strumenti, ho optato per il seguente set: Confluence, Jira, Airtable e Abstract. Di seguito rivelerò i vantaggi di ciascuno.
Confluenza
Ruolo dello strumento: centro di informazioni e risorse.
L'area di lavoro di Confluence è relativamente facile da configurare, ha molte funzionalità, integrazioni con diverse app e modelli individuali e personalizzabili. Non è una soluzione valida per tutti, ma è ideale come centro di informazioni e risorse. Ciò significa che qualsiasi riferimento o dettaglio tecnico relativo al progetto deve essere inserito nel database.
Lo strumento consente di documentare adeguatamente ciascun componente e qualsiasi altro dettaglio sul progetto.
Il vantaggio principale di Confluence è la personalizzazione dei modelli di documenti. Inoltre, può essere utilizzato per implementare un unico repository di specifiche e varia documentazione di progetto, separando i livelli di accesso dei partecipanti. Ora non devi preoccuparti di avere a portata di mano una vecchia versione delle specifiche, come accade quando invii documenti via email.
Ulteriori informazioni sullo strumento .
Jira
Ruolo dello strumento: monitoraggio dei problemi e gestione delle attività.
Jira è uno strumento di pianificazione e gestione dei progetti molto potente. La parte principale della funzionalità è la creazione di flussi di lavoro personalizzabili. Per gestire efficacemente i problemi (che è ciò di cui abbiamo bisogno), vale la pena prestare particolare attenzione al corretto utilizzo del tipo di richiesta e del tipo di problema (issue type).
Pertanto, per essere sicuri che gli sviluppatori stiano creando componenti basati sulla progettazione corretta, devono essere avvisati ogni volta che qualcosa cambia nella progettazione. Non appena il componente viene aggiornato, il progettista deve aprire un problema, assegnare uno sviluppatore responsabile, assegnandogli il tipo di problema corretto.
Con Jira, puoi essere sicuro che assolutamente tutti i partecipanti al processo (lascia che te lo ricordi, nel nostro caso ce ne sono 5-15) ricevono compiti corretti che non si perdono e trovano il loro esecutore.
Scopri di più su Jira .
Airtable
Ruolo dello strumento: gestione dei componenti e scheda di avanzamento.
Airtable è una miscela di fogli di calcolo e database. Tutto ciò rende possibile personalizzare il funzionamento di tutti gli strumenti sopra discussi.
Esempio 1: Gestione dei componenti
Per quanto riguarda il generatore della guida di stile, non è sempre comodo da usare: il problema è che i designer non possono modificarlo. Inoltre, non sarebbe una buona decisione utilizzare la libreria dei componenti Sketch, poiché presenta molte limitazioni. Molto probabilmente, semplicemente non sarai in grado di utilizzare questa libreria al di fuori del programma.
Anche Airtable non è perfetto, ma è migliore di molte altre soluzioni simili. Ecco una demo del modello di tabella di gestione dei componenti:
Quando uno sviluppatore accetta un componente di progettazione, valuta l'ABEM risultante registrando il componente in una tabella. Ci sono 9 colonne in totale:
- Nome - il nome del componente secondo il principio ABEM.
- Anteprima: qui viene inserito uno screenshot o un'immagine del componente scaricato da un'altra fonte.
- Una pagina collegata è un collegamento alla pagina di un componente.
- Componente figlio: un collegamento ai componenti figlio.
- Modificatore: verifica la presenza di opzioni di stile e le definisce (ad esempio, attivo, rosso, ecc.).
- La categoria dei componenti è una categoria generale (testo, immagine promozionale, barra laterale).
- Stato dello sviluppo: l'effettivo progresso dello sviluppo e la sua definizione (completato, in corso, ecc.).
- Responsabile: lo sviluppatore responsabile di questo componente.
- Il livello atomico è la categoria atomica di questo componente (secondo il concetto di progettazione atomica).
- È possibile fare riferimento ai dati nella stessa tabella o in tabelle diverse. Collegare i punti eviterà confusione durante il ridimensionamento. Inoltre i dati possono essere filtrati, ordinati e modificati senza problemi.
Esempio 2: avanzamento dello sviluppo della pagina
Per valutare l'avanzamento dello sviluppo della pagina, è necessario un modello creato appositamente per questo scopo. Il tavolo può soddisfare sia le esigenze del team stesso che del cliente.
Qualsiasi informazione sulla pagina può essere contrassegnata qui. Questa è una scadenza, un collegamento al prototipo InVision, una destinazione, un componente figlio. Si nota subito che le operazioni sono molto comode da eseguire, sia per quanto riguarda la documentazione e l'aggiornamento del progetto, sia per quanto riguarda lo stato di sviluppo front-end e back-end. Inoltre, queste operazioni vengono eseguite contemporaneamente.
Astratto
Ruolo dello strumento: un'unica fonte di controllo della versione per le risorse di progettazione.
Abstract può essere chiamato GitHub per le risorse in Sketch e evita ai progettisti di dover copiare e incollare file. Il vantaggio principale dello strumento è che fornisce un archivio di progetti che funge da “unica fonte di verità”. I progettisti devono aggiornare il ramo principale all'ultima versione del layout approvato. Successivamente, devono avvisare gli sviluppatori. Questi, a loro volta, dovrebbero funzionare solo con le risorse di progettazione del ramo principale.
Come conclusione
Dopo aver implementato il nuovo processo di sviluppo e tutti gli strumenti sopra menzionati, la velocità del nostro lavoro è aumentata almeno del doppio. Non è una soluzione perfetta, ma è molto buona. È vero, affinché funzioni, è necessario impegnarsi molto: è necessario un "lavoro manuale" per aggiornare e mantenere tutto funzionante.
Skillbox consiglia:
- Corso pratico .
- Corso online .
- Corso pratico annuale .
Fonte: habr.com