DOPLNĚNÍ: Od té doby jsem vytvořil novější verzi tohoto projektu s použitím Vue místo React. Měli byste si o ní přečíst!

Index:
Díl 2 – Nastavení
Díl 3 – Schéma

V následujících týdnech vám prostřednictvím série článků vysvětlím, jak používám Node.js a Express na backendu se serverem GraphQL připojeným k databázi MYSQL WordPressu, který používá Apollo k načítání dat a jejich směrování do komponent Reactu. Nebojte se, stále budu používat osvědčené rozhraní správce WordPressu.

Pokud to zní jako sousto, tak proto, že je. Bylo to náročné, zejména proto, že je to moje první zkušenost s jazykem GraphQL a Apollem. Věci se budou měnit. Změna je dobrá.

Tento příspěvek vám vysvětlí proč.

WordPress je gigant. Na WordPressu je postaveno 25 % všech webových stránek. Je to skvělý CMS s velkou komunitou a skvělou podporou. Správa obsahu je snadná a to je hlavním cílem každého CMS.

V ncludu denně vyvíjím weby pro WordPress. Správa webů ve WordPressu je lahůdka. Jejich vývoj už takový není. Říkám to jako vývojář Javascriptu, který si vyzkoušel, jak vypadají a působí izomorfní aplikace v Javascriptu. Javascript mě dostal na twitteru. Vývoj WordPressu ne.

Co na to říct? Nemám rád PHP. Nemám rád šablony. Nemám rád „smyčku“. Rozmazlil mě Node, Express, Webpack, React, Babel a teď i Graph QL a Apollo.

Přínosy Javascriptu

Přistupuji k tomu čistě ze strany front-endového vývoje. Node a Express jsou úžasné, ale hlavní hnací silou tohoto nastavení je pro mě možnost používat ES2015 s Reactem a CSS-moduly.

Největší výzvou při vývoji a údržbě jakéhokoli slušně velkého webu nebo aplikace je schopnost elegantně zvládat změny (přidávání nových funkcí nebo úpravy stávajících), aniž by se věci rozbily. To obvykle zahrnuje zajištění toho, aby použití nebo úprava stylů neměla žádné nezamýšlené důsledky. To je náročné vzhledem k tomu, že CSS má globální rozsah. Existují celé metodiky CSS, které byly vytvořeny, aby tuto bolest ulehčily (SMACSS, BEM atd.), ale buď zahrnují esoterické konvence pojmenování, nebo vyžadují, abyste si pamatovali milión různých názvů tříd.

V Reactu můžeme použít moduly CSS k vytvoření lokálně rozsáhlého CSS. Každá komponenta má svůj vlastní styl, který možnost skládat třídy CSS pro jiné styly nebo sadu globálních stylů. To je velmi výkonné. Ve WordPressu to také není možné.

Můžete také udělat inline styly, použít JSXStyles nebo nespočet dalších řešení – já jsem fanoušek CSS Modules, takže to budu používat.

Tento způsob také znamená, že komponenty React lze snadno vyměňovat mezi projekty. Jsou opakovaně použitelné, lze je zapojit. Protože jsou styly lokálně rozvržené na komponentu, můžete je přidávat a odebírat podle libosti, aniž byste se museli bát, že rozbijete něco jiného.

Další výhodou je možnost zpracovávat stav aplikace nebo webu mnohem elegantnějším způsobem. Pomocí Apolla (kterému se budu věnovat v jiném příspěvku) můžeme spravovat nejen data aplikace, ale i stav uživatelského rozhraní. Příliš často ve WordPressu vidím jeden velký javascriptový soubor, který zpracovává události a interakce pro celý web. Příliš často vidím v tomto dlouhém souboru testy, které zjišťují, zda má prvek třídu, která by měla spustit animaci. To vede k bolestivému ladění, protože stav aplikace není konzistentní.

Naposledy můžeme nyní provádět také unit testy. Testování je důležité! Huzzah testing!“

Nedělá už WordPress věci pro Node?“

Pokud sledujete zprávy o WordPressu, pravděpodobně jste slyšeli, že společnost Automattic, která stojí za WordPressem, vyvinula rozhraní pro správu postavené na Node. Je docela pěkné a má otevřený zdrojový kód. Je poháněno rozhraním REST API WordPressu, takže můžete získat všechny věci týkající se WordPressu ve formátu JSON a dělat s nimi kouzla.

To je docela hezké.

Když jsem se původně rozhodl zkusit nahradit PHP Javascriptem, jako první mě napadlo použít toto rozhraní API. Má několik pěkných vestavěných koncových bodů a máte možnost vytvořit si vlastní. Dokumentace k V2 je trochu nedostatečná, ale to prostě přičítám tomu, že je to tak nové.

S výsledkem jsem nebyl příliš spokojen, i když přiznávám, že jsem si s tím hrál jen asi den. Navíc když už používám React, mohl bych rovnou přijmout celý ekosystém.

Vstup do GraphQL

Nebylo by skvělé, kdyby se uživatelské rozhraní naší aplikace nebo webu mohlo řídit tím, jaká data potřebuje? V případě REST server pošle všechna data, která by uživatelské rozhraní mohlo potřebovat, a pak nechá klienta, aby zbytek roztřídil. Možná budete muset volat na více koncových bodů REST, abyste získali všechna možná data.

Při použití jazyka GraphQL klient určí vztahy dat, která potřebuje, a provede jeden dotaz, aby je všechny získal. Proběhne pouze jedna cesta. A získáte přesně to, co potřebujete.

Více o GraphQL vs. Rest si můžete přečíst zde.

Další kroky

V příštím příspěvku projdu základní nastavení Node.js/Express a jak nastavit základní server GraphQL. Také projdu, jak používám Webpack pro zpracování CSS modulů pomocí SASS, jak funguje nahrazování horkých modulů. Budu také pomocí Sequelize vytvářet připojení k databázi WordPress MYSQL, což znamená, že nebudeme muset psát JEDINÝ ŘÁDEK SQL dotazů! Kouzla!“

Mám zatím repo na Githubu, které obsahuje, kde se v tomto procesu momentálně nacházím. Jsou tam základní dotazy na Post a Postmeta a další šikovné věci. Je to samozřejmě v aktivním vývoji a určitě se tam najdou nějaké trapné chyby, takže se klidně pošťuchujte.

.