Algorithme de refactoring Front End en trois passes

Je suis tombé sur un projet assez volumineux écrit en React + Typescript.

Creusé dans le code. Tout est cool, les conteneurs, les composants, les types sont partout, le linter est configuré, les composants stylisés, même le livre d'histoires a une certaine requête de réaction.

Eh bien, juste du bonheur, pas un projet!

Je m'assois pour faire une tâche simple - assembler une page à partir de composants.

J'écris en code Mais ... et l'IDE me propose 16 composants Button.

Bliiin ...

D'accord, j'ai un composant / bouton des composants (zs il est le seul là-bas)

Next Inp ... eh bien, vous voyez l'idée. 23 éléments de ces intrants tout au long du projet.

D'accord, je pense qu'en ouvrant le livre de contes, j'ai décidé de tout copier à partir de là. Et il n'y a que des composants simples, comme les boutons, H1, H3. Et pas de composants avec un état pour vous - pas de moules, pas de signe avec des valeurs.





Il n'y a pas de limite à mon bonheur.

Je creuse plus loin. Il s'avère que les conteneurs contiennent non seulement des conteneurs ( en fait, j'ai toujours eu une question sur ce mot, j'aime plutôt la page de nom ou la sous-page / section ), mais aussi les composants directement liés à cette page.

Selon les classiques du genre, tout n'a pas été retiré dans des composants réutilisables, et 4 à 5 gros composants ont simplement été copiés dans différents conteneurs (dossiers de conteneurs) où ils sont utilisés.

, .

– (...)

C , . , .

. . , ?

.

, , , , .

« Front End-» ( -).

:

1)      //// !

2)      “// TODO:ID description” (ID 1)

3)      , TODO

?

, TODO- 2-3 , ( 1-2 ).

TODO :

-, , ( CTRL + SHIFT + F // TODO:ID, - , 23 )

-, -. TODO , – .

, "TODO - " . , – technical debt. 

.

1.

Linear ( ):

, . , .

, :

Add stories – storybook stories .

Move components into components – (reusable) . .

2.

styled-component- ( )

// TODO , ( ).

, …

TODO?

.

containers.

Linear. ID.

,

Windows + V ( – , , )

, TODO Windows + V .

, , .

. (Ctrl + Shift + V).

,

`const Button =`

`// TODO: TFR-45:Button…

const Button =`

!

 

3.

.

TFR-44 TFR-45 TODO ID - . - , .



, , , ?

. 16 Button 23 Input node.js .

:

1.       “// TODO ID…“ “};” “Folder( )+ComponentName”.



styled-component

2.       , . .

, .

3.       - – , , , ..

: https://github.com/DrBoria/component-mover

styled-components.

«};».

.

– , // TODO end , “// TODO ID…“ “// TODO end”.

, .

- , .

– 1 .

.. – ? ?

.

( ).

!

, .

TODO- .

, .

1)      . .

2)      , ( - )

3)      ( , )

Comme le dit mon père - quelques avantages, comme un cimetière.