Filtracja danych po stronie frontendu

0

Jeśli chcę przefiltrować dane po stronie frontendu to jak to zrobić? Jak później to wyświetlić w tabelce html? Bo będą zwracane różne ilości rekordów przecież.

0

dlaczego front ma się tym zajmować? Po co cisnąć więcej danych po sieci?
A wracając do meritum to wyświetlić tylko te, które potrzebujesz. A jak to zrobić to zależy od tego jak to robisz teraz.

0

Czyli takie rzeczy należy robić po stronie backendu? Nie obciążę wtedy zbytnio bazy? Robienie tego po stronie frontu nie było by bardziej wydajnościowe?

1

teraz to sobie chyba żartujesz. Uważasz, że wydajniejsze będzie przeciągnąć przez sieć (nawet jeśli to będzie ta sama maszyna to pewnie dan będą przez gniazda ciągane) WSZYSTKIE dane z backendu do frontendu, tylko po to, żeby frontend wyfiltrował dane, które mu potrzebne a resztę olał? Mimo iż te dane zazwyczaj są w jakiejś bazie, której niejako głównym zadaniem jest filtrowanie danych i jest ona pisana pod kontem jak najszybszego dostępu (zwracania) danych, które potrzebujemy?
Oczywiście wiąże się to z odpowiednim zaprojektowaniem backendu, żeby można było pobierać dane, które chcemy. Czyli zamiast jednej metody GetContractors() wypadało by mieć jeszcze np. GetContractorById(id), GetContractorByName(name), GetContractorsByCity(city) itd

0

Czyli przeważnie do filtrowania używa się backendu? To kiedy należy używac filtrowania po stronie frontendu?

0

a należy używać filtrowania po stronie frontendu? Nie wiem czy w aplikacjach webowych w ogóle występuje filtrowanie po stronie frontu. W desktopach to trochę inna bajka bo tam ciężko znaleźć prawdziwego cienkiego klienta

0

okej to dobrze wiedzieć. Bo ostatnio mi jedna osoba właśnie mówiła, że powinno filtrowanie się robić po stronie frontu.

2

ludzi ty nie słuchaj, tylko ścieżką mocy podążaj

0

W desktopach to trochę inna bajka bo tam ciężko znaleźć prawdziwego cienkiego klienta

Ty postulujesz raczej grubego klienta.

To kiedy należy używac filtrowania po stronie frontendu?

Z rozsądkiem i też patrząć na to, żeby użytkownik był zadowolony. Jeśli użytkownik wyszukał jakieś produkty, pobrałeś dane o tych produktach, wyświetliłeś je w liście. Użytkownik zawęził wyszukiwanie np. bluza i np. strona się wczytuje z 3 sekundy i pokazuje tylko produkty do 100zł. Wtedy mógłbyś przefiltrować dane, które już masz, bo już je pobrałeś, więc po co je pobierać? Zresztą przefiltrować po stronie frontendu możesz w ułamek sekundy, bo nie musisz walić zapytania do serwera, które trwałoby np. 3 sekundy (więc nie wkurzyłbyś użytkownika).

(Ale to tylko połowa prawdy, bo np. załóżmy, że pobrałeś tylko pierwszą stronę - załóżmy, że masz takie stronicowanie, że jedna strona to 10 wyników - użytkownik kliknął filtruj i zostały tylko 4 produkty. I w rezultacie i tak musisz pobrać brakujące produkty (żeby dorównać do 10 wyników), więc i tak musisz się połączyć z bazą. Po prostu użytkownik zobaczyłby najpierw 4 pobrane przefiltrowane produkty, a potem resztę).

Więc jak korzystasz z bazy danych do trzymania i wyszukiwania danych to i tak pewnie nie unikniesz odwoływania się do bazy danych (bo inaczej po co ci by była ona?).

Ale ogólnie o ile czasem faktycznie można wykorzystać frontend do zmniejszenia obciążenia bazy (albo do polepszenia doświadczeń użytkownika), to mam wrażenie, że to jeszcze nie ten etap. Że zadajesz pytania trochę na wyrost i idziesz w złą stronę jeśli chodzi o rozumowanie (że czuję się, że może lepiej jakbym tobie odpisał korzystaj z bazy danych, a olej frontend, mimo, że nie byłoby to dokładne).

