Technologie frontendowe z backendem w javie

0

Chcę stworzyć parę projektów webowych (proste statyczne stronki do poćwiczenia html/css/js jak i coś bardziej skompilkowanego: serwer szachowy/apkę do tworzenia fiszek z użyciem: serwera rest w javie (jax-rs) zwracający dane w json, klient na androida i przeglądarkę. Uczę się jeszcze html, css, js (kiedyś korzystałem, teraz douczam się tego co potrzebuje)

Nasuwają mi się takie pytania odnośnie tworzenia serwisu rest w javie i klienta na przeglądarkę:

  1. jakie rozwiązanie frontendowe zastosować by: zinterpretować jsona od rest api, nauczyć się przydatnych rzeczy do web developmentu (ale nie zamierzam zostawać frontendowcem), być w stanie zrozumieć działania narzędzia, ale bez dodatkowych funkcjonalności które początkującemu nie są potrzebne i prostej architekturze która umożliwi zrozumienie tego co się dzieje?

  2. czy rest api będzie spoko wyborem do mniej “crudowych” danych, typu serwer do grania w szachy, ale z klientem na przeglądarkę i androida?

  3. jak w rest api przechowywać stan (np. pozycja na szachownicy, zalogowanie, itd.)? Cookies? Ciało żądania?

  4. jak działają w skrócie frameworki typu angular/react/vue.js? Chodzi mi bardziej o to, gdzie są w przepływie danych między przeglądarką a serwerem rest, co biorą na wejście a dają na wyjście niż o to jakie funkcjonalności oferują

  5. czemu najpopularniejsze frameworki frontendowe są do SPA, skoro większość stron raczej korzysta z podstron.

  6. czy dla zachowania prostoty w tworzeniu frontendu i klienta na przeglądarki warto np. postawić pośredni serwer (np. servlet), który będzie przyjmował zapytania od przeglądarki i dane z rest api i np. za pomocą thymeleaf/klienta rest z jersey wygeneruje stronę?

  7. jakiś dobry tutorial w temacie generowanie strony html na podstawie danych z jsona dla początkującego? Chodzi bardziej o przedstawienie koncepcji i możliwości.

  8. jakie są popularne metody tworzenia prostych stron (wizytówkowe, stronka z informacjami na dany temat), gdy korzystamy z backendu w javie

Dziękuje za podpowiedzi, sam googluje ale stos technologii webowych przytłoczył mnie, a i w javie mam wrażenie, że nie ma "basicowych" rozwiązań na serwowanie stron na ciut wyzszym poziom abstrakcji niż pisanie przez i/o na servletach kodu strony do obiektu odpowiedzi.

1
  1. stawiasz jakiś starter na angularze, vue albo react`cie i lecisz, tu nie da się pominąć czegoś. Użycie jquery by cie zamęczyło. Z tydzień na zapoznanie się z danym frameworkiem i starterem musisz sobie zarezerwować.
  2. Oczywiście
  3. Od strony backendu musisz to trzymać w jakiejś bazie nawet nosql typu redis, a front trzyma swoje w pamięci
  4. nie kumam :D backend wystawia api, a wszystko co się dzieje w przeglądarce ogarnia ci już angular wraz z pozostałymi bibliotekami rozszerzającymi go i twoim kodem.
  5. a to w spa nie można robić podstron? pierwsze słysze. spa polega na tym, ze strona ładuje się raz a potem jedyna komunikacja jest po rest api z backendem
  6. eeeeeeee nie, rest ma obsłużyć angular/vue/react
  7. każdy framework ma bardzo fajną dokumentacje i swoje własne oficjalne tutoriale
  8. ...
0
  1. literka S w skrócie REST oznacza stateless. Pomedytuj nad tym
0
mr_jaro napisał(a):
  1. stawiasz jakiś starter na angularze, vue albo react`cie i lecisz, tu nie da się pominąć czegoś. Użycie jquery by cie zamęczyło. Z tydzień na zapoznanie się z danym frameworkiem i starterem musisz sobie zarezerwować.
  2. Oczywiście
  3. Od strony backendu musisz to trzymać w jakiejś bazie nawet nosql typu redis, a front trzyma swoje w pamięci
  4. nie kumam :D backend wystawia api, a wszystko co się dzieje w przeglądarce ogarnia ci już angular wraz z pozostałymi bibliotekami rozszerzającymi go i twoim kodem.
  5. a to w spa nie można robić podstron? pierwsze słysze. spa polega na tym, ze strona ładuje się raz a potem jedyna komunikacja jest po rest api z backendem
  6. eeeeeeee nie, rest ma obsłużyć angular/vue/react
  7. każdy framework ma bardzo fajną dokumentacje i swoje własne oficjalne tutoriale
  8. ...
  1. okej, ale chciałem najpierw zrobić prostsze projekty by poznać "magię" którą robią frameworki. Tak googlowałem i dochodzę do tego, że aby dynamicznie coś wygenerować na danych otrzymanych trzeba użyć DOM i js. Może jQuery. I chciałem parę takich "bezpośrednich" przykładów zrobić, ale myślałem też o narzędziu które na dość niskimi poziomie operuje i usuwa trochę boilerplate-u, ułatwi zmapowanie danych jsona na szablon strony i zrobię jakieś proste stronki.

Celem jest zrozumienie jak to działa i ułatwienie trochę tego (bez ustawiania mniej istotnych nagłówków, generowania kodu linijka po linijce tylko np. użycie szablonu). Bez większości ułatwień do wielu rzeczy i wysokim poziomie abstrakcji. Do drugiego projektu pewnie użyję którego z frameworków które wymieniłeś (i pewnie dość szybko to nastąpi bo nie zamierzam długo siedzieć na niskim poziomie). Chociaż vue.js reklamuje się na dość prosty "entry level"

  1. Czyli np. rest ma udostępniać zrobienie ruchu jako jakiś url? metoda post i url match_id/player_id/ i w danych ruch w stringu?

  2. no tak, tylko backend zwraca tylko json (bez html). Więc do momentu zinterpretowania gotowego kodu html przez przeglądarkę, szablon html z dołączonym kodem biblioteki angular (kod js) powinien być przesłany do przeglądarki. Wyjścia jakie widzę to:
    I) rest wystawia specjalny url na którym zwraca stronę główną w html (z dołączonym angularem) - czyli nie jsona,
    II) serwer rest rozpoznaje po atrybutach http zapytania: źródło zapytania (czy to przeglądarka) oraz pierwsze połączenie użytkownika i wtedy wysyła plik html (ale rozpozna też inne źródła zapytania np. apkę androida i wtedy wyśle co innego niż plik html),
    III) stawiam serwer pośredni, który ma za zadanie odesłać kod html z dołączonym angularem i resztę "klikań" jakie użytkownik zrobi na stronie to angular odpowiednio zmapuje na żądania do serwera rest (a nie pośredniego)

  3. trochę było powiązane z tym co napisałem w tej odpowiedzi w 4 III

