Statikus, mégis dinamikus

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

Kóczé Péter
Aug 26, 2016 · 3 min read
Image for post
Image for post

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.

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:

  • 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 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

dotindot

We are dotindot°, a digital studio from the heart of…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store