Nie obciążę wtedy zbytnio bazy?

Jeśli nie chcesz obciążyć bazy to się poucz o tworzeniu zapytań SQL, o robieniu indeksów, cache czy ogólnie tego, co znajdziesz na temat optymalizacji bazy (sam nie ogarniam tych tematów specjalnie, ale umiem googlować, jak tego wymaga sytuacja).

Jak później to wyświetlić w tabelce html? Bo będą zwracane różne ilości rekordów przecież.

(możesz przecież przepuścić dane przez jakąś pętle czy podobny konstrukt, zależy w jaki sposób to renderujesz do HTMLa, czasem są jakieś systemy szablonów i one mają odpowiednie konstrukcje do iteracji)

0

Ok, bo właśnie przy renderowaniu strony i tak pobieram całą listę produktów. Potem natomiast chcę dodać filtr po nazwie i miejscowości i zastanawiałem się czy te filtrowanie robić za pomocą backendu czy frontendu.

2

zapoznaj się z pojęciami cienki i gruby klient (thin/fat client). Większość aplikacji webowych jest cienkim klientem. Zauważ, że żeby zminimalizować ruch i obciążenie bazy dane masz stronnicowane (choćby na forum masz tylko x postów w wątku pokazywane, a jak jest więcej to trzeba sobie kliknąć dalej). Generalnie ciągnięcie wszystkich danych do klienta ma (w większości przypadków) same wady bo

  • przepychasz więcej danych ze źródła
  • potem te dane gdzieś trzeba trzymać po stronie frontu (znaczy zajmują pamięć)
  • trzeba te dane przefiltrować do czego zazwyczaj język, w którym front jest pisany, nie jest projektowany
    Generalnie trend jest taki, że przed pokazaniem danych userowi należy od niego pobrać warunki brzegowe. Dodatkowo domyślnie te warunki ustawia się takie, żeby z jednej strony danych wynikowych było jak najmniej a z drugiej strony, żeby pokrywały one jak największy procent życzeń usera. Jeśli user potrzebuje większy zakres to musi już wykonać dodatkową pracę aby zmienić warunki brzegowe. Jak to wygląda w praktyce? - np. możesz domyślnie pokazywać tylko faktury z dzisiaj, albo tylko np. 20 ostatnich postów, tylko 10 wyników wyszukiwania w google albo tylko 20 produktów na stronie sklepu.
0

To jeśli przy renderowaniu strony pobrałem całą listę produktów to już filtrowanie lepiej aby odbywało się po stronie frontendu?

2

Lepiej jakbyś nie pobierał całej listy produktów przy renderowaniu strony.

0

To jeśli przy renderowaniu strony pobrałem całą listę produktów

Jeśli masz tak mało produktów, że całą pobrałeś - to też pytanie, czy baza ci w ogóle potrzebna (jeśli to parę produktów na krzyż to równie dobrze mógłbyś wtedy ładować dane z jakiegoś statycznego JSONa).

lepiej

