Wątek przeniesiony 2023-05-30 18:13 z Webmastering przez Riddle.

W jaki sposób programować frontend?

0

Cześć,

Najpierw wyjaśnię, że bawię się w backend w PHP. Tak z pasji wszystko, siedzę po godzinach i piszę sobie framework. Ciekawi mnie, bardzo chce to pojąć (chyba jestem za głupi, może Wy mi łopatologicznie wytłumaczycie) jak zrobić frontend.

Od początku.

W skrócie u mnie do tej pory wygląda tak, że mam serwer, tam jest cała strona. Router wywołuje odpowiedni kontroler, kontroler w razie potrzeby łączy się z modelem, model pobiera dane i zwraca do kontrolera, między czasie kontroler sprawdza czy są prawa dostępu, czy user zalogowany i inne bzdety. Na koniec wywoływany jest widok (z wysyłką ewentualnych danych). Ten wysyła dane JSON lub uruchamia szablon, dodało odpowiednie CSSy, skrypty i ciało strony (tak w skrócie to co w <body></body>).
W szablonie tym (lub podpiętymi skryptami do niego w widoku) jak jest potrzeba pobieram dodatkowe dane, np poprzez ajax i wyświetlam modyfikując html (DOM i te sprawy).
Tak to wygląda teraz.

I tu moje głupie pytanie:
Jak to powinno się robić?
W mojej głowie, w moim opisie, wszystko do słowach o widoku mam dobrze zrobione. Ale jeśli chciałbym na innym serwerze mieć sam widok i pobierać informacje z API (tego serwera opisanego wyżej).

Jak to powinienem zrobić? Postawić serwer dla widoku, tam PHPem wrzucić sam widok z tego co opisywałem wyżej i pobierać wszystkie dane łącząc się z serwerem gdzie jest API.
A może jakoś tworzyć szablony w JS i pobierać np ajaxem dane z API. Tylko w tym przypadku co z odświeżaniem adresu w przeglądarce, cofaniem do poprzedniej strony, itd.

Bawię się trochę w programowanie na Androida. Tam jest, hmmm... "prościej". Łącze się z API wysyłając żądanie i pobieram dane, które sobie wyświetlam.
Jak to się robi przy tworzeniu stron internetowych? I czy moje podejście, którym aktualnie się posługuję, jest odpowiednie?

Proszę, pomóżcie mi bo ślęczę przy tym i nie mogę ogarnąć tej jednej kwestii.

Przepraszam za chaos, pytajcie o szczegóły, i prosze za bardzo mnie nie skarćcie :)

1
Ardżej16 napisał(a):

Najpierw wyjaśnię, że bawię się w backend w PHP. Tak z pasji wszystko, siedzę po godzinach i piszę sobie framework.

No nie wiem, faktycznie piszesz framework? Czy robisz sobie po prostu aplikację webową?

Router wywołuje odpowiedni kontroler, kontroler w razie potrzeby łączy się z modelem, model pobiera dane i zwraca do kontrolera, między czasie kontroler sprawdza czy są prawa dostępu, czy user zalogowany i inne bzdety. Na koniec wywoływany jest widok (z wysyłką ewentualnych danych). Ten wysyła dane JSON lub uruchamia szablon, dodało odpowiednie CSSy, skrypty i ciało strony (tak w skrócie to co w <body></body>).
W szablonie tym (lub podpiętymi skryptami do niego w widoku) jak jest potrzeba pobieram dodatkowe dane, np poprzez ajax i wyświetlam modyfikując html (DOM i te sprawy).
Tak to wygląda teraz.

No brzmi jak schemat każdego jednego frameworka MVC jaki istnieje (Laravel, Lumen, Yii, Ouzo, Symfony, Rails, Django).

I tu moje głupie pytanie:
Jak to powinno się robić?
W mojej głowie, w moim opisie, wszystko do słowach o widoku mam dobrze zrobione. Ale jeśli chciałbym na innym serwerze mieć sam widok i pobierać informacje z API (tego serwera opisanego wyżej).

Jak to powinienem zrobić? Postawić serwer dla widoku, tam PHPem wrzucić sam widok z tego co opisywałem wyżej i pobierać wszystkie dane łącząc się z serwerem gdzie jest API.

No mógłbyś tak zrobić - miałbyś wtedy aplikacje serwisową i aplikację prezentacyjną; z czego ta druga musiałaby polegać na tej pierwszej (jeśli zrobisz to nieudolnie, to ta pierwsza polegałaby też na drugiej)

