Statikus, mégis dinamikus

Egy statikus generálású weboldal esettanulmánya

Bármelyik népszerű CMS platformot is használod a projektjeidben, a weboldalak megjelenítésének receptje általában ugyanaz. Egy dinamikus portálmotor előre felprogramozott sablonok felhasználásával jeleníti meg a szerkesztők adatbázisba mentett webtartalmait. Minden kattintás beindítja a gépezetet: a keretrendszer kapcsolódik az adatbázishoz, lekéri a szükséges tartalmakat, értelmezi a kapcsolódó sablonokat, majd mindezekből megszerkeszti a megjeleníthető lapot. A minden egyes kérés esetén elinduló programok miatt könnyen előállhatnak teljesítmény- és hatékonysági-problémák. Ugyanezek a programok állandó biztonsági kockázatot is jelentenek egy publikus tárterületen. A negatív hatások annál erősebbek, minél népszerűbb és minél komplexebb az oldal, amit megvalósítanak.

A statikus generálású weboldalak teljesen más megközelítést használnak. A privát tárterületen futó portálmotor egyszer, a változtatások elfogadásakor készíti el a web lapokat. A statikusan létrejött állományokkal meggyőző letöltési sebességnövekedést érhetünk el, a biztonsági kockázatot pedig minimálisra csökkenthetjük. De hogyan tudunk ezzel a technikával modern, trendi és dinamikus weboldalakat készíteni úgy, hogy közben a kényelmes CMS funkciókról se kelljen lemondanunk? A 2016 júniusában átadott új RSM Hungary honlapokat teljes mértékben a statikus oldalgenerálás szemléletében készítettük el.

Előzmény

Külön fejezeteket írhatnánk arról a történetről, amelyben a kezdetben 8 fős könyvelőiroda egy több, mint 100 főt foglalkoztató, nemzetközi hálózati kapcsolattal rendelkező, meghatározó szervezetté nőtte ki magát. Maradjunk azonban továbbra is a történet technológiai oldalán és emeljük ki azt, hogy eközben az online jelenlét komplexitása és az azzal járó feladatok is hasonlóan robbanásszerű fejlődésen mentek keresztül.

Online kalkulátorokkal, sikeres Wordpress alapú szakmai bloggal, több száz szakmai cikkel bővítették a kezdetben még jóval egyszerűbb felépítésű céges honlapot. A kezdetben statikus oldalakat később moderált hozzászólások lehetőségével, szabad szavas keresővel, csatornázott feliratkozási lehetőségekkel és online ajánlatkérő felülettel tették dinamikussá.

A technológia

A statikus oldalgenerálást a dotindot° SSG, egyedi fejlesztésű, felhő alapon működtetett rendszerrel valósítjuk meg. Ennek fejlődése és fejlesztése több évre nyúlik vissza, de egy dolog a kezdetektől fogva nem változott benne: a szerkesztők számára teljes funkcionalitású CMS rendszert biztosít, miközben a látogatók a publikus tárterületen csak statikus HTML állományokat látnak, azokat hermetikusan leválasztva a privát elérésű portál motorról. Az egyedi fejlesztés egyik mozgatórugója az volt, hogy nem ismerünk olyan létező alternatívát a piacon, amely ebben az architektúrában az összes elvárt funkcionalitást megvalósítaná. A másik persze a szakmai kihívás.

Eredmények

A projektben az jelentette a legnagyobb kihívást, hogy egy magas komplexitású funkciólista mellett is fenn tudjuk tartani a statikus generálás architektúráját. Tekintettel arra, hogy a projekt technológiai hátterét a saját keretrendszerünk szolgáltatta, a szükséges fejlesztéseknek csak a rendelkezésre álló idő szabott határt. A statikus generálás technológiájából származó legismertebb hátulütőkre viszonylag hamar megoldást találtunk:

  • I18N támogatás.
  • WYSIWYG szerkesztési lehetőség.
  • Fejlesztői közreműködés nélküli build és publikálás.
  • Munkafolyamat-támogatás (tartalom jóváhagyási jogkör).

A dinamikus funkciók megoldása komolyabb feladat volt:

  • Időzített tartalommegjelenítés.
  • Szabad szavas kereső.
  • Hírlevél-feliratkozás több csatornával.
  • A szerkesztők által kezelt ajánlatkérés űrlap.
  • Tartalomtól függő, dinamikus ajánló doboz további tartalmakkal.
  • Dinamikus és folyamatosan változó kalkulátorok.
  • Témakör, cikk, szerző, szakértő, szolgáltatás és termék oldalak hálózatából felépülő komplex tartalmi struktúra.
  • Egy több mint 1000 posztot tartalmazó, egyedi szerkezetű WP blog kiváltása, a főbb funkciók átörökítésével.
  • Routing szabályok alkalmazása.
  • A folyamatosan változó moduláris ökoszisztéma rendszeres mérésének lehetősége.
  • Időszakosan kampány jelleggel megjelenő oldal elemek (hírlevélben, főoldalon, kapcsolódó cikk és szolgáltatás aloldalon).
  • Jó minőségű képek felület és felbontás függő kiszolgálása.

A teljes build futási idejének leszorításához egyszerre alkalmaztunk állomány- és memória cache megoldásokat is.

A projekt néhány érdekes adata:

  • Static site generator platform: dotindot° SSG
  • Résztvevők: 1 UX designer, 1 UI designer, 3 fejlesztő
  • Koncepcióalkotás: 4 hét
  • Fejlesztés: 10 hét
  • Nyelvi verziók: 3 nyelv
  • Statikus HTML5 oldalak: 2905 db
  • Képek: 404 kép
  • TinyPNG automatizált képek: 1780 kép
  • Sablonok szervezése: Atomic Design
  • Sablonok forrásállományai: Jade állományok
  • Sablonállományok: 111 db
  • Teljes build ideje (oldalak és képek): 5+ perc
  • Állományok publikálásának protokollja: FTP
  • Publikus tárterület platform: Apache2 (html)
  • Dinamikus funkciók megvalósítása: 
    MailChimp API, Disqus API, Google Analytics API, Custom Search API
  • Google PageSpeed Insights mutatók: 99 / 70 / 93