kw. 22, 2022

Struktura aplikacji React

Bytespack

Zaczynając projekt zastanawialiśmy się o jaką strukturę oprzeć pliki z naszym kodem źródłowym. React sam w sobie w żaden sposób nie narzuca struktury plików, wręcz sugeruje, żeby na początku nie poświęcać na to zbyt dużo czasu: "Jeśli dopiero rozpoczynasz projekt, nie poświęcaj więcej niż pięć minut na wybór sposobu struktury plików”.

Postanowiliśmy więc zacząć od grupowania opartego o typ pliku, tzn: 

api/ 
    ...
components/ 
    atoms/ 
    molecules/ 
    ...
infrastructure 
    ...
redux/ 
shared/

Po kilku miesiącach i wielu nowych feature’ach zaczęliśmy odczuwać, że to chyba jednak nie był najlepszy pomysł. Rosnąca złożoność kodu zaczęła być trudnością, prowadząc do problemów takich jak: 

W którymś momencie uznaliśmy, że jesteśmy w stanie zredukować tę złożoność za pomocą przeorganizowania struktury plików. Chcieliśmy odpowiedzieć na wskazane problemy jednocześnie ułatwiając pracę nad nowymi feature’ami. 

Założenia wobec nowej struktury to: 

Na początku podzieliliśmy aplikację na większe moduły domenowe, które grupują w sobie powiązane ze sobą feature’y. Następnie każdy moduł domenowy jest podzielony na funkcje. 

portfolio/ 
project/ 
users/ 
    features/ 
        auth/ 
            … 
            index.tsx 
        user-profile/ 
            … 
            index.tsx 

Wprowadziliśmy też jasne rozdzielenie pomiędzy elementami wewnętrznymi poszczególnych feature’ów, a interfejsem udostępnianym na zewnątrz. Każdy feature określa co powinno być widoczne w pliku index.tsx. Pozostałe feature mogą importować tylko te zadeklarowane elementy. Dzięki temu pracując nad danym feature’em mamy jasność które fragmenty kodu są bezpośrednio wykorzystywane na zewnątrz. 

Dodatkowo istnieją dwa moduły specjalne: 

Efekty wynikające z takiego podejścia to: 

Co z kolei ma nas prowadzić do przyspieszenia i ułatwienia pracy, pozwalając efektywnie skupić się na aktualnym problemie do rozwiązania, bez dystrakcji wynikających z nieefektywnej struktury kodu.