Od statických HTML k WordPressu cez vlastný CMS

---

Predstavíme vám, ako sa tvorili web stránky na prelome milénia, keď sme s tým začali. Ako vidíte, nadpis je vo WordArt-e a je to zámerne. Toto sa reálne používalo v tom čase v textových dokumentoch a prezentáciách a bohužiaľ, aj na webe. Microsoft to predstavil v roku 1991 a vo svojich nástrojoch to má údajne dodnes. Dnes už je to skôr rarita a niektorí to možno nepoznáte, ale na prelome milénia bol toho plný internet (aj keď ten bol podstatne menší ako dnes).
Podnadpis je vo fonte Comic Sans. Ten bol pre danú dobu tiež príznačný. Tento font ste mohli vidieť často, aj na úplne nevhodných miestach.

Technické predpoklady

• dostupných cca 10 fontov, všetko Windows
• rozlíšenie obrazovky 1024×768 a vyššie
• prechod z CRT na LCD
• pripojenie cez ADSL 256 kbit/s, neskôr viac
• prehliadač Internet Explorer 6
• žiadne mobilné prehliadače

V roku 2000 bolo pre webstránky bezpečne použiteľných cca 10 fontov. Nemohli ste použiť vlastný font, museli ste sa spoliehať na to, že užívateľ má ten font vo svojom počítači. V praxi to teda boli fonty, ktoré mal predinštalované Windows. MacOS mal trochu iné fonty, ale u nás vtedy predstavoval len zanedbateľnú časť, bol drahý a tak nedostupný že o ňom ľudia síce počuli, ale málokto ho videl.

Postupne sa začali objavovať LCD monitory, predávali sa hlavne 17″ s rozlíšením 1280×1024. Objavovali sa prvé „lacné“ notebooky s veľkosťou displeja 15″ alebo 15,4″ (teda jedny z prvých „širokouhlých“) ale poväčšine sa ešte stále stránky robili tak, aby sa zmestili do šírky 800 pixelov, pretože ešte stále veľa ľudí používalo rozlíšenie 800×600!

Pripojenie na internet bolo u nás hlavne cez ADSL, najprv 256 kbit/s, neskôr 512. Stránky teda museli byť optimalizované, nemohli sa prenášať veľké obrázky.

Väčšinový prehliadač bol bohužiaľ Internet Explorer 6. Kto si to pamätá, tak vie aké to bolo náročné. Síce na začiatku výrazne pomohol rozvoju internetu, vznikol v 2001, ale prežil príliš dlho. Síce sme mali IE7 od roku 2006, majoritný bol stále IE6. Posledná verzia vyšla v roku 2008 a žil ešte dlho potom. Ani tie ďalšie verzie IE neboli žiadna sláva. Napríklad border-radius, CSS vlastnosť, ktorá umožňuje robiť oblé okraje, tak to bolo v Safari od roku 2008 a vo Firefoxe dokonca od roku 2006! Kvôli IE sme ale museli robiť rôzne hacky až do roku 2011. Takže sme namiesto pekných okrajov buď prácne vkladali do rohov obrázky, nejaké GIF alebo sme mali špeciálne zobrazenie pre IE.

Prvé komerčné stránky   

Prvé CMS

• Postavené na PHP
• kategórie, textový obsah, galéria, produkty
• novinky a newsletter

Niekedy v 2007 sme mali už komerčne nasadené prvé projekty na vlastnom CMS. Prvé verzie CMS vznikli skôr ešte počas štúdia. V tom čase prakticky neexistovala rozumná voľne dostupná alternatíva. WordPress už síce 4 roky existoval, ale v tom čase bol zameraný predovšetkým na blogy. Neostávalo nič iné ako si spraviť niečo vlastné.

Štruktúra bola jednoduchá. Kostru CMS tvorili kategórie, ktoré boli hierarchicky usporiadané do stromu čo sa vlastne 1:1 premietalo do menu. Každá kategória mohla mať textovú časť a galériu. Neskôr sme k tomu pridali produkty. A samozrejme čo nesmelo chýbať, bol modul Novinky. Mal to byť spôsob, ako návštevníkom dať vedieť, že firma má niečo nové v ponuke. Namiesto toho, tam väčšina zákazníkov mala novinku: „spustili sme stránku“ a to bola prvá aj posledná novinka.

