CRUD typu SPA i dobre wzorce na zarządzaniu kolekcjami

0

Hej,

Sklepałem najpierw dłuższy wywód z całym kontekstem projektu, ale w sumie kogo to interesuje ? ;)

Pytanie sprowadza się do: są już w JS jakieś dobre wzorce do projektów na Vue czy React, gdzie wykorzystuje się global store (Vuex, Redux) i mamy do czynienia z kolekcjami typowymi dla crudów?

Internet zalany jest przykładami, gdzie autorzy ściągają sobie z API po kilkaset rekordów, wrzucają wszystko do global store, paginują po stronie klienta, filtrują/znajdują przez metody lodash'a i tak dalej.

Działa, ale nie wygląda to na optymalną architekturę pod kątem wydajności :D. Kiedyś to większość tych zadań robiła baza danych, prawdziwe monstrum, a nie jakaś funkcyjka w JS :).

Moje pomysły:

  1. rozszerzyć backendowe API o więcej metod odpowiadających widokom/akcjom w UI (filtrowanie, paginowanie itp).
  2. skonfigurować w projekcie server-side rendering, tak, by router jednak odpalał akcje na serwerze. Nigdy nie implementowałem tego w praktyce i obawiam się utraty wrażenia SPA. Teraz w ogóle dużo o tym słychać i nie mogę się oprzeć wrażeniu, że historia zatoczyła koło: wracamy do czegoś, co 5 lat temu wydawało się już oldschoolem.
2

Też się zastanawiam.

i obawiam się utraty wrażenia SPA.

rzecz w tym, że "wrażenie SPA" w większości aplikacji w ogóle się nie sprawdza. Strony internetowe są przewidywalne, klikasz w link, przechodzisz do następnej strony, chcesz się cofnąć, to się cofasz. Jak chcesz zapisać jakieś miejsce to dodajesz do zakładek w przeglądarce. A jeśli jakaś strona się długo wczytuje, to widzisz że się nie wczytała.

A teraz w dobie SPA nic nie jest przewidywalne. Klikasz gdzieś i nie masz nawet pewności, czy autor SPA zadbał o podmianę adresu URL na górze (czasem tak, czasem nie), więc czasem linki ze SPA da się szerować, czasem nie.

Jeśli jakaś "podstrona" w SPA długo się wczytuje to też możesz nie wiedzieć o tym, że się nie wczytała, ew. jak już się wczyta to nagle wszystko przeskakuje i zaczyna się pokazywać jakieś nowe okienko (na FB tak jest).

itp. itd.

Generalnie SPA polega obecnie na tym, że każda aplikacja musi wynajdywać koło na nowo i implementować od nowa totalnie wszystko, co od dawna istniało już w tradycyjnych stronach. I zwykły szary użytkownik, zamiast wykorzystywać swoją wiedzę na temat stron internetowych, to musi każdego SPA uczyć się od nowa. Czyli SPA to taki krok w tył w historii internetu. Chociaż być może za kilka lat się to jakoś ustabilizuje (już fakt, że powstają takie api jak History API choćby, to już jakiś krok, żeby to ucywilizować).

Internet zalany jest przykładami, gdzie autorzy ściągają sobie z API po kilkaset rekordów, wrzucają wszystko do
global store, paginują po stronie klienta, filtrują/znajdują przez metody lodash'a i tak dalej.

Działa, ale nie wygląda to na optymalną architekturę pod kątem wydajności :D.

Jak używają lodasha to raczej nie jest to optymalne, lodash jest dość powolną biblioteką (przynajmniej biorąc pod uwagę niektóre metody, wszystkich nie benchmarkowałem, ale np. cloneDeep było dość powolne w porównaniu z tym co można samemu napisać w parę linijek kodu - tylko, że lodash jest biblioteką targetowaną dla milionów developerów, więc muszą totalnie wszystkie warunki brzegowe posprawdzać, nawet takie, których nie ma sensu sprawdząć w danej aplikacji, a których sprawdzenie kosztuje czas procesora).

Poza tym działanie na tablicach (a często się na tablicach działa, ew. na obiektach, które i tak są potem iterowane jak tablica) z zasady nie jest zbyt wydajne, bo mając np. milion rekordów i chcąc przefiltrować po jakimś kryterium, trzeba by zrobić milion iteracji. Bardziej wydajnym podejściem byłoby stworzenie jakiegoś b-tree do wyszukiwań (o ile jest taka potrzeba, bo "premature optimization...").

Kiedyś to większość tych zadań robiła baza danych, prawdziwe monstrum, a nie jakaś funkcyjka w JS

powstają również bazy danych po stronie klienta. I może w tę stronę powinniśmy iść.

0
LukeJL napisał(a):

rzecz w tym, że "wrażenie SPA" w większości aplikacji w ogóle się nie sprawdza. Strony internetowe są przewidywalne, klikasz w link, przechodzisz do następnej strony, chcesz się cofnąć, to się cofasz. Jak chcesz zapisać jakieś miejsce to dodajesz do zakładek w przeglądarce. A jeśli jakaś strona się długo wczytuje, to widzisz że się nie wczytała.

A teraz w dobie SPA nic nie jest przewidywalne. Klikasz gdzieś i nie masz nawet pewności, czy autor SPA zadbał o podmianę adresu URL na górze (czasem tak, czasem nie), więc czasem linki ze SPA da się szerować, czasem nie.

Jeśli jakaś "podstrona" w SPA długo się wczytuje to też możesz nie wiedzieć o tym, że się nie wczytała, ew. jak już się wczyta to nagle wszystko przeskakuje i zaczyna się pokazywać jakieś nowe okienko (na FB tak jest).

też to zauważyłem, plus problemy z seo, dodatkowo stosując cache na front/back masz i tak minimalne przeładowania strony, lub i tak miejscowo możesz zastosować ajaxa, więc jedyny zysk to mniejsze obciążenie serwera (chociaż też nie zawsze, bo jak same pliki js zajmują ~1MB to gdzie tu oszczędność)

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