Jouluradion sivusto

FM-radion tueksi syksyllä 2018 avattiin Jouluradion uudet verkkosivut, joiden välityksellä joulumusiikin vannoutuneet ystävät saivat sesongin ajan nauttia FM-taajuuden lisäksi yhdeksästä muusta kanavasta verkossa. Verkkosivuille tehtiin joulun aikaan parhaimmillaan lähes 50 000 käyntiä päivässä. Kokonaisuudessaan jouluradio.fi toteutettiin headless WordPress-ratkaisuna. Frontti toteutettiin Reactilla siitäkin syystä, että Geniemillä on yli 15 hengen React-tiimi talossa.

Miksi WordPressin ja Reactin yhdistelmä?

Tämän vuoden puolella on käyty kiivasta keskustelua Twitterissä, LinkedInissä ja myös Vierityspalkissa koskien WordPress sivuston frontin toteutusta Reactilla ja sitä, onko Reactista tullut uusi Flash.

Meidän näkemyksemme on, että perus viestinnällinen verkkosivusto joka on vahvasti sisältöpainottunut ei juuri hyödy headless-konseptista. Kuten keskusteluissa on tullut esille se voi tuoda monia asioita ratkaistavaksi, jotka perus WordPress toteutuksella tehtynä on kunnossa “out-of-the-box”.

Jouluradio ei ollut sisältöpainotteinen sivusto vaan enemmän sovelluksenomainen soitin, jonka päätarkoituksena on toimia käyttöliittymänä joululaulujen soittamiseen. Tämän lisäksi sivustolla oli kuitenkin jonkin verran aiheeseen liittyvää sisältöä, joten sisällönhallinnan työkalulle oli selkeä tarve ja se puolsi WordPressin käyttöä itse sisällön tuotantoon. Tästä syystä päädyimme headless WordPress-toteutukseen.
Ensimmäistä sivunlatausta varten Reactin takana on Next.js toteutus.

Jouluradio.fi sivustolle toteutetut integraatiot

Nettiradion eri kanavat striimataan kolmannen osapuolen järjestelmästä. Striimien lisäksi integraationa tehtiin webhook, jonne järjestelmä lähetti soivan kappaleen metatiedot kappaleen vaihtuessa eri kanavilla, joka lähetettiin websocketilla frontendille. Samalla soiva kappale lisättiin tietokantaan, jolloin voitiin ylläpitää tietoa viimeksi soitetuista kappaleista.

Lisää toteutuksesta Geniemin blogissa.