Ako front-end vývojár pracujem asi dva roky a podieľal som sa na tvorbe širokej škály projektov. Jedno z ponaučení, ktoré som sa naučil, je, že spolupráca medzi rôznymi tímami vývojárov, ktorí majú rovnaký cieľ, no majú rôzne úlohy a zodpovednosti, nie je jednoduchá.
Po konzultácii s ostatnými členmi tímu, dizajnérmi a vývojármi som vytvoril cyklus tvorby webových stránok určený pre malé tímy (5-15 ľudí). Zahŕňa nástroje ako Confluence, Jira, Airtable a Abstract. V tomto článku sa podelím o funkcie organizácie pracovného postupu.
Skillbox odporúča: Dvojročný praktický kurz .
Pripomíname vám: pre všetkých čitateľov „Habr“ - zľava 10 000 rubľov pri registrácii do akéhokoľvek kurzu Skillbox pomocou propagačného kódu „Habr“.
Prečo je toto všetko potrebné?
Minimálny tím potrebný na vytvorenie webovej stránky od začiatku je dizajnér, programátor a projektový manažér. V mojom prípade sa tím vytvoril. Ale po vydaní pár stránok som nadobudol pocit, že s tým niečo nie je v poriadku. Niekedy sme jednoducho úplne nerozumeli svojim povinnostiam a komunikácia s klientom zostala veľmi neuspokojivá. To všetko spomaľovalo proces a všetkých vyrušovalo.
Začal som pracovať na riešení problému.
Vyhľadávanie Google poskytuje dobré výsledky o našom probléme.
Aby bola práca viac vizuálna, vytvoril som diagram pracovného toku, ktorý umožňuje pochopiť, ako sa tu pracuje.
Kliknutím na obrázok sa otvorí v plnom rozlíšení.
Ciele a ciele
Jednou z prvých techník, ktoré som sa rozhodol otestovať, bol „kaskádový model“ (Vodopád). Použil som to na zdôraznenie problémov a pochopenie toho, ako ich vyriešiť.
Problém: Klient najčastejšie nevyhodnocuje proces tvorby webu modulárne, ako to robia vývojári. Vníma to ako bežnú stránku, teda rozmýšľa v zmysle jednotlivých stránok. Podľa jeho názoru dizajnéri a programátori vytvárajú jednotlivé stránky, jednu po druhej. Výsledkom je, že zákazník jednoducho nerozumie tomu, čo nasleduje počas samotného procesu.
Úloha: Presviedčať klienta o opaku nemá zmysel, najlepšou možnosťou je vyvinúť modulárny proces tvorby webstránky v rámci firmy na základe modelu stránka po stránke.
Tokeny a komponenty univerzálneho dizajnu spravujú vývojári aj dizajnéri.
Problém: Toto je bežná situácia, ktorú rieši veľa stratégií. Existuje veľa zaujímavých riešení, vo väčšine prípadov sa navrhuje vytvoriť dizajnový systém, ktorý je riadený generátormi štýlov / knižníc. Ale v našej situácii pridanie ďalšieho komponentu do vývojového procesu, ktorý by nám umožnilo spravovať úrovne prístupu pre dizajnérov, jednoducho nebolo možné.
Úloha: vybudovanie univerzálneho systému, v ktorom môžu dizajnéri, vývojári a manažéri pracovať synchrónne bez toho, aby sa navzájom rušili.
Presné sledovanie vývoja
Problém: Aj keď je k dispozícii veľa užitočných nástrojov na sledovanie problémov a meranie celkového pokroku, väčšina z nich nie je flexibilná alebo optimálna. Tento nástroj môže byť užitočný tým, že šetrí čas tímu, ktorý by za normálnych okolností strávil otázkami a vysvetleniami konkrétnych úloh. Manažérom tiež uľahčuje život tým, že im dáva presnejšie pochopenie celého projektu.
Úloha: vytvorte informačný panel na sledovanie priebehu úloh vykonávaných rôznymi členmi tímu.
sada náradia
Po experimentovaní s rôznymi nástrojmi som sa rozhodol pre nasledujúcu sadu: Confluence, Jira, Airtable a Abstract. Nižšie prezradím výhody každého z nich.
sútok
Úloha nástroja: informačné a zdrojové centrum.
Pracovný priestor Confluence je pomerne jednoduchý na nastavenie, má veľa funkcií, integráciu s rôznymi aplikáciami a má individuálne prispôsobiteľné šablóny. Nie je to univerzálne riešenie, ale je ideálne ako informačné a zdrojové centrum. To znamená, že všetky referenčné alebo technické detaily súvisiace s projektom musia byť vložené do databázy.
Nástroj vám umožňuje správne zdokumentovať každý komponent a akékoľvek ďalšie podrobnosti o projekte.
Hlavnou výhodou Confluence je prispôsobenie šablón dokumentov. Okrem toho sa dá použiť na implementáciu jednotného úložiska špecifikácií a rôznych projektových dokumentácií, ktoré oddeľujú úrovne prístupu účastníkov. Teraz sa už nemusíte báť, že máte po ruke starú verziu špecifikácie, ako sa to stáva pri odosielaní dokumentov e-mailom.
Viac informácií o nástroji .
Jira
Úloha nástroja: monitorovanie problémov a riadenie úloh.
Jira je veľmi výkonný nástroj plánovania a riadenia projektov. Hlavnou časťou funkcionality je vytváranie prispôsobiteľných pracovných postupov. Na efektívne riadenie problémov (čo je to, čo potrebujeme), stojí za to venovať osobitnú pozornosť správnemu použitiu typu požiadavky a typu problému (typu problému).
Aby sme sa uistili, že vývojári stavajú komponenty na základe správneho návrhu, musia byť upozornení zakaždým, keď sa niečo v dizajne zmení. Hneď ako je komponent aktualizovaný, dizajnér musí otvoriť problém, priradiť zodpovedného vývojára a priradiť mu správny typ problému.
S Jirou si môžete byť istí, že úplne všetci účastníci procesu (pripomínam, v našom prípade ich je 5–15) dostanú správne úlohy, ktoré sa nestratia a nájdu svojho vykonávateľa.
Zistite viac o meste Jira .
Airtable
Úloha nástroja: správa komponentov a tabuľka postupu.
Airtable je zmesou tabuliek a databáz. To všetko umožňuje prispôsobiť fungovanie všetkých vyššie uvedených nástrojov.
Príklad 1: Správa komponentov
Pokiaľ ide o generátor sprievodcu štýlmi, nie je vždy vhodné ho používať - problémom je, že ho dizajnéri nemôžu upravovať. Okrem toho by nebolo dobré rozhodnutie použiť knižnicu komponentov Sketch, pretože má veľa obmedzení. S najväčšou pravdepodobnosťou jednoducho nebudete môcť používať túto knižnicu mimo programu.
Airtable tiež nie je dokonalý, ale je lepší ako mnohé iné podobné riešenia. Tu je ukážka šablóny tabuľky správy komponentov:
Keď vývojár prijme konštrukčný komponent, vyhodnotí výsledný ABEM záznamom komponentu do tabuľky. Celkovo je 9 stĺpcov:
- Názov – názov súčiastky podľa princípu ABEM.
- Náhľad – Tu sa umiestni buď snímka obrazovky alebo obrázok komponentu stiahnutého z iného zdroja.
- Prepojená stránka je odkaz na stránku komponentu.
- Podradený komponent – prepojenie na podradené komponenty.
- Modifikátor - kontroluje prítomnosť možností štýlu a definuje ich (napríklad aktívny, červený atď.).
- Kategória komponentov je všeobecná kategória (text, propagačný obrázok, bočný panel).
- Stav vývoja - skutočný priebeh vývoja a jeho definícia (dokončený, prebieha, atď.).
- Zodpovedný - vývojár, ktorý je zodpovedný za tento komponent.
- Atómová úroveň je atómová kategória tohto komponentu (podľa konceptu atómového dizajnu).
- Údaje môžu byť odkazované v rovnakej alebo v rôznych tabuľkách. Spojením bodov zabránite zmätku pri škálovaní. Údaje je navyše možné bez problémov filtrovať, triediť a meniť.
Príklad 2: Pokrok vo vývoji stránky
Na vyhodnotenie postupu vývoja stránky potrebujete šablónu, ktorá je vytvorená špeciálne na tento účel. Stôl môže slúžiť ako pre potreby samotného tímu, tak aj pre klienta.
Akékoľvek informácie o stránke môžete uviesť tu. Toto je konečný termín, prepojenie na prototyp InVision, cieľ, podriadený komponent. Okamžite je zrejmé, že operácie sú veľmi pohodlné na vykonávanie, a to ako s ohľadom na dokumentáciu a aktualizáciu dizajnu, tak aj na stav vývoja front-endu a back-endu. Okrem toho sa tieto operácie vykonávajú súčasne.
abstraktné
Úloha nástroja: jediný zdroj riadenia verzií pre dizajnové prostriedky.
Abstrakt možno nazvať GitHub pre aktíva v aplikácii Sketch a šetrí dizajnérov od kopírovania a prilepovania súborov. Hlavnou výhodou nástroja je, že poskytuje úložisko návrhov, ktoré funguje ako „jediný zdroj pravdy“. Návrhári musia aktualizovať hlavnú vetvu na najnovšiu verziu schváleného rozloženia. Potom musia informovať vývojárov. Tí by zase mali pracovať len s dizajnérskymi aktívami z hlavnej pobočky.
Ako záver
Po implementácii nového vývojového procesu a všetkých vyššie uvedených nástrojov sa rýchlosť našej práce zvýšila minimálne dvojnásobne. Nie je to dokonalé riešenie, ale je to veľmi dobré. Je pravda, že na to, aby to fungovalo, musíte vynaložiť veľa úsilia - vyžaduje si to „ručnú prácu“, aby ste to všetko aktualizovali a udržiavali v prevádzkyschopnom stave.
Skillbox odporúča:
- Praktický kurz .
- Online kurz .
- Praktický ročníkový kurz .
Zdroj: hab.com