Rogi Rogers

Ako dosiahnuť webovú modernosť bez zbytočného balastu

Written by

Rogi

in

Nedávno som tu kritizoval nezmyselné riešenia moderného webu. Šomrať vie každý. Poďme si teda povedať aj riešenia a porovnajme to z „fantastickými“ riešeniami moderných vývojárov.

Pred desiatimi rokmi sa z webu stalo laboratórium pre vývojárov, nie médium pre ľudí. Z obyčajného HTML a CSS sme sa dostali do sveta, kde treba nainštalovať Node.js, NPM, Webpack, Babel, Vite, ESLint, TypeScript a pol tucta pluginov — len aby si mohol vykresliť „Ahoj svet“.

Tento svet sa volá SPA – Single Page Application.

Znie to krásne: všetko sa načíta raz, a potom to pôsobí ako „aplikácia“.

V skutočnosti?

Jedna obrovská dávka JavaScriptu, renderovanie cez prehliadač, prerastené toolchainy a masívne spotrebovanie výkonu aj času vývojára.

SPA: pohodlný sen, ťažká realita

Ako funguje SPA

React, Vue, Angular – všetky fungujú na rovnakom princípe:

  1. Server ti pošle len jeden súbor: prázdne <div id="app"> a veľký .js bundle.
  2. Všetko ostatné (HTML, routing, API volania) beží v prehliadači.
  3. Server už neposiela HTML, iba JSON.

Výsledok?

  • Prvé načítanie trvá dlho (veľké JS súbory).
  • Pomalý a zalagovaný interface aj na silných počítačoch
  • Každý pohyb v UI znamená ďalšiu dávku JS interpretácie.
  • SEO musí riešiť SSR buildy (ďalšia vrstva komplexity).
  • Vývojár stráca dni nastavovaním prostredia namiesto tvorby obsahu.
  • Komplikované debugovanie

Problém: frameworky zožrali web

Ak chceš v Reacte zobraziť obyčajnú tabuľku dát:

  • musíš spustiť npm install,
  • vytvoriť komponenty,
  • spraviť hooky,
  • napísať fetch,
  • riešiť stav,
  • napísať JSX,
  • buildnúť,
  • nasadiť Node server.

A pritom PHP alebo Python server by to zvládol jedným <table> s renderom cez server.

Zrazu web s pár formulármi a zoznamom položiek beží na rovnakom toolchaine ako Tesla autopilot.

Riešenie: návrat k rozumu – HTMX, Alpine, Turbo, jQuery

Našťastie, existuje alternatíva.
Nie retro, ale evolúcia klasického webu.
Taká, ktorá spája silu serverového renderovania s pohodlím moderného UX.

HTMX – AJAX bez JavaScriptu

HTMX ti umožní písať interaktívne aplikácie bez jediného riadku JS.

Používaš len HTML atribúty:

<script src="https://unpkg.com/htmx.org"></script>

<div id="list">
  <!-- tu sa načítavajú dáta -->
</div>

<button
  hx-get="/posts?page=2"
  hx-target="#list"
  hx-swap="beforeend">
  Načítať viac
</button>

Server vráti HTML fragment — nie JSON — a HTMX ho rovno vloží do DOM.
Žiadny build, žiadne komponenty, žiadny React.
Len čisté HTML, ktoré funguje aj bez JS.

Alpine.js – logika ako Tailwind pre JS

Potrebujete modal, prepínač, alebo jednoduchý stav?
Alpine to rieši elegantne:

<script src="https://unpkg.com/alpinejs" defer></script>

<div x-data="{ open:false }">
  <button @click="open = true">Otvoriť</button>
  <div x-show="open" @click.away="open = false">
    <p>Obsah modalu</p>
  </div>
</div>

Žiadne state management knižnice, žiadne bundlery.
Len pár atribútov v HTML.
Rýchlejšie ako React, prehľadnejšie ako Vue, bez konfigurácie.

Turbo – navigácia bez reloadu

Turbo (z Hotwire stacku) robí to, čo by React router nikdy nemal robiť zle:

  • pri prechode medzi stránkami nepreloaduje celú stránku,
  • zachová scroll, históriu aj stav.

Stačí jeden script:

<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo"></script>

A tvoj web zrazu pôsobí ako SPA — bez SPA.

A ak ti to nestačí: jQuery stále žije

Áno, jQuery.
Nie je módne, ale je stabilné, spoľahlivé a malé.
Pre pár DOM manipulácií stále víťaz.
Použi tam, kde nepotrebuješ framework, len jednoducho „urob klik a zmeň text“.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#toggle').on('click', () => $('#box').toggle());
</script>

Porovnanie – lebo čísla nepustia

FunkciaReact SPAHTMX + Alpine + Turbo
Build systémÁno (Node, Webpack, Babel, Vite)Nie
Veľkosť JS bundle500 KB – 2 MB50 – 100 KB
Prvé načítanie1.5 – 4 s< 500 ms
SEONáročné (hydration, SSR)Prirodzené
Vývoj2–3 dni setup10 minút
HostingNode.js / VercelPHP / Nginx / Apache / CDN
Server loadVäčšina logiky v JSServer render (ľahší JS)
Cena infraštruktúryvysoká (server + build)nízka (klasický hosting)

Príklad v reálnom svete

React verzia „Načítať viac“

function Posts() {
  const [page, setPage] = useState(1);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch(`/api/posts?page=${page}`)
      .then(res => res.json())
      .then(data => setPosts([...posts, ...data]));
  }, [page]);

  return (
    <div>
      {posts.map(p => <div key={p.id}>{p.title}</div>)}
      <button onClick={() => setPage(page + 1)}>Načítať viac</button>
    </div>
  );
}

+ build + bundler + deploy + hydration.

Kde v tom vidíte sľúbené DX?! Pozrime sa na podobné riešenie v HTMX.

HTMX verzia toho istého

<div id="posts"></div>
<button
  hx-get="/posts?page=2"
  hx-target="#posts"
  hx-swap="beforeend">
  Načítať viac
</button>

Hotovo. Žiadne buildy, žiadne knižnice, žiadne komplikácie.
Server pošle HTML partial a koniec.

Záver

Web nepotrebuje JS armádu!

React, Vue, Angular sú fajn nápad. Interné aplikácie, dashboardy a editory – možno.

Pre bežné weby, portály, e-shopy, blogy, vzdelávacie platformy – sú to prechytralé kanóny na muchy.

HTMX, Alpine a Turbo ti dovolia tvoriť rýchly, udržateľný web:

  • žiadne buildy,
  • jednoduchý deploy,
  • menší traffic,
  • nižšie náklady,
  • rýchlejší vývoj.

A ak potrebuješ „interaktivitu“, máš ju – bez rámcových reťazí.

Web sa vrátil domov.

Nie je to žiadna aplikácia, je to web. Jednoduchý, priamočiary. Žiadna predplatená služba, ktorá kradne užívateľom údaje.

S HTMX, Alpine a Turbo je to možné. Netreba si komplikovať život podľa módy a trendov v Silicon Valley.

More posts