1

  1. Żadne jquery. angular/vue/react to biblioteki js do operacji DOM one załatwiają całość! https://vuejs.org/v2/guide/

  2. tworzysz api restowe gdzie każda odpowiedź jest jsonem

  3. nie, cały html to część freameworka, framework go kompiluje do wynikowego prawidłowego htmla na żywo, wszystko dzieje się w przeglądarce, patrz przykład z punktu 1
    rest nigdy nie zwraca htmla, tylko obiekty, tablice, wartości w jsonie, robisz tak naprawde 2 różne aplikacje, jedna w javie/php/c#, pythonie, czymkolwiek bedąca backendem i wystawiająca api, a druga to front, gdzie wystarczy uruchomić najostrzejszego apacha serwującego statyczne pliki, interpretowane przez przeglądarkę.

1

jak działają w skrócie frameworki typu angular/react/vue.js? Chodzi mi bardziej o to, gdzie są w przepływie danych między przeglądarką a serwerem rest, co biorą na wejście a dają na wyjście niż o to jakie funkcjonalności oferują

React to biblioteka, która działa w przeglądarce* i pozwala na definiowanie komponentów HTMLowych i wyświetlanie tych elementów później w dowolnych miejscach, na definiowanie zdarzeń myszy, na dołączanie interaktywnej logiki do tych komponentów.

Komponenty teoretycznie się pisze w JavaScript, ale w rzeczywistości nie do końca - najczęściej się to pisze w JSX (to taki specjalny dodatek do JavaScriptu, który dodaje możliwość używania w nim pseudo-HTMLa).

* ale niekoniecznie, bo React można też użyć na serwerze w Node.js, wtedy działa to podobnie do systemu szablonów na backendzie.

0
mr_jaro napisał(a):

  1. Żadne jquery. angular/vue/react to biblioteki js do operacji DOM one załatwiają całość! https://vuejs.org/v2/guide/

  2. tworzysz api restowe gdzie każda odpowiedź jest jsonem

  3. nie, cały html to część freameworka, framework go kompiluje do wynikowego prawidłowego htmla na żywo, wszystko dzieje się w przeglądarce, patrz przykład z punktu 1
    rest nigdy nie zwraca htmla, tylko obiekty, tablice, wartości w jsonie, robisz tak naprawde 2 różne aplikacje, jedna w javie/php/c#, pythonie, czymkolwiek bedąca backendem i wystawiająca api, a druga to front, gdzie wystarczy uruchomić najostrzejszego apacha serwującego statyczne pliki, interpretowane przez przeglądarkę.

dzięki za pomoc. Odnośnie 4 to by pasowało do III opcji

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