Newslettre tam boli, lebo sme to niekde videli a prišlo nám to jednoduché. V praxi sa to málo používalo. Posielať maily na tých 20-30 emailov čo sa tam zaregistrovali, sa zákazníkom moc nechcelo, alebo nevedeli moc ako vytvoriť taký email. S emailami to bolo v tej dobe trocha inak. Niektorí ich čítali raz za týždeň.

Nová verzia

• PHP framework Symfony 1
• databáza PostgreSQL
• MVC architektúra
• vydržal dodnes

Niekedy v roku 2008 sme vytvorili novú verziu CMS. Už bolo potrebné použiť nejaký framework, aby to celé bolo bezpečnejšie a jednoduchšie. Vybrali sme Symfony, ktorý podporoval v tom čase modernú MVC architektúru a vybrali sme databázu Postresql. Jednak to bola (a stále je) oveľa vyspelešia databáza, ale hlavne mala referenčnú integritu, s čím mala MySQL v tom čase veľký problém. Akurát kvôli Postgresql sme mali veľmi obmedzené možnosti hostingu, takže sme si ho nakoniec museli spraviť sami.

Pri tejto verzii už sme dosť vedeli, čo chceme ako spraviť, ale hlavne sme vedeli, ako veci nechceme spraviť. Takže, sme urobili len málo chýb v návrhu a aj vďaka tomu to vlastne vydržalo dodnes. Máme funkčné stránky, ktoré ešte bežia na tomto starom CMS a reálne predávajú produkty. Symfony 1 (neskôr 1.2) už dávno nie je podporované, takže sme to museli priebežne upravovať a hlavne sme museli urobiť úpravy samotného Symfony, aby to vôbec bežalo s novšími verziami PHP. Aktuálne nám to beží na PHP 7.4 a tam sme to už stopli. Ono to takto dlho vydržalo aj kvôli tomu, že zopár klientov opakovane odmietlo prejsť na nový systém. Z našej strany, na to už nerobíme žiadnu podporu. Podobnosť s umieraním IE6 nie je náhodná.

Rok 2015 – NWS 3

• PHP framework Silex
• databáza Sqlite3
• NotORM a PDO
• veeeľa JS
• v prevádzke dodnes

Keďže Symfony 1.2 a vlastne aj neskoršie verzie už prestali byť podporované, mali sme dilemu. Na vtedy aktuálnu verziu sme nechceli prechádzať, pretože spôsob akým sa vtedy robili veci nám nevyhovoval. Rovnako ani výkon nebol na tom dobre, v tom čase mal Symfony veľký overhead. Hlavne, sme neboli vôbec spokojný s databázovou vrstvou. Namiesto toho, aby sme mohli písať odladené SQL dotazy, sme ich museli prepisovať do DQL a to sa potom prekladalo do SQL. Množstvo skvelých vecí tam, ale nefungovalo, nedali sa robiť RIGHT JOIN a podobne (ak tak veľmi komplikovane). Takže sme si povedali, že použijeme niečo lightweight. Vybrali sme Silex, čo bol lightweight framework od tvorcu Symfony, takže to malo veľa vecí podobných a databázovú vrstvu sme vyriešili cez NotORM a keď sme potrebovali, tak cez čisté SQL a PDO.

Vďaka tomu sme mohli posunúť veci bližšie k databáze, takže sme mohli používať triggre, vstavené funkcie a pohľady a podobne.
Nová verzia bola oveľa výkonejšia a rýchlejšia ako predošlá. Takže sme sa dokázali dostať s odpoveďou bežne pod 500ms (bez cache na strane web servera).

Výhody vlastného CMS

• všetko máte pod kontrolou
• výkon
• pasívna bezpečnosť
• licencovanie

Nevýhody vlastného CMS

• všetko máte pod kontrolou
• aktívna bezpečnosť
• vendor lock-in
• údržba

Problémy s vlastným CMS

