Headless WordPress development with React using Gatsby.js
Stenroos, Juha (2019)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2019113023682
https://urn.fi/URN:NBN:fi:amk-2019113023682
Tiivistelmä
Tämän opinnäyte on opaskirja ohjelmistokehittäjälle, joka jo kenties tuntee JavaScriptiä ja PHP:tä ja on mahdollisesti työskennellyt WordPressin parissa. Se on kuitenkin pyritty kirjoittamaan niin, että käsitteet avautuvat myös sellaiselle lukijalle, jolla ei ole aiempaa kokemusta web-kehittäjänä.
Tarkoitus on tarjota tietoa siitä, miten hyödyntää JavaScript viitekehystä kuten Gatsbya, verkkosivustojen käyttöliittymän rakentamisessa, kuitenkin käyttäen WordPressiä sisällön hallintaan.
Gatsby on suosittuun JavaScript kirjasto Reactiin perustuva ohjelmistoviitekehys, joka hyödyntää monia uusimpia verkon teknologioita, kuten GraphQl kyselykieltä. Tämän kaltaiset viitekehykset edustavat niin sanottua Single Page Application (SPA) lähestymistapaa. Muista vastaavista viitekehyksistä poiketen Gatsby sivustot piirretään kuitenkin serverillä etukäteen ja tarjoillaan käyttäjälle staattisina tiedostoina. Tämä mahdollistaa tavallista paremman suorituskyvyn. Lisäksi hakukoneiden on helppo indeksoida staattisiksi generoitu HTML sisältö. Tällä on etua sivuston löydettävyyden kannalta, mikä on tyypillisesti ollut SPA sovellusten Akilleen kantapää.
On monia hyviä syitä, miksi näin haluttaisiin tehdä. Internet on muuttunut siitä ajasta, kun WordPress julkaistiin. Se on jakautunut www lisäksi älypuhelimilla käytettäviin natiivisovelluksiin, sekä moniin muihin laitteisiin. Samaa sisältöä saatetaan tarvita muissakin kanavissa kuin verkkosivustolla ja näin ollen tiukasti verkkosivuston rakenteeseen sidottu monoliittinen ratkaisu ei välttämättä ole enää paras. Ratkaisu tähän on erottaa sisällönhallinta ja sisällön esittämiseen käytetty käyttöliittymäkerros. Tästä käytetään termiä ’headless’. Gatsby ja monet muut sen kaltaiset JavaScript viitekehykset ovat kevyitä ja moderneja ratkaisuja rakentaa verkkosivuston käyttöliittymä ja kun sivuston sisällön rakenne suunnitellaan verkkosivuston sijaan headless lähtökohdasta voidaan dataa hyödyntää muuallakin.
Tarkoitus on tarjota tietoa siitä, miten hyödyntää JavaScript viitekehystä kuten Gatsbya, verkkosivustojen käyttöliittymän rakentamisessa, kuitenkin käyttäen WordPressiä sisällön hallintaan.
Gatsby on suosittuun JavaScript kirjasto Reactiin perustuva ohjelmistoviitekehys, joka hyödyntää monia uusimpia verkon teknologioita, kuten GraphQl kyselykieltä. Tämän kaltaiset viitekehykset edustavat niin sanottua Single Page Application (SPA) lähestymistapaa. Muista vastaavista viitekehyksistä poiketen Gatsby sivustot piirretään kuitenkin serverillä etukäteen ja tarjoillaan käyttäjälle staattisina tiedostoina. Tämä mahdollistaa tavallista paremman suorituskyvyn. Lisäksi hakukoneiden on helppo indeksoida staattisiksi generoitu HTML sisältö. Tällä on etua sivuston löydettävyyden kannalta, mikä on tyypillisesti ollut SPA sovellusten Akilleen kantapää.
On monia hyviä syitä, miksi näin haluttaisiin tehdä. Internet on muuttunut siitä ajasta, kun WordPress julkaistiin. Se on jakautunut www lisäksi älypuhelimilla käytettäviin natiivisovelluksiin, sekä moniin muihin laitteisiin. Samaa sisältöä saatetaan tarvita muissakin kanavissa kuin verkkosivustolla ja näin ollen tiukasti verkkosivuston rakenteeseen sidottu monoliittinen ratkaisu ei välttämättä ole enää paras. Ratkaisu tähän on erottaa sisällönhallinta ja sisällön esittämiseen käytetty käyttöliittymäkerros. Tästä käytetään termiä ’headless’. Gatsby ja monet muut sen kaltaiset JavaScript viitekehykset ovat kevyitä ja moderneja ratkaisuja rakentaa verkkosivuston käyttöliittymä ja kun sivuston sisällön rakenne suunnitellaan verkkosivuston sijaan headless lähtökohdasta voidaan dataa hyödyntää muuallakin.