1.01 (1) SSR, SSG, SPA czy MPA?
1.01 SSR, SSG, SPA czy MPA? W pierwszym odcinku podcastu PiwnicaIT rozmawiamy o różnych podejściach do tworzenia aplikacji webowych. Poruszamy tematy związane z SPA, SSG, SSR czy MPA w ujęciu webdevelopmentu. Omawiamy nasze doświadczenia w pracy z różnymi bibliotekami i frameworkami dostępnymi na rynku. Materiały dodatkowe: Qwik Svelte How to pick Web Framework in 2023 NextJS Gatsby React 10 Rendering Patterns for Web Apps Rozmawiają: Wojciech Skorupa [linkedin] Mateusz Jabłoński [www] [linkedin]
Tak naprawdę od tego nie uciekniemy. Co myślisz? Masz rację Mateuszu, jest to rzecz nieunikniona. Myślę, że każdy deweloper słyszał o takich frameworkach jak chociażby Next.js czy Gatsby. Myślę, że jest to fajne o tyle, że oferują one naprawdę coś specjalnego i coś czego tak naprawdę nie da się na razie jeszcze natywnie osiągnąć za pomocą Reacta. I rozwiązujemy realne problemy, z którymi boryka się, czy też borykają się takie nowoczesne aplikacje w sieci. Takie nowoczesne aplikacje w sieci.
Low code, no code i inne tego typu rzeczy. I tak naprawdę wydaje mi się, że ja osobiście nie chciałbym już pracować na pewno w czymś, co nie sprawi mi frajdy, ale z drugiej strony pod kątem biznesowym Na pewno trzeba dobierać narzędzia pod potrzeby, więc ja pewnie wybrałbym do prostego MVP HTML-a zamiast jakiegoś rozwiązania reactowego, ale to już jest... Ja chyba bym zrobił odwrotnie. Wiesz, jak teraz Ciebie tak słucham i się zastanawiam, to myślę, że nawet jakbym robił najprostszą stronę internetową, jednak bym się zdecydował na właśnie jedną z tych technologii, o których dzisiaj rozmawiamy.
Myślę, że dlatego, że właśnie bardzo szybko pojawiają się takie potrzeby w stylu rozbudowanie strony. Tak, jesteś zdecydowanie bardziej future proof. Też myślę, że ogromnie zmieniło się czy też ogromnie zmieniła się przestrzeń narzędziowa w zakresie Reacta i w ogóle tych technologii webowych. Pamiętam jak jeszcze niedawno był to ogromny problem, żeby w ogóle setupować taki projekt. Dzięki takim narzędziom jak VIT, chociażby wszystko co zapewnia Next w swoim celi jest świetne. Chwila, moment, pięć minut i masz setupowany tak naprawdę cały projekt.
Też można go osiągnąć troszeczkę inaczej, ale nie zawsze musimy zaprzęgać najcięższe działa, żeby osiągnąć też efekt satysfakcjonujący dla klienta. Oczywiście ten klient przyjdzie za chwilę, jak się mu biznes rozwinie i powie słuchajcie, zróbcie coś więcej i wtedy na tym drugim etapie już myślę, że wtedy rzeczywiście, wtedy trzeba zobaczyć jak ten biznes się kręci, jakie są potrzeby biznesowe, Co się zmieniło? W którą stronę poszło to? I wtedy? Tak. Jak najbardziej. Wtedy jak najbardziej warto według mnie pójść w coś więcej. Ale na tym pierwszym etapie, na tym MVP, ja dostałbym przy najprostszych rozwiązaniach. Pomimo tego, że z całego serca wolałbym pisać w React'cie.
Przy takiej konfiguracji Wordpressa chociażby, czy WIXa, czy cokolwiek innego, ty już masz out of the box tak naprawdę, pewne narzędzia już dodane, więc jest to łatwiej złożyć. Więc mi się wydaje, że nasza różnica zdań w tym momencie, Wojtku, polega na tym, Że my się zgadzamy co do tego, że React jest spoko i że Developer Experience jest naprawdę na najwyższym poziomie i że jak robić, to nie robić babola, tylko od razu zrobić coś porządnie. I się zgadzamy z tym. Natomiast różnica jest chyba w tym miejscu, gdzie pojawia się ten biznes. Ja stoję na stanowisku, że klient jak do nas przyjdzie, to na bank nie będzie wiedział czego chce, a jeżeli chcemy podejść do niego uczciwie,
Ale jeśli już mówię, To jakikolwiek jest tutaj... Tak, dokładnie. Ale tu też nie mówimy o technologiach takich typu HTML. To nie jest tak, że piszesz to od nowa. Tylko korzystasz z jakichś gotowych rozwiązań. No nie. Korzystasz z gotowców po to, żeby szybko dostać... Celem jest czas. To jest waluta w tym momencie, w takim biznesie. Więc tak, ja się zgadzam, że jeżeli chcemy zrobić coś fajnego, to taki SSR będzie ciekawszym rozwiązaniem. Ale na przykład, bo trochę odbiegliśmy od tematu. Jeżeli chcemy zrobić jakąś stronę, wybieramy SSG chociażby, to SSG sprowadza się do tego, że ty piszesz w React, ale docelowo będziesz miał statyczne strony w HTML czy CSS, które będziesz hostował na serwerze.
Więc tak naprawdę może, jeżeli chciałbyś z React, nie mam doświadczenia akurat w Gatsbym, nie wiem czy masz jakieś, natomiast nie wiem jak się szybko pisze w Gatsbym, Natomiast jeżeli się pisze szybko, to może Gatsby też jest takim właśnie narzędziem, które byłoby gdzieś tam pomiędzy mną a tobą. Pomiędzy tym moim podejściem, które stara się skupić na tym, co potrzebuje klient, nie mówię, że tego nie chcesz zrobić, Że bardziej skupiasz się na tej drugiej części, tym Developer XP. To znaczy, wiesz co Mateusz, ja mam wrażenie, że my się zgadzamy, tylko trochę patrzymy na inne strony tego samego problemu. Bo ty mówisz właśnie o czasie i tym, jak szybko możemy dostarczyć temu klientowi tak naprawdę tą stronę.
No dobra, a pozostali gracze? Mamy Nexta, o którym sobie już cały czas rozmawialiśmy. Mamy Gatsby'ego, który cały czas nam się przewija, ale na rynku są też inni gacze. Właśnie tak jak wspominałeś Remix, Svelte, chociażby Quick, o którym też mówiłeś. Czy w ogóle są w stanie dostarczyć coś wartościowego? Z mojej perspektywy, jak tak przeglądałem sobie chociażby Svelte, to dla mnie to nie jest developer experience na najwyższym poziomie. Bardziej przypisałbym to może do jakiegoś... Bardziej mi przypomina to Vue niż React.
Może dlatego, że jestem bardziej przyzwyczajony do koncepcji pisania w React czy w Angularze. To jest mi po prostu o wiele łatwiej ogarnąć te dwie koncepcje niż tą koncepcję tworzenia widoków we Vue. Natomiast fakt faktem mnie na przykład osobiście nie przekonują. A co ty myślisz o nich? Czy w ogóle jest dla nich miejsce na rynku? To znaczy, Matusiu, wiesz co? Myślę, że nie mieszałbym do tego naszego worka, który sobie dzisiaj stworzyliśmy właśnie z Felte, który zdecydowanie... Ja też nie widzę na razie wartości, chociaż słyszałem o nim dużo dobrego od innych deweloperów i właśnie ten developer experience, o którym dzisiaj tak dużo mówimy, dużo deweloperów docenia właśnie ten framework.
I każda taka strona... Rozumiem, że na razie nie musisz tego robić, tak? Ale bo na razie masz wybór. Jeszcze inny wybór, tak, ale w momencie, kiedy nie będziesz miał innego wyboru, to kto, wiesz, i wszystkie, no. Pamiętasz, jak było z Reactem, jak Angular pojawił się na rynku i ludzie mieli dylemat, bo na rynku był Angular i React i długo, długo nic. Nic. A te stare frameworki i wszystkie X, JS i tak dalej wypadały powoli. Jak ludzie mieli dylemat, korporacje miały dylemat, co wybierać, to na co patrzałem? Na to, nie jaki jest próg wejścia, jaki jest developer experience, tylko jakie są przepisy związane bezpośrednio z danym frameworkiem, z danym narzędziem.
Na przykład w Reaktcie w tamtym czasie był ten case dosyć słynny, gdzie był taki dość wątpliwie rozumiany zapis, który mówił według niektórych, że wszystkie narzędzia, wszystkie rzeczy napisane z wykorzystaniem Reacta 1.01 1 SSR, SSG, SPA czy MPA?.
Kopaliby pod sobą dołek. Zrobiliby dokładnie to samo, co zrobił Facebook ileś lat temu. Facebook z tego feralnego zapisu się dość szybko wycofał. Zmienił licencję. I myślę, że każdy podmiot w tym momencie zrobiłby dokładnie to samo. Rozumiem. Zdecydowanie, wiesz, mam nadzieję, że moje tutaj stwierdzenie, że wiesz, Next chce tutaj zmonopolizować rynek i koniec końców, żeby schostować jakąkolwiek aplikację, będziesz musiał zapłacić im, jest jakimś daleko posuniętym Armagedon, powiedzmy. Ale mówię tutaj o takiej rzeczy, że tak jak wspominałeś w wypadku Angulara i Reacta i o tych zapisach, które były w Reactie, miałeś wybór, bo miałeś Angulara.
Nie podobał ci się React, więc były tam jakieś zapisy, które ci nie odpowiadały, czy twojej firmie, więc wybierałaś Angulara, bo była to alternatywa. A w momencie, kiedy taka firma jak Vercel dominuje rynek i dominuje wszystkie technologie, które tam są, to wtedy pojawia się problem, bo już nie masz wyboru, już nie masz Angulara i Reacta, masz tylko Vercel i musisz im zapłacić, albo nie hostować aplikacji, czy też nie korzystać z ich usług. Pytanie, czy Vercel jest na tyle silny, żeby kupić Google, czy Meta tak naprawdę? Tak, ale ja mówię, Każdy największy, tak samo zobacz, kto kupił Salesforce Remixa, więc tak naprawdę ci najwięksi na rynku mają swoje frameworki.
Tak naprawdę zawsze tak było. Jeżeli my się kłócimy o to co wybrać, to tak naprawdę kłócimy się pomiędzy czy wybrać jakieś rozwiązania indywidualne typu Vue, Widziałeś w ogóle ten dokument, on jest stary już dosyć, na kanale na YouTube, na temat Vue. Widziałem. Bardzo fajny w ogóle, więc jeżeli ktoś ze słuchaczy naszych nie widział i ma ochotę zobaczyć sobie, jak powstaje framework na jeden z największych na świecie, pisany przez jedną osobę, to warto ten dokument zobaczyć. Jakość wykonania jest naprawdę spoko. Natomiast wracając do tematu, ...albo narzędzia jak React od Facebooka, od Mety, Angular od Googla, Vue od chłopaka, który samodzielnie go napisał i za nim stoi w tym momencie chyba środowisko PHP-owe się tam mocno uaktywniło i tam Laravel, z tego co pamiętam.
Tak naprawdę. Więc mi się wydaje, że jakbyśmy spojrzeli na to, co ludzie wybierają, co ludzie wybierają pod kątem jakiejś sympatii bardziej, emocji. A czy my wybierzemy remixa, reacta, nexta? No nexta, to jakbyśmy wybrali reacta. Jeżeli wybierzemy reacta, Będziemy potrzebowali SSR, to wybierzemy Nexta. Jeżeli SSG, to weźmiemy Gatsby'ego, bo też jest React. Tak mi się wydaje. Jeżeli nie będziemy sympatyzować z polityką Facebooka, to w życiu nie wybierzemy. Nasza firma w życiu nie wybierze Reacta. Biznesowo nie zgodzą się na to. Pójdziemy w stronę Google. Największe korporacje wybierają Google'a,
I Angulara wydaje mi się z dwóch powodów. Z jednej strony, to jest zatem olbrzymia firma, gigant, że tak powiem, technologiczny, który bardzo dużo inwestuje w ten produkt i na dzień dzisiejszy można powiedzieć, że uczynił go dość stabilnym. Początki były słabe, ale można powiedzieć, że na dzień dzisiejszy Angular jest stabilnym, dojrzałym produktem, który wydawany jest, kolejne wersje są wydawane w regularnych cyklach półrocznych, Naprawdę ten produkt już się nie zmienia aż tak. To nie jest to, co było pomiędzy RC5 a RC6, że wywalamy wszystko i wpiszemy od początku. Na ten moment jest to stabilne rozwiązanie. I tak samo jest chyba, jeśli chodzi o Reacta, bo w tym momencie wybieramy Reacta, ale czy my wybierzemy Nexta, Gatsby'ego czy czystego Reacta, to tak jakbyśmy wybierali SPA, SSG czy SSR.
Tak, że nie wiem czy w sumie jest coś takiego C2C, nieważne. W każdym razie B2C jest mega ważne, bo to koniec końców może naprawdę ogromnie wpływać na to jaką konwersję użytkowników uzyskujemy i ile pieniędzy zarabiamy, koniec końców. No tak, jak nie wiadomo o co chodzi to chodzi o pieniądze. Dokładnie tak. Wojtek. To jeszcze jest kwestia, jeszcze pozostaje nam kwestia jedna, nie rozstrzygnięta. Rozmawialiśmy sobie o SSR, rozmawialiśmy sobie o SSG, o SPA, o MPA, a gdzie tu umieścić najnowszy pomysł Reacta? Czyli jak pewnie sobie zdajesz sprawę, co mam na myśli, React Server Components.
Powinny być po to, aby wykonać te najcięższe operacje, żeby zdjąć je bezpośrednio z użytkownika, typu jakieś przekształcenia skomplikowane, markdowna na HTML, A z drugiej strony nadal to jest tylko koncepcja, o której React mówi, a którego nie udało się jeszcze wdrożyć. Chyba tylko Next próbował, ale z tego co zrozumiałem to nadal to nie działa do końca. I tak naprawdę nie wiem, co o tym myśleć. Myślę Mateuszu, że React, co jest tego w sumie dużym plusem w porównaniu do takich frameworków jak Angular, trochę mu zajmuje wprowadzanie zmian, ale te zmiany są bardzo przemyślane i zazwyczaj są też relatywnie małe.
I myślę, że właśnie tego typu zmiana Czyli SSC czy też dodatek do już istniejącej biblioteki. Jest fajny, bo daje Ci po prostu wybór. Myślę, że inżynierowie Reacta do tej pory moim zdaniem zrobili świetną robotę jeśli chodzi o API i porusza się ono w bardzo dobrą stronę. I wygląda na to, że właśnie te SSC są niejako trochę odpowiedzią czy próbą adaptacji do potrzeb rynku. Czyli właśnie do próby współgrania z tymi technologiami, o których dzisiaj rozmawiamy i też dania możliwości ich wykorzystania deweloperom w bardziej natywnych środowiskach i właśnie może nawet w takich aplikacjach jak te, o których rozmawialiśmy dzisiaj, czyli aplikacjach B2B,
Rozwiązania bezpośrednio optymalizacyjne pod Reacta. Tak naprawdę nie jest to żaden game changer w stylu wprowadzenia nowego podejścia, wprowadzenia nowego sposobu tworzenia aplikacji. Tak jak sami mówią, nie jest to SSR. Myślę, że to jest po prostu czy też będzie po prostu kolejna jakaś tam opcja, kolejne narzędzie w twoim zestawie narzędzi, z którego będziesz mógł skorzystać. No i wygląda to jak po prostu fajny dodatek, który będzie można wykorzystać w jakichś tam specyficznych miejscach, ale który wiąże ze sobą czy też niesie ze sobą dużo ciekawych właśnie pomysłów i sposobów na optymalizację kodu.
Nie wiem, czy miałeś przyjemność z Pryzmikiem pracować? Prismic działa w ten sposób, że tworzysz sobie, pomijam szatę graficzną, która jest, że tak powiem, okropna i ten user experience po stronie Prismica jest taki sobie. Natomiast to, co on daje, on daje tak naprawdę użytkownikowi biznesowemu, temu, który będzie de facto content managerem. Daje mu możliwość za pomocą tego uwielbianego przez wszystkich użytkowników drag and dropa Ustawianie kolejności wyświetlania komponentów w aplikacji reactowej. Więc my tak naprawdę generujemy sobie jakieś komponenty, przygotowujemy je do developmentu, znaczy przygotowujemy je w procesie developmentu, dostarczamy je do aplikacji i content manager sam podejmuje decyzję, jak ta strona będzie zbudowana, z jakich komponentów, z jakiej kolejności będą one wyświetlone i z jakimi danymi.
Więc to ma też sens, to też jest rozwinięcie, trochę odpowiedź na to, co robi WordPress, że z jednej strony my tworzymy aplikację, czy to SSR, czy to SPA, czy to SSG, podpinamy w to jakiś tam system CMS-owy i wychodzimy tak naprawdę, możemy czerpać oczywiście z korzyści, czyli z tych wszystkich zalec, które dadzą nam poszczególne podejścia w zależności od wybranej drogi, ale możemy czerpać też Zyski z zalet tego, co dawał nam wcześniej WordPress ze swoimi znienawidzonymi przeze mnie pluginami typu Elementor. Więc tak naprawdę wydaje mi się, że to jest, gdzieś to się dzieje, że ten WordPress... Pojawiają się narzędzia nawet z tej części, którą my sobie pod kątem Developer Experience, że tak powiem, wybieramy i pod kątem rzeczywiście wydajności, no bo te aplikacje reactowe
Pokazano wszystkie 22 dopasowania. Transkrypcja generowana automatycznie i niesprawdzana ręcznie — może zawierać błędy.
Mateusz przedstawia gościa, Wojtka, JS-owego ogarniacza.
Mateusz wprowadza w temat Server Side Rendering (SSR).
Wojtek i Mateusz dyskutują o SSR, jego przyszłości i zastosowaniach.
Wojtek i Mateusz poruszają temat porównania SSR, SPA i SSG.
Rozmowa o zastosowaniach technologii w zależności od projektu.
Wojtek i Mateusz dyskutują o wyborze technologii dla projektu MVP.
Rozmowa o porównaniu Nexta i Gatsby'ego.
Wojtek i Mateusz poruszają temat innych technologii takich jak Svelte i Remix.
Rozmowa o monopolie technologicznym i wpływach na wybor technologii.
Rozmowa o innych technologiach takich jak Vue i Angular.
Rozmowa skupiła się na porównaniu technologii front-endowych, takich jak SSR, SSG, SPA i MPA, pod kątem wydajności, SEO i developer experience.
Diskussja na temat przyszłości WordPressa jako platformy do tworzenia stron internetowych, porównanie z innymi technologiami i propozycje alternatyw.
Rozdziały i streszczenia generowane automatycznie. Pełna transkrypcja nie jest publikowana — wyszukaj frazę, aby zobaczyć dopasowane fragmenty.
Kliknij, aby znaleźć fragmenty, w których pada.
1.01 SSR, SSG, SPA czy MPA?
W pierwszym odcinku podcastu PiwnicaIT rozmawiamy o różnych podejściach do tworzenia aplikacji webowych. Poruszamy tematy związane z SPA, SSG, SSR czy MPA w ujęciu webdevelopmentu. Omawiamy nasze doświadczenia w pracy z różnymi bibliotekami i frameworkami dostępnymi na rynku.
Materiały dodatkowe:
Qwik Svelte How to pick Web Framework in 2023 NextJS Gatsby React 10 Rendering Patterns for Web AppsRozmawiają:
Wojciech Skorupa [linkedin] Mateusz Jabłoński [www] [linkedin]