Front-end: struktura katalogów, architektura

0

Jak wygląda organizacja katalogów w Waszych projektach, od strony front endu? Jak wygląda architektura? Ja organizuje katalogi np. tak:

- plugins
- libs
- pages
- components
app.js

Jeżeli chodzi o sam kod, to jest tam głównie inicjalizacja pluginów jQuery, podpięcie kilku callbacków pod zdarzenia, kilka żądań AJAX itp. Czyli raczej proste sprawy: bez konieczności używania np. takiego angulara. W katalogu /pages trzymam natomiast pliki JS które zawierają kod wymagany dla danej podstrony serwisu. Może to być np. profile.js, notifications.js itp itd.

Do tego używam webpacka. Jeżeli jednak chciałbym połączyć wszystko w jeden plik JS, to wyjdzie z kilkaset kB po minifikacji. Trochę sporo. Wymyśliłem więc, że przy pomocy webpacka, mogę wczytywać kod potrzebny tylko na danej stronie (przy pomocy code splitting). Miałby tutaj zastosowanie wzorzec front controllera. Załóżmy, że plik app.js jest wczytywany na każdej podstronie. Mógłbym w nim umieścić taki kod:

let page = $('body').attr('class');

require.ensure([], (require) => {
    require(`./pages/${page}`);
});

Natomiast w kodzie HTML, danej podstrony - mógłbym np. napisać:

<body class="profile">

Dzięki temu, na podstronie /profile dynamicznie wczytany byłby chunk utworzony przez webpacka.

Przechodząc do sedna: Czy to jest dobre rozwiązanie? Jak Waszym zdaniem powinna wyglądać organizacja katalogów, plików tego typu aplikacji? Jaką architekturę tutaj zastosować?

Póki co robię tak, że w webpack, ustawiam kilka entry i w szablonie HTML importuje dany plik w razie potrzeby:

<script src="/profile.js"></script>
0

Pewnie @Maciej Cąderek, czy @LukeJL udzielą Ci bardziej satysfakcjonującej odpowiedzi, ale polecam przeczytać Fractal Project Structure (przykład użycia razem z react-router).

0

Jak wspomniałem w moim poście, nie używam w projekcie ani angulara ani reacta (bo nie ma potrzeby). Jak rozumiem, chodziło Wam jednak o zaprezentowanie przykładowej struktury katalogów.

0

Ale robisz SPA ?
Bo jak nie to my to załatwiamy wieloma entry poinatmi. W SPA rzeczywiście korzystamy z Lazy module loading webpacka. np. w aplikacji jest moduł konfiguracji wydruków (kobyła). Mamy architekturę która polega na extension i extension pointach np. mamy obiekt menu i teraz kod init modułu sprzedaży dodaje pozycje do menu itp. i w taki sposób tworzy się cała aplikacja czyli core dostarcza punktów wpięcia a moduły elementy które należy wpiąć. Takie odwrotne zależności zamiast

MenuModule
import {saleAction} from 'saleModule'
import {whmAction} from 'whmModule'

robimy

SaleModule
import {menu} from 'menuModule'

menu.addItem(...)
menu.addItem(...)
0

Ok, zrobiłem tak: napisałem sobie prostą klasę routingu. Na podstawie URL webpack ładuje mi odpowiednie pliki (coś a la kontrolery, z tym że podkreślam - nie korzystam z angulara ani reacta). Wygląda to tak:

let r = new Router();

    r.on('/dashboard', () => {
        require.ensure([],
            require => {
                require('./pages/dashboard');
            },
            'dashboard'
        );
    });

Mam plik app.js, który zawiera podstawowy kod, który jest dołączany na każdej podstronie (<script src="/app.js"></script>). Natomiast po wejściu pod dany adres, zaciągane są dodatkowe pliki JS wymagane do działania danej podstrony. To wszystko dzięki funkcjonalności code splitting.

0

To pierwsze rozwiązanie wygląda OK, z tym że zmieniłbym class na id (id może być jedno na stronie i tu masz akurat identyfikator strony).

<body id="profile">

Części wspólne zostawiłbym osobno, dzięki temu mniej do uploadowania. Dla użytkownika też trochę szybciej.

https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

1 użytkowników online, w tym zalogowanych: 0, gości: 1