Ukončenie podpory komponentov systému dizajnu bez narušenia produktových tímov
Ako zaviesť prelomové zmeny v dizajnovom systéme vo veľkých aplikáciách: oznámiť, ukončiť podporu, migrovať pomocou kódových režimov a odstrániť pomocou sémantického vytvárania verzií a sledovania používania.
Core Takeaway
Vyraďte komponent v štyroch krokoch: oznámte zmenu s dôvodom a náhradou, označte starý komponent za zastaraný v menšom vydaní jasnými upozorneniami, pomôžte tímom migrovať pomocou sprievodcov a automatických kódovacích režimov a odstráňte ho až v ďalšom veľkom vydaní. Sledujte, koľko obrazoviek ho ešte používa v každom kroku, a neodstraňujte ho, kým sa využitie neblíži k nule.
Prečo je ukončenie podpory nesprávne
Zmeny v dizajnovom systéme zlyhajú, keď prekvapia produktové tímy: komponent zmizne v aktualizácii, prestane sa zostavovať a tímy pripnú starú verziu a prestanú inovovať. Akonáhle sa to stane, systém stráca svoju hlavnú výhodu, konzistenciu, pretože rôzne časti produktu sa presúvajú na rôzne verzie.
Štvorkrokový proces
Sémantické vytváranie verzií poskytuje jednoduchú zmluvu: nekompatibilné zmeny sa prenesú do hlavnej verzie a keď zastaráte časť API, mali by ste aktualizovať dokumentáciu a odoslať menšie vydanie so zastaranou verziou predtým, ako ju neskôr odstránite.
- Oznámiť: vysvetlite prečo, ukážte náhradu, uveďte časovú os.
- Zakázať: označte ho v dokumentoch a kóde pomocou konzoly alebo upozornenia na vlákna, ktoré odkazuje na príručku.
- Migrácia: poskytnite písomnú príručku a pre kód kódový režim, ktorý automaticky aktualizuje použitia.
- Odstrániť: v ďalšom hlavnom vydaní, keď bude využitie takmer nulové.
Automatizujte migráciu
Codemods sú skripty, ktoré prepisujú kód cez kódovú základňu. Nástroje ako jscodeshift spúšťajú kódové mody na mnohých súboroch JavaScript alebo TypeScript naraz, takže premenovanie rekvizity alebo výmena komponentov môže byť aplikovaná v priebehu niekoľkých minút a nie týždňov. Spárujte ich s pravidlami pre vlákna, ktoré označia zostávajúce použitia.
Zmerajte adopciu
Nemôžete naplánovať odstránenie bez toho, aby ste vedeli, kto komponent stále používa. Sledujte využitie v kóde (importy, upozornenia na vlákna) a v návrhových súboroch (analytika knižnice vo vašom dizajnovom nástroji). Zverejňujte čísla, aby tímy videli pokrok, a pomôžte niekoľkým posledným tímom priamo, namiesto toho, aby ste si vynucovali termín.
Nezabudnite na dizajnovú stránku
Zastarajte komponent aj v knižnici návrhov: premenujte ho s predponou „Zastarané“, vytvorte prepojenie na náhradu a prestaňte sa zobrazovať vo vyhľadávaní. Inak ho dizajnéri stále používajú v novej práci a migrácia nikdy nekončí. Pohybové a interakčné správanie by malo byť súčasťou poznámok o zmene, pretože náhrada, ktorá sa pohybuje inak, sa môže zdať zlomená, aj keď vyzerá rovnako.
Kľúč Principle na zapamätanie
- Oznámiť, zamietnuť, migrovať, odstrániť: nikdy neskočte priamo na odstránenie
- Zastarať v menšom vydaní; odstrániť v hlavnom vydaní
- Na automatizáciu migrácie použite kódové mody a pravidlá lint
- Sledujte používanie v súboroch kódu aj dizajnu
- Zahrňte zmeny pohybu a interakcie do poznámok k vydaniu
Často kladené otázky
Zdroje
- Semantic Versioning 2.0.0 — semver.org
- jscodeshift: a JavaScript codemod toolkit — GitHub (Meta)