• Systém musíme neustále udržiavať.
• Neustály refactoring spôsobuje nové problémy.
• Silex už je depracated.
• UI knižnice zastarali.
• Limity databázy pri eshopoch.

Hľadanie alternatívy

Požiadavky

• Potrebujeme CMS pre prezentačné stránky aj eshopy.
• Ideálne jeden systém, ktorý zvládne oboje.
• Chceme, aby to bolo PHP.
• Chceme, aby sme to vedeli nasadiť takmer kdekoľvek.
• Chceme zabehnutý a veľký ekosystém.
• CMS nás nesmie obmedzovať na frontende.

Možnosti

WordPress je zo všetkých preskúmavaných najväčší a najviac používaný. Rovnako aj na SK a CZ scéne je veľa lokálnych hráčov, množstvo pluginov a podpora lokálnych služieb.

Drupal je koncepčne skvelý, ale pomerne veľký a na malé prezentačné stránky nemotorný.

Headless CMS vieme použiť len na prezentačné stránky. Aj WordPress vieme použiť ako headless. Väčšina headless CMS sú JS veci, takže je problém s nasadením.

Z eshopových sme zvažovali aj SaaS riešenia ako Shopify alebo Shoptet. Spôsob, ako sa tam robí custom design, je problematický. Na Shopify sme mali nasadený chvíľu jeden eshop a bola to hrôza. Admin UI úplne iný ako ostatné, predražené ceny, čo stojí na Woocommerce plugin na celý rok, to stojí na Shopify za mesiac. Berú si percentá z obratu. Nevieme vôbec customizovať checkout.

Magento je veľmi dobré navrhnuté, ale je to moloch. Je to vhodný systém na veľké eshopy, ale nie na malé a stredné.

Joomla – pozreli sme si zdrojový kód a zhodnotili, sme jednoznačné nie…

Prestashop sa nám zdal vhodný kompromis medzi kvalitou kódu a funkčnosťou. Skúsili sme to nasadiť na asi 3 náročnejšie eshopy. Funguje to, ale nie je to dobré. Spôsob, akým sa aktualizujú moduly a samotný Prestashop je zlý. Reálne sa prepisujú súbory kade-tade, takže vám to kľudne pri aktualizácii prepíše vaše zmeny. Aktualizácie medzi major verziami sú veľký problém, hlavne s kompatibilitou.

Woocommerce sme dôkladne otestovali a vybrali sme ten.

Prečo WordPress a Woocommerce

• Dokážeme nasadzovať projekty rovnako rýchlo ako na vlastný CMS, niekedy dokonca rýchlejšie.
• Projekt môže prevziať ktokoľvek iný.
• Väčší trh.
• Vieme zasiahnúť takmer kdekoľvek v rámci systému.
• AI nástroje ich dobre poznajú.

Pre nás je dôležitá metrika, ako rýchlo vieme nasadiť projekt. To znamená čas od schválenia grafického návrhu po spustenie stránky, alebo aspoň prípravu na kontrolu klientom. V tejto fáze je dôležité, aby vám CMS nezavadzal a nehádzal rôzne polená pod nohy, ale naopak pomáhal. WordPress je v tomto skvelí, dokázali sme urobiť veľmi komplikované frontendy, ktoré by nám trvali na našom CMS dlhšie. Z veľkej časti nám pomáha block editor – Gutenberg. Ak sa vyhnete problémovým pluginom, vie to byť rýchle.

Ak sa čokoľvek stane, klient má funkčný projekt, ktorý vie prevziať ktokoľvek. Firiem a jednotlivcov, ktorí sa zaoberajú správou WordPress a Woocommerce je veľa. Koniec koncov, aj my sme preberali správu po iných.

Pri WordPresse vieme vďaka tomu, ako dávno vymysleli svoje hooky (filtre a akcie), zasiahnuť takmer kdekoľvek do systému. To je pre nás dôležité, pretože nie sme limitovaný len nejakým vyhradeným priestorom ako pri Shopify.

Pri práci používame veľa AI nástroje. Keďže WordPress a Woocommere sú veľmi rozšírené, tieto nástroje dávajú oveľa lepšie výsledky.

Spať na blog