lepiej jest zachować zdrowy rozsądek (czyli przestać patrzeć w kategoriach "A czy B", bo wszystko "zależy".

Np. Google czy Facebook robią dużo optymalizacji na frontendzie*, ale to nie znaczy, że teraz masz usiąść i wszystko obrabiać po stronie frontendu, szczególnie, że wydaje mi się, że nie masz ani potrzeby, ani rozeznania kiedy to robić, ani nawet pewnie nie umiałbyś tego poprawnie zaimplementować.

Wydaje mi się, że na początek warto poznać podstawowe techniki wydobywania danych z bazy/organizacji jej (jak robić zapytania SQL, indeksy i takie tam), a potem dopiero myśleć o wykorzystaniu frontendu do obróbki danych, jak będziesz miał konkretny problem, a nie problem wyobrażony...

*które czasem są wkurzające, np. fakt, że komentarze na Youtube pojawiają się z opóźnieniem - dopiero jak się przewinie stronę to zaczyna je wczytywać. Rozumiem, że optymalizują sobie serwery w ten sposób, ale mnie to wkurza jako użytkownika, bo muszę dodatkowo czekać.

0

Lista produktów ma około 200 rekordów. Muszę je wszystkie pobrać przy starcie ponieważ, każdy rekord ma kolumny odpowiadające X i Y na mapie, a chcę ustawić pinezki dla każdego adresu na google mapie, która będzie w widoku.

0

To czy lepiej w takim przypadku te dane umieścić w statycznym pliku json? Potem chcę robić filtrację np. po miejscowości.

2

Jeśli jeden produkt to tylko x, y, nazwa i link - spoko, pobierz wszystkie. Jeśli jednak danych jest więcej - pobierz tylko x, y dla każdego produktu, ustaw pinezki na mapie, a szczegóły pobieraj dopiero, jak ktoś kliknie w pinezkę.

0

200 produktów można by jeszcze zapakować w JSONa (nie mówię, że w tej sytuacji to będzie dobry pomysł, ale tak ogólnie myślę, że mogą istnieć sytuacje, w których tego typu dane byłyby ładowane JSONem albo wręcz wrzucane do HTMLa w jakimś ukrytym elemencie).

Tylko, że:

  • wielkość danych, które musi pobrać przeglądarka by się zwiększyła
  • tracisz możliwość fajnego wyszukiwania, które daje baza danych, wszystko musisz robić ręcznie
  • tracisz możliwość aktualizacji danych przez bazę danych, też musisz robić ręcznie wszystko (dopóki to read only będzie to jeszcze okej).

a chcę ustawić pinezki dla każdego adresu na google mapie, która będzie w widoku.

mógłbyś jeszcze spróbować wykryć moment, kiedy okienko mapy się przesuwa i ładować tylko te, które są w widoku (dając zapytanie do serwera, żeby serwer wysłał zapytanie do bazy typu POBIERZ REKORDY ZAWIERAJACE SIE W DANYCH WPOLRZEDNYCH)

Zdaje się, że jest coś takiego jak zdarzenie bounds_change w Google Maps: https://developers.google.com/maps/documentation/javascript/examples/rectangle-event

To by miało taką, zaletę, żeby było skalowalne pod kątem liczby rekordów (200 **może **jeszcze ujdzie, ale już 10000 rekordów to ciężko ściągać). Albo tak jak przedmówca wspomniał, można pobrać same współrzędne i jakiś identyfikator.

0

Ok, a możecie mi wyjaśnić jeszcze różnicę między cienkim i grubym klientem. Bo z tego co czytałem cienki klient to taki, który za pomocą swojego sprzętu komunikuje się z jakimś serwerem, a gruby klient to taki, który ma lokalnie cały serwer?

0

cienki tylko pyta jakiegoś api (tam trzymana jest "logika biznesowa") - api robi magię i przesyła dane do klienta, który je tylko wyświetla.
gruby klient często robi jakieś operacje na danych, a potem przesyła już jakiś "wynik" do bazy (może nie wprost do bazy, ale coś w stylu "zapisz te dane" do pośrednika, a ten wrzuca je do bazy.
grube klienty to często apki desktopowe, często systemy ERP są tak skonstruowane, które na bieŻąco (Boże, widzisz takie błędy i nie grzmisz) muszą obliczyć wiele wartości ekonomicznych, czy tam księgowych, a z bazy pobieraja tylko pewne wartosci potrzebne do przeliczenia
to tak na moje noobowskie oko :D

0

Musisz sobie odpowiedzieć na pytanie : na jakich danych będziesz operował - listy, JSON, strumienie? Jeśli listy/ tablice to w ES6 są map(), filter(), reduce(), lub biblioteki funkcyjne np.: bacon.js - do strumieni Rx.js. Możesz użyć Reduxa i dekoratorów, MobX, Vuex ...
Na serwerze możesz użyć Stream API, Dekoratorów, Kafki, Sparka.

0

Czy jeśli w momencie kliknięcia na daną pinezkę będę pobierał dopiero szczegółowe dane to czy nie minie kilka sekund zanim one zostaną wyświetlone? Ponieważ będą musiały się pobrać z bazy danych.

0

Nie, zadałem pytanie zzy jeśli w momencie kliknięcia na daną pinezkę będę pobierał dopiero szczegółowe dane to czy nie minie kilka sekund zanim one zostaną wyświetlone? Ponieważ będą musiały się pobrać z bazy danych. Więc chodzi mi o te pytanie.

0

To co to za baza, że kilkaset rekordów wyciąga w kilka sekund?

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