Front-end: struktura katalogów, architektura

Odpowiedz Nowy wątek
2017-01-13 11:14
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>
edytowany 2x, ostatnio: Adam Boduch, 2017-01-13 12:16

Pozostało 580 znaków

2017-01-13 12:04
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).

edytowany 1x, ostatnio: Desu, 2017-01-13 12:06

Pozostało 580 znaków

2017-01-13 12:14
0

Polecam zerknac na https://jhipster.github.io/using-angularjs/


Pozostało 580 znaków

2017-01-13 17:51
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.

Mi bardziej o użycie require.ensure do tworzenia split pointów przy routingu. Miałem nadzieje, że może Ci to podsunie jakiś pomysł. - Desu 2017-01-13 20:01

Pozostało 580 znaków

2017-01-13 18:58
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(...)

Pozostało 580 znaków

2017-01-20 10:32
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.

A czemu nie korzystasz z frameworka? - tdudzik 2017-01-20 10:42
Tak jak pisałem w pierwszym poście: 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. - Adam Boduch 2017-01-20 10:52

Pozostało 580 znaków

2017-01-20 11:10
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-you[...]-css-control-and-specificity/


Szacuje się, że w Polsce brakuje 50 tys. programistów
edytowany 1x, ostatnio: vpiotr, 2017-01-20 11:11

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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