Tradičný prístup k tvorbe webov pri použití zabehaných CMS platforiem (Wordpress, Joomla, Drupal) je o tom, že všetok obsah, konfigurácia alebo prístupy sú uložené v databáze. Pri návšteve webu sa obsah vytiahne z databázy a CMSko vygeneruje HTML kód podľa definovanej šablóny. Poslednou dobou sa avšak hovorí o JAMstacku, generátoroch statických stránok alebo headless CMS. V tomto príspevku rozoberiem to, čo to vlastne je a aké sú výhody.
Čo je to JAMstack?
- J - javascript
- A - APIs
- M - markup
“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup” — Mathias Biilmann (CEO & Co-founder of Netlify).
Je to prístup tvorby webstránok, kde sú webstránky uložené na serveri ako hotové HTML súbory, ktoré sa posielajú užívateľovi, javascript poskytuje možnosť interakcie a dynamickosti. V prípade potreby sa komunikuje s určitým backendom (ktoré môže byť na rovnakom serveri ale aj úplne inde) pomocou API. Pričom je úplná voľnosť použitia javascriptovej knižnice, nástroja na generovania HTML súborov a v neposlednom rade aj backendu.
Generovanie statických stránok
Na generovanie obsahu sa dajú použiť rôzne techniky a postupy. Najčastejšie sa ale spomínajú v súvislosti s týmto práve generátory. Tie fungujú na princípe vygenerovania HTML súborov pomocou definovanej šablóny naplnenej určitým obsahom.
Správa obsahu
Najjednoduchší typ obsahu sú Markdown súbory uložené podľa určitej štruktúry. Súbory môžu byť rovnako ako celá šablóna a zvyšná konfigurácia v gite. Po každom novom komite s obsahom sa spustí automatický build, ktorý vygeneruje celú stránku nanovo a vymení súbory na serveri.
Pri takomto prístupe je možné využiť Netlify CMS, ktoré poskytuje príjemné grafické rozhranie na editovanie Markdown súborov. Po akejkoľvek zmene v obsahu sa vytvorí nový commit v repozitári a následne sa môže spustiť build…
Okrem toho sú ale aj iné možnosti. Niektoré generátory podporujú GraphQL alebo REST API, čo im umožňuje spracovávať obsah z rôznych zdrojov. Napríklad pri uložení článku do Wordpressu bežiaceho v headless móde (teda bez front-endu) sa odošle serveru informácia o novom obsahu a spustí sa automatické generovanie novej verzie statickej stránky.
Alebo aj rôzne CMS vyvinuté špeciálne pre headless fungovanie ako Strapi alebo komerčné Contentful
Dlhší zoznam je na stránke headlesscms.org
Spôsoby generovania
Teraz už konečne k samotným rôznym generátorom. Tak ako to už dnes vo svete developmentu býva, na výber je veľké množstvo. Zároveň ako rastie popularita, tak sa zvyšuje aj počet nástrojov a medzi najznámejšie patria:
- HUGO Jednoduchý generátor napísaný v jazyku GO, zameraný hlavne na rýchlosť a jednoduchosť. Je to pomerne mladý softvér ale naberá rýchlo na popularite. Oproti Jekyllu, ktorý je oveľa starší, je niekoľko násobne rýchlejší. Podporuje iba generovanie z markdown súborov.
- Gatsby Generátor pre React aplikácie. Postavený je na veľkej otvorenosti, modulárnosti a schopnosti vytiahnuť dáta z rôznych zdrojov (headless CMS, Markdown, API, JSON, atď). Pripravený je na spracovanie PWA aplikácií a vysokej SEO optimalizácii.
- Jekyll Asi najznámejší a najrozšírenejší aj vďaka natívnej podpore Github pages. Postavený na ruby s množstvom dostupných pluginov a šablón.
- Nuxt Ďalšia možnosť javascriptovej technológie tentokrát pre Vue.js framework.
Samozrejme existuje veľké množstvo ďalších. Pravdepodobne pre každý populárnejší programovací jazyk niečo. Pekný zoznam je možné pozrieť na stránke staticgen.com
Výhody
- Rýchlosť webstránky - nakoľko sa posielajú hotové HTML súbory bez ďalšieho renderovania je rýchlosť neporovnateľne vyššia
- Škálovateľnosť - stránka s rovnakým serverovým výkonom ako pri bežnom CMS zvládne oveľa vyššiu prevádzku a v prípade potreby je jednoduché zväčšiť sieť CDN
- Bezpečnosť - bez dopytov na databázu a kódu bežiaceho na pozadí sa eliminuje riziko bezpečnostných dier a nutnosti ich opravovať
- Lacnejšie prevádzkové náklady - nižšie náklady na hosting
- Developer friendly - front-endový vývojári sa nemusia zaoberať backendom a naopak
Deployment
Spôsobov ako hostovať takéto weby je niekoľko. Medzi najjednoduchšie patrí platforma Netlify, ktorá má priamu podporu na niektoré generátory, Netlify CMS a niekoľko ďalších užitočných vlastností. Alebo jej komerčná alternatíva aj s vlastným CMS Forestry. Ďalšiou možnosťou sú zabudované možnosti stránok priamo v git repozitároch Github pages, Gitlab pages. Samozrejme existuje aj možnosť hostovať stránku na vlastnom hostingu. Pri zmene v repozitári sa pustí zbuildovanie stránky a následný deploy. Príklad konfigurácie buildovania z .gitlab-ci.yml.
build:
stage: build
image: jojomi/hugo
script:
- hugo version
- git submodule update --init --recursive
- hugo -d hugo
artifacts:
paths:
- hugo
only:
- master
Zhrnutie
Po rokoch od prvých webstránok, ktoré fungovali iba na HTML súboroch je zaujímavé sledovať ako sa vývoj k tomu vracia. Teraz už však tieto stránky obohatené o najnovšie možnosti ako interaktivita s javascriptom, PWA, SASS atď.
Titulný obrázok: unsplash