Github
Linkedin
Czy zastanawiałeś się, dlaczego w dzisiejszych czasach, gdy mamy dostęp do najnowszych technologii i rozwiązań, projekty IT nadal kończą się fiaskiem? Czy nie uważasz, że w wielu przypadkach zamiast upraszczać to komplikujemy sobie życie i pracę? Czasami mniej znaczy więcej, zwłaszcza w świecie frontendu! Czytaj dalej i dowiedz się czym jest AHA stack i jak robić frontend prościej.
Jeśli chodzi o pracę z frontendem to podczas mojej niesamowitej technologicznej przygody niczym podróż kota w skarpetkach poprzez wrocławski rynek widziałem już wszystko. HTML i wysyłanie requestów do serwera przez xhttp, szablony typu Handlebars, jQuery. Pracowałem też z Magento gdzie frontend był prosty jak droga do nikąd. Tam poznałem Knockout.js czyli MVVM frawework i dekleratywne bindingi. Dalej to już z górki: EmberJS, AngularJS i ostatecznie React i Vue.
Ewolucja frontendu
Patrzę na te frameworki i podejścia do frontendu i myślę sobie, że na przestrzeni lat frontend bardzo odszedł od swoich korzeni i przeznaczenia. Zawsze myślałem o frontendzie jako o tym, ze jest jakaś strona WWW, na niej się coś wyświetla i użytkownik może sobie coś przeczytać, coś kliknąć.
Mówiąc bardziej technicznie frontend to HTML/CSS + interakcje dynamiczne i komunikacja z serwerem. Kod renderowany na serwerze i wyświetlana strona użytkownikowi. Tymczasem frontend poszedł w tym kierunku, że to wszystko robi się w przeglądarce za pomocą JavaScriptu i strony, które powinny być lekkie są mega ciężkie.
Oczywiście rozwiązanie typu SPA ma swoje zastosowania do bardziej skomplikowanych przypadków jak np. aplikacje bankowe, natomiast używanie potężnych frameworków do wyrenderowania prostej strony internetowej, czy nawet sklepu to być może przerost formy nad treścią. A może w tym całym IT nie chodzi o to, żeby coś zrobić, tylko żeby robić?
Nie wiem, natomiast jestem entuzjastą technologii i świadomych decyzji oraz upraszczania zamiast komplikowania dlatego byłem bardzo szczęśliwy gdy zobaczyłem, ze powstało coś takiego jak AHA stack. To doskonały przykład takiego podejścia, ze robisz mniej a dostajesz więcej. Prościej i szybciej. Jego filozofia opiera się na idei, że frontend powinien być przede wszystkim do komunikacji z serwerem i prezentowaniu treści użytkownikowi, a jądrem całego stacku jest - uwaga zaskoczenie: HTML!
AHA! Czyli można prościej?
AHA Stack jest idealny dla frontend developerów, którzy kochają React/JSX, ale chcą też więcej prostoty w życiu, generując HTML po stronie serwera i minimalizując ilość JavaScriptu po stronie klienta.
AHA Stack opiera się na podstawowych technologiach internetu: HTTP, HTML, CSS, JavaScript, serwerach i przeglądarkach internetowych, DOM, zdarzeniach przeglądarki, formularzach, FormData, XHR, fetch(), Request, Response oraz ciasteczkach. Są to kamienie milowe technologii internetowej, które są stabilne i niezmienniane od lat.
AHA Stack dodaje kilka fajnych rzeczy, które ulepszają doświadczenie w tworzeniu aplikacji webowych. Zamiast wymyślać koło na nowo, wykorzystuje powszechnie znane i fundamentalne technologie, ale dodaje się też coś ekstra, by sprostać współczesnym standardom użytkownika.
AHA! Ale jak to działa?
Nasz bohater, AHA Stack, wprowadza bibliotekę, która ułatwia zarządzanie połączeniami HTTP. Wyobraźcie sobie aplikację TODO, gdzie dodajesz element do listy zadań, a lista odświeża się bez przeładowania całej strony. To samo przy usuwaniu zadania. Brzmi znajomo? Tak, to właśnie cała idea aplikacji jednostronicowych (SPA)!
Biblioteka ta pozwala na wysyłanie dowolnych metod HTTP (POST, GET, DELETE, PUT, PATCH) do serwera, a także na serwowanie stron HTML przez serwer internetowy. Co ciekawe, nie ma tu miejsca na JavaScriptowe frameworki – serwer robi wszystko, old-school style!
Ale oczywiście, kiedy potrzebujemy więcej funkcji aplikacji, dodajesz “posypkę interaktywności JavaScriptu”. Używasz JavaScriptu lub biblioteki, która pomaga zarządzać tą interaktywnością.
AHA Stack dodaje dwa narzędzia do Platformy Webowej: łatwość komunikacji klient-serwer i dodawanie interaktywności po stronie klienta. To pozwala nam uciec od zawiłości frameworków SPA i budować lepsze, bardziej utrzymywalne aplikacje, szybciej.
A co to za narzędzia? Otóż, “AHA” to zestaw Astro, htmx, Alpine.js. Jak widać, AHA to nie tylko wyraz zaskoczenia, ale też skrót od narzędzi, które sprawią, że tworzenie aplikacji webowych będzie proste jak ABC!
Podsumowanie
W dzisiejszym felietonie przyjrzeliśmy się temu, jak AHA Stack zmienia reguły gry w świecie frontendu. Zamiast porywać się na skomplikowane, ciężkie rozwiązania typu SPA, AHA proponuje powrót do korzeni - prostoty i efektywności.
Pamiętaj, czasem kluczem do sukcesu jest… uprościć! Czy nie jest to świetna zachęta, by spojrzeć na Twoje projekty z nowej perspektywy? AHA Stack to więcej niż technologia – to filozofia, która może odmienić Twój sposób myślenia o frontendzie. Spróbuj, a może odkryjesz swój własny “AHA moment”!
Źródła
https://ahastack.dev/aha/1-stack-overview/
https://ahastack.dev/concepts/how-we-got-here/
https://ahastack.dev/concepts/html-first/
https://ahastack.dev/concepts/simplicity/
[elementor-template id=“3942”]