Czy da się zrobić sensowną stronę bez dodatkowych frameworków

1

Panie / Panowie frontendowcy, jestem typowym Java backendowcem. Aktualnie pracuje nad swoim projektem i na razie nie chcę bawić się w koszta i dodatkowo kogoś angażować do robienia widoków więc moje pytanie brzmi czy pewnym nakładem pracy da się przy pomocy Bootstrapa + html, css i js wyrzeźbić coś pokroju https://nofluffjobs.com/ ? Chodzi mi o wizualną część tej strony - jakieś takie sekcje jak ta szukajka u góry, dynamicznie rozwijana lista ogłoszeń po kliknięciu show more, ogłoszenie ładnie sformatowane itp?
Albo też takiego single page'a https://thedesignproject.co/ na pierwszą stronę projektu?
Wiem ze pytanie może wydawać się głupie ale z bootstrapem jakieś tam małe doświadczenie mam i pomyślałem żeby od tej strony to ugryźć ale jeśli ma się zaraz okazać że zamiast sobie ułatwić bo go trochę znam to sobie dołożę tylko pracę to może lepiej trochę czasu poświęcić na naukę jakiegoś Angulara lub czegoś podobnego? Jeśli bootstrap nie jest dobrym rozwiązaniem to co możecie ewentualnie polecić? Całą logikę mam zamiar postawić na Javie/Kotlinie i wystawić tylko RESTowe API żeby widoki mogły wysyłać/pobierać dane i je sensownie wyświetlać.

0

Bootstrap nie jest językiem programowania, zatem Twoje pytanie jest dosyć osobliwe - w gruncie rzeczy zapytałeś: Czy CSS wystarczy do przetworzenia danych z mojego API?.

Najwygodniej byłoby Ci zaprzęgnąć do tego Angulara czy Vue, lecz od biedy i w czystym JSie połączonym z całą resztą (HTMLem + CSSem, w dowolnym frameworku CSSowym) da radę.

0

Z tego co widzę nofluff korzysta z bootstrap v3.3.6 view-source//nofluffjobs.com/styles/vendor-e55b0f3e14.css
jquery i angularJS
To drugie z kolei korzysta z bootstrap 4+jquery plus https://d3js.org, więc da się :)
Jak chcesz trochę mnie archaiczny widok to możesz zobaczyć rodzimą nakładkę MDBootstrap https://mdbootstrap.com w prawdzie wersja Pro jest płatna, ale w większości to tylko style css i jakieś inne libki js, które i tak są dostępnie oddzielnie za free.
Ewentualnie jest jeszcze MaterializeCSS.
Oczywiście zawsze możesz powalczyć z Angularem, który też ma material design jak masz więcej czasu.

0
Patryk27 napisał(a):

Bootstrap nie jest językiem programowania, zatem Twoje pytanie jest dosyć osobliwe - w gruncie rzeczy zapytałeś Czy CSS wystarczy mi do przetworzenia danych z mojego API?.

Hmm, może źle się wyraziłem ;) Z takich kwestii frontendowych mam doświadczenie w html, css, js + bootstrapie (gridy itp).
Pytanie więc raczej powinno brzmieć czy to wystarczy aby cokolwiek sensownego napisać czy lepiej ruszyć jeszcze coś dodatkowo i co dzięki temu zyskam? Nie chciałbym teraz uczyć się tych wszystkich ficzerów frontendowych które tak często się zmieniają bo to trochę nie moja bajka ale też mam świadomość że aby coś sensownego zrobić czasami trzeba się trochę pouczyć.

0

Wygląd strony to właśnie Bootstrap
Cała reszta to jakiś silnik, dynamicznie - AJAX.

Jakieś skrypty - to może być nawet JAVA

3

Da się nawet bez Bootstrapa. W czystym HTML + CSS + JS da się wyrzeźbić dowolną stronę internetową, bo przecież wszystkie te frejmłorki i biblioteki są ostatecznie "kompilowane" do gołego kodu. Gotowce pozwalają osiągnąć pożądany efekt niższym nakładem własnej pracy, ale z drugiej strony oznacza to zwykle więcej pracy dla serwera i przeglądarki. Osobiście nie pojmuję tej maniery, gdzie dosłownie każda strona składająca się raptem z pięciu sekcji na stronie głównej i rozwijanego menu jest budowana za pomocą narzędzi, które na dzień dobry dają jej narzut w postaci 1 MB kodu JS i CSS, z którego wykorzystany jest może 1%.

A co do drugiego podanego przykładu: https://mdbootstrap.com (BŁĄD, chodziło o ten link: https://thedesignproject.co) - czy jesteś pewien, że te wk... animacje pojawiające się przy każdym przewinięciu strony generują dla użytkownika jakąś wartość dodaną?

1

"Frameworki" do frontendu typu React czy inne spełniają (w uproszczeniu) 2 funkcje:

  1. pozwalają na programowanie interaktywności, rzeczy, które zmieniają swój stan. React pozwala pisać interaktywne rzeczy na takiej zasadzie, jak działają szablony po stronie serwera - pobiera dane na wejściu i zwraca HTML. Tylko, że React może robić to ileś razy na sekundę/minutę, za każdym razem jak użytkownik coś zmieni na stronie. Chociaż interaktywność można również programować w jQuery albo w ogóle bez dodatkowej biblioteki, operując tylko przeglądarkowym JavaScriptem.

  2. pozwalają na wielokrotne użycie tego samego kodu (w postaci komponentów), czyli pozwalają zachowywać zasadę DRY

Na fluffjobs nie masz za dużo interakcji, więc punkt pierwszy będzie tu mało wymagający. Jednak masz tam dużo powtarzających się elementów, więc jednak powinien być tam użyty jakiś system szablonów. Kiedyś strony były statyczne, więc wystarczyło renderować po stronie serwera i już. Jednak ponieważ ludzie dzisiaj często piszą strony, które się dynamicznie zmieniają, to jest trend na używanie szablonów po stronie przeglądarki (React, Vue, Angular - wszystkie te narzędzia mają w sobie język szablonów).

I dlatego ludzie korzystają z frameworków JSowych. Do tworzenia GUI, które się ciągle zmienia (za każdym razem, kiedy użytkownik coś kliknie). Pytanie, czy twoja strona będzie się zmieniać ciągle (jak nie, to wystarczy rendering po stronie serwera do klasycznego HTML/CSS).

ogłoszenie ładnie sformatowane itp?

To się robi w HTML + CSS (można użyć dodatkowo rzeczy typu Bootstrap).

Chodzi mi o wizualną część tej strony - jakieś takie sekcje jak ta szukajka u góry, dynamicznie rozwijana lista ogłoszeń po kliknięciu show more,

Wygląd w HTML/CSS, jakiś prosty JavaScript do podmiany klasy w CSS.
Co do szukajki, to jeśli ma być to interaktywna szukajka (czyli nie oparta na prostym HTMLowym formularzu, ale działająca bez przeładowania strony), to będziesz musiał dodać jakąś logikę i połączyć to z danymi, więc trochę w JavaScript będziesz musiał pokodować (np. żeby pobrać dane od użytkownika, zrobić zapytanie za pomocą jakiegoś fetch i wyświetlić z powrotem).

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