Headless WordPress development with React using Gatsby.js

Juha Stenroos

Headless WordPress development with React using Gatsby.js

Juha Stenroos · Theseus (Ammattikorkeakoulujen) · 2019

Tämän opinnäyte on opaskirja ohjelmistokehittäjälle, joka jo kenties tuntee JavaScriptiä ja PHP:tä ja on mahdollisesti työskennellyt WordPressin parissa. Se on kuitenkin pyritty kirjoittamaan niin, että käsitteet avautuvat myös sellaiselle lukijalle, jolla ei ole aiempaa kokemusta web-kehittäjänä. Tarkoitus on tarjota tietoa siitä, miten hyödyntää JavaScript viitekehystä kuten Gatsbya, verkkosi- vustojen käyttöliittymän rakentamisessa, kuitenkin käyttäen WordPressiä sisällön hallintaan. Gatsby on suosittuun JavaScript kirjasto Reactiin perustuva ohjelmistoviitekehys, joka hyödyntää monia uusimpia verkon teknologioita, kuten GraphQl kyselykieltä. Tämän kaltaiset viitekehykset edustavat niin sanottua Single Page Application (SPA) lähestymistapaa. Muista vastaavista viiteke- hyksistä poiketen Gatsby sivustot piirretään kuitenkin serverillä etukäteen ja tarjoillaan käyttäjälle staattisina tiedostoina. Tämä mahdollistaa tavallista paremman suorituskyvyn. Lisäksi hakukoneiden on helppo indeksoida staattisiksi generoitu HTML sisältö. Tällä on etua sivuston löydettävyyden kannalta, mikä on tyypillisesti ollut SPA sovellusten Akilleen kantapää. On monia hyviä syitä, miksi näin haluttaisiin tehdä. Internet on muuttunut siitä ajasta, kun WordPress julkaistiin. Se on jakautunut www lisäksi älypuhelimilla käytettäviin natiivisovelluksiin, sekä moniin muihin laitteisiin. Samaa sisältöä saatetaan tarvita muissakin kanavissa kuin verkkosi- vustolla ja näin ollen tiukasti verkkosivuston rakenteeseen sidottu monoliittinen ratkaisu ei välttä- mättä ole enää paras. Ratkaisu tähän on erottaa sisällönhallinta ja sisällön esittämiseen käytetty käyt- töliittymäkerros. Tästä käytetään termiä ’headless’. Gatsby ja monet muut sen kaltaiset JavaScript viitekehykset ovat kevyitä ja moderneja ratkaisuja rakentaa verkkosivuston käyttöliittymä ja kun si- vuston sisällön rakenne suunnitellaan verkkosivuston sijaan headless lähtökohdasta voidaan dataa hyödyntää muuallakin.

Read the paper · More papers on PaperTik