A może jakoś tworzyć szablony w JS i pobierać np ajaxem dane z API. Tylko w tym przypadku co z odświeżaniem adresu w przeglądarce, cofaniem do poprzedniej strony, itd.

To z kolei brzmi jak model każdego jednego frameworka SPA jaki istnieje: React, Angular, Vue, Backbone, svelte.

Bawię się trochę w programowanie na Androida. Tam jest, hmmm... "prościej". Łącze się z API wysyłając żądanie i pobieram dane, które sobie wyświetlam.
Jak to się robi przy tworzeniu stron internetowych? I czy moje podejście, którym aktualnie się posługuję, jest odpowiednie?

To jest różnica pomiędzy podejsciami SSR a SPA; oba mają swoje wady i zalety.

1
Ardżej16 napisał(a):

I tu moje głupie pytanie:

Ojtam, nie ma głupich pytań.

Jak to powinno się robić?

Gdybyśmy wiedzieli jak się robi oprogramowanie, to może trochę więcej projektów zakończonych sukcesem by było. Nie żartuję, podejścia dzielą się na takie, które nie wypaliły nigdy i takie które podobno u kogoś zadziałały.

Bawię się trochę w programowanie na Androida. Tam jest, hmmm... "prościej". Łącze się z API wysyłając żądanie i pobieram dane, które sobie wyświetlam.
Jak to się robi przy tworzeniu stron internetowych? I czy moje podejście, którym aktualnie się posługuję, jest odpowiednie?

Takie podejście jest jak najbardziej możliwe w webdevie i można powiedzieć, że w tej chwili dominuje. Masz backend, który wystawia jakieś tam API i nie ma pojęcia, że istnieje coś takiego jak HTML. Równie dobrze może się do niego podłączyć jakaś aplikacja androidowa i działać. BTW. skoro robisz coś tam w Androidzie, to po grzyba PHP?
Do tego dopisywana jest warstwa o odpowiedzialności identycznej jak większość aplikacji mobilnych. Pobrać dane, wyświetlić, pozwolić coś tam z nimi zrobić, odesłać zmiany. Termin Ajax właściwie nie jest używany od lat, bo skoro Server Side Rendering (czyli serwer zwracający strukturę html, wypełnioną danymi) nie jest używany, to po co podkreślać, ze dane są pobierane dynamicznie.

Nie chcę sugerować wyboru jakichś framweorków, bo się na tym nie znam, ale wojenki programistów frontendowych o to który lepszy są tak zacięte, że na 99.9999% nie ma to żadnego znaczenia. Dlatego moja propozycja szybkiego ogarnięcia "full stacka":

  • Szybki kurs Angulara (nie wiem czy jest lepszy/gorszy od React/Vue/czystego jquery, ma ~przyzwoity tutorial) https://angular.io/tutorial/tour-of-heroes
  • Dorobienie do tego co on tam wyświetla prostego backendu w wybranej technologii backendowej

Da się to spokojnie zrobić w parę wieczorów, więc nawet jak ci nie podejdzie, to czasu za dużo nie stracisz.

1

Z grubsza dobrze gadasz.
Podejść jest kilka.
Pierwsze co to pomyśl o stronie w pełni statycznej - nie ma żadnego PHP czy tam Pythona etc. Jest serwer który odpytany przez przeglądarkę serwuje treści.
I to w całym tym webowym świecie jest nazwijmy to " niezmienne". Jak masz apkę na Android to ta apka ma już jakiś kod. Potrafi coś wyświetlić.
Teraz przyszli ludzie i zrobili rewolucję. Czyli serwowany statyczny HTML może mieć pod spodem coś co go modyfikuje i serwuje np. konkretnej osobie spersonalizowaną treść.
No i znów przyszła rewolucja napędzana potrzebą. Czemu za każdym razem pytać serwer o całą stronę jak można np. tylko o jakieś treści. I tu weszło API.
I tak można spłycić do tego, że storna to tylko jej szkielet i kod JS. JS poprzez różne sposoby pobierania danych buduje resztę treści.
Są podejścia typu miks wszystkiego. Żadne z nich nie jest źle czy dobre. To różne ewolucje i następstwa nowszych możliwości sprzętowych, szybszego internetu.
Jak bawisz się na tym poziomie poczytaj sobie o Blade, Twig, Smarty. Potem jak chcesz napisz co kolwiek podobnego.
Ewolucją tego będzie jakiś REACT, VUE itp.

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