SAGE 9 | vývoj pro WordPress na steroidech

Publikováno 14. 9. 2018

S příchodem SAGE 9 od roots.io jsme byli zprvu skeptičtí především kvůli využití a jednoduchosti dříve používaného EasyFramu od Jakuba Kadeřávka, kterému bychom chtěli poděkovat za velkou pomoc při realizaci šablon právě na jeho základní šabloně.

Základní informace

SAGE 9 využívá kombinaci těch nejmodernějších aktuálně dostupných techologií, ať už se jedná o šablonovací systém Laravel Blade, Javascript ES6 nebo Webpack. Nedokázali jsme si moc představit, jak je možné tuto nepříliš sourodou skupinu technologií sjednotit pod takto komplexní a vyladěný systém. No ale :-). V SAGE 9 je také spousta much a problematických věcí, povíme si o nich později. Šablona má samozřejmě dokumentaci, ikdyž se jedná jen o základní  znalost celého ekosystému a některé pokročilejší věci si člověk musí buď udělat podle svého, nebo čerpat z fóra na roots.io.

První kroky

První instalaci jsme provedli, dle dokumentace na roots.io a vše proběhlo bez sebemenšího problému, tedy naprostá spokojenost. V postatě na 3 příkazy (s již nainstalovým Composerem a Yarnem) jste schopni nainstalovat theme a začít vyvíjet svou vlastní šablonu. Samozřejmě tu je nějaké to ale. Např. předregistrované sidebary a widgety, které ne vždy využijete.

Funkce a inicializace šablony

Jako první bych zmínil již předregistrované některé funkce, které za mě nejsou vždy nutné např. Widgety (+ Sidebary), které nepoužíváme především kvůli problematickým překladům a menším možnostem omezení uživatele při vkládání obsahu do Widgetů. Takže začali jsme právě tím, že jsme některé funkce ihned zakomentovali a přidali také několik vlastních převzatých z EasyFramu. Vše fungovalo bez problémů, ikdyž chvilku nám trvalo přijít na to, jak přesně funguje systém namespaců v projektu a kde se mohou přidávat nové funkce, helpery, custom post typy atd…  Samozřejmě jsme to zvládli a nenechali se odradit prvotními problémy.

Šablony a Controllery

Šablony Laravel Blade jsou v SAGE 9 naprosto bombastické, především kvůli jednoduchosti a přípravě dat v controlleru a jejich následné vykreslení v šabloně. Když to řeknu jednoduše tak mít většinu logiky v controlleru a v Blade pouze vykreslovat data je prostě super! Samozřejmě to má svá úskalí, kdy náročnost vývoje hlavně na prvopočátcích našeho přechodu na SAGE 9 byla cca o 30-50% vyšší, protože vývojář musí napsat více kódu a přemýšlet nad vývojem trošku jinak než jen v „jednoduchém“ PHP bez šablonovacího systému. Další úskalí bych viděl např. při výpisu dat v blade templatě a použití dvou controllerů zároveň. Těžší problém, ale i tak řešitelný. Pro sdílené funkce v controlleru se dají výborně použít Traity v PHP, ikdyž o nich v dokumentaci není ani zmíňka.

Javascripty

Javascripty v ES6 pro nás byli novinkou, ale ničeho jsme se nebáli a šli do toho. Popravdě takto super systém vývoje nás nadchl už na začátku, především to byla jednoduchost struktury a také elegantní řešení konflitků na vlastních stránkách. Jednoduše v SAGE 9 máte jeden globální JS soubor a pak dílčí rozdělené na konkrétní podstránky, které se pak volají pouze na nich, tedy pokud by vznikl konflikt nebo jste v nějaké stránce (blade šabloně) nechtěli volat nějakou vaší funkci tak SAGE toto vyřeší za vás. Škoda, že ve vzorové struktuře podobně jako u Traitů v PHP není ani zmíňka v dokumentaci SAGE 9, případně soubor přímo v šabloně např. k headeru. Tedy funkce využitelné na vícero stránkách, které nechcete kopírovat a zároveň nejsou globálního charakteru tak musíte přidávat na vlastní pěst. Ale nebojte :-), základní znalosti ES6 budou bohatě stačit.

Stylování (SASS)

Stylování v SAGE je zvládnuté na jedničku, webpack se o všechno postará a zároveň už při instalaci může nainstalovat některé FrontEndové frameworky jako bootstrap. Stačí v konzolové řádce napsat „yarn start“ a už jen přidáváte nové řádky kódu a webpack stránku téměř okamžitě přerenderuje bez hard refreshe. Kompilace trvá v závislosti na počtu souborů a řádků kódu pochopitelně, nikdy jsme však nezaznamenali nějaké větši rychlostní problémy, prostě SUPER!

Webpack

To kvůli čemu je sage tím, čím je je právě Webpack, který řeší od refreshe přes HTML injection až po kompresi obrázků. Jednoduše je to tak trochu kolos, fukční kolos! Dodnes pořádně nechápeme, jak mohl někdo vytvořit takový užasně nakonfigurovaný proces vývoje, protože obecně od nástupu SAGE 9 vám odpadá spousta problémů např. komprimace obrázků, jejich aktualizace a mazání cache, refresh page, eslint, atd… Samozřejmě má i své mouchy, např. nedá se věřit některým funkcím v JS, především kvůli HTML injection, která způsobuje změny v DOMu a některým JS knihovnám např jQuery to nedělá moc dobře :). Např. získávání hodnoty offset.top je při nevykompilované šabloně (yarn build) prakticky nemožné. Stejně tak, když chcete z CSS získávat nějaké hodnoty pomocí JS, prostě to nefunguje a musíte projekt vykompilovat.

Deployment

Před nástupem SAGE 9 byl deployment v některých ohledech jednodušší, např. nepotřebovali jsme řešit kompilované obrázky z Webpacku, ale měli jsme je optimalizované ručně a tudíž jsme si za ně odpovídali sami a gitovali jsme je. Takže stačil úplně jednoduchý git-ftp a problém byl vyřešen. V případě SAGE 9 jsme k tomu museli přistoupit jinak a to, že deployment jako takový probíhá v docker containeru bitbucket pipelines, kde se provede kompilace, komprimace (ZIP) a soubory se následně nahrají na FTP, kde se zavolá náš custom PHP script, který komprimovaný ZIP s kompilovanými soubory rozbalí, zazálohuje staré a rozbalí nové, pak už vše začne fungovat jak má. Složité že? No popravdě je možné, že toto řeší Bedrock také od Roots.io, ale my jsme konzervativní a nemáme ani nechceme mít vlastní dedikovaný server hosting především kvůli náročnosti na údržbu. Deployment je tedy složitější, ale řešitelný. Důležité pro nás bylo, aby fungovalo SSH (SCP) a FTP (SFTP) na serveru a šablona se mohla nasadit na vícero hostingů bez nutnosti instalace vlastních severových balíčků.

Hosting

SAGE 9 je „relativně náročný“, ale pro nás to není to nic nestandardního. Jediné co stojí za zmíňku, že nejede na PHP verzi nižší než 7.1 (Máme odzkoušeno a jede i na PHP 7.0 po úpravě funkce, která v SAGE ověřuje verzi PHP na serveru z PHP 7.1 na PHP 7.0), ale i tak používáme ještě novější a to PHP ve verzi 7.2, která je v současné chvíli nejnovější.

Informací je hodně na to, abychom byli schopni se shrnout do jednoho článku. Věříme však, že na základě dostupných informací budete schopni se rozhodnout zdali má na SAGE 9 smysl vlastní šablony pro WordPress tvořit, nebo ne. Za nás je volba jasná!