Yle Uutisten Plus-toteutuksien kehitys

PlusDesk on Yle Uutisissa toimiva tiimi, joka toteuttaa Yle Uutisten verkkosivuille niin sanottuja Plus-toteutuksia. Plus-toteutukset ovat uutisjuttuja, joita ei ole mahdollista toteuttaa julkaisujärjestelmässä. Toisinsanoen esimerkiksi interaktiiviset tai datajournalistiset toteutukset – kun ne vaativat jonkinlaista erityistä verkonkerrontaa – tehdään yhteistyössä PlusDeskin kanssa. Konkreettisesti tällaisia toteutuksia ovat olleet muun muassa:

• Maaseutu ei autioitunutkaan – kuusi tarinaa kylien uudesta elämästä
• Paljonko lainaa, montako neliötä? Asuntokone kertoo, missä sinulla on varaa asua
• Riittääkö nettisi nopeus? – Katso miten mobiiliyhteys toimii kunnassasi

PlusDesk on toiminut vuoden 2013 alusta eli nyt kolmen ja puolen vuoden ajan. Tänä aikana Plus-toteutuksien toteuttaminen ja julkaiseminen on kehittynyt monilla tavoin. Aloitimme julkaisemisen Ylen verkkolevyn nurkalta, josta on sittemmin luovuttu. Nyt olemme siirtymässä käyttämään AWS-palvelua ja projektikohtaisia Git-repositorioita.

Toteutusten kehitys

Tällä hetkellä PlusDeskissä työskentelee neljä kehitystyötä tekevää henkilöä. Käytössämme on niin Linux- kuin Mac-koneita. Meillä on kaikilla henkilökohtaiset kehitysympäristöt, jotka pyörivät lokaalisti. Kehitysympäristöjen ylläpito ja päivittäminen on pääasiassa käyttäjän vastuulla.

Kehitystyön kannalta olennaista on, että toteutuksia voidaan kehittää ja testata omilla laitteilla mahdollisimman pitkälle ja mahdollisimman vaivattomasti. Tämä helpottaa toteutusten julkaisemista, kun jo kehitysvaiheessa toteutukset testataan mahdollisimman autenttisessa ympäristössä. Eli rautalangasta väännettynä, kehittäjillä on omalla koneellaan kopio Yle Uutisten verkkosivuista, jossa he pystyvät testaamaan kehittämäänsä toteutusta ja näkemään miten toteutus toimii suhteessa muuhun sivustoon. (Kuva 1)

Lokaalisti toimiva kehitysympäristö helpottaa toteutusten testaamista. Kehitysympäristö on kuvankaappaus Yle Uutisten artikkelisivusta. (Kuva 1)

Toteutukset upotetaan suoraan Yle Uutisten sivupohjaan, joten kehittäjän on halutessaan mahdollista rikkoa (muuttaa) koko sivuston toimintaa. Pyrimme hallitsemaan tätä mahdollisuutta rajaamalla kaikki toteutukset koskemaan vain niitä elementtejä, jotka liittyvät itse toteutukseen. Tämä rajaaminen estää, etteivät koodit vaikuta mihinkään toteutuksen ulkopuolisiin elementteihin. Se, että toteutukset asetetaan suoraan sivupohjaan (esimerkiksi iFrame-upotuksen sijaan) kuitenkin mahdollistaa sen, että kehittäjän on helppoa manipuloida myös sivupohjaa niin halutessaan.

Toteutukset noudattavat tiedosto- ja kansiorakenteeltaan aina samaa muotoa, joka on kuvattu alla.

js/
data/
css/
img/
index.html

Näiden lisäksi projekteissa voi soveltuvasti olla mukana esimerkiksi audio, video tai script -nimisiä kansioita. Eri osa-alueet on siis jaettu omiin kansioihinsa. CSS-tyylitiedostot löytyvät omasta css/-kansiosta. Javascript-tiedostot eli toimintalogiikka löytyy js/-kansiosta ja niin edelleen. Käytämme toteutuksissa aina tätä samaa rakennetta, joka helpottaa projektien hallinnointia jälkikäteen ja eri kehittäjien kesken.

Koodauksessa pyrimme käyttämään apuna hyväksi havaittuja ja luotettuja kirjastoja kuten D3.js, jQuery ja Highcharts. Aina tarpeen mukaan käytämme projekteissa myös uusia kirjastoja, mutta näiden käytössä olemme tarkkoja, että ne toimivat varmasti kaikilla laitteilla. Soveltuvasti käytössämme on myös Three.js:n, Reactin ja Angular.js:n kaltaisia kirjastoja. Kirjastot tarjoillaan projekteille joko staattisina tiedostoina tai Node-moduuleina.

Javascriptissä käytämme niin ES5:sta kuin ES6:sta. CSS:ssä meillä on käytössä niin LESS kuin SASS. Nämä kehittäjästä ja projektista riippuen.

Yksinkertaiset projektit pyrimme pitämään mahdollisimman yksinkertaisina (KISS).

Alusta asti olemme käyttäneet Git-versionhallintaa. Versionhallinta mahdollistaa muun muassa koodien jakamisen kehittäjien kesken, mutta myös toteutusten versioinnin. Tähän päivään asti meillä on ollut jokaisen vuoden projekteja varten yksi repositorio, mutta nyt olemme siirtymässä käyttämään projektikohtaisia repositorioita. Projektikohtaiset repositoriot mahdollistavat ketterämmän versionhallinnan hyödyntämisen. Jatkossa nimeämme repositoriot seuraavasti:

"vvvv-kk-projektin_nimi"

Eli esimerkiksi 2016-06-asuntokone. Aikaisemmin kansiorakenne oli muotoa vvvv/kk-projektin_nimi. Meillä on komento, joka luo projektin perustamisen yhteydessä uuden repositorion (myös remoten).

Testaus

Testaamme toteutuksiamme vaihtelevasti, mutta etenkin uudet teknologiat isoimmat projektimme testaamme kattavasti eri laitteilla ja eri ympäristöissä. Tämä tarkoittaa, että kokeilemme toteutuksia puhelimilla, tableteilla, Mac- ja Windows-koneilla sekä eri selaimilla. Meillä on erikseen testaamiseen hankittuja laitteita.

Testaamiseen hyödynnämme Google Chrome DevTools:a, Xcode Simulator:a ja Ghostlab-ohjelmistoa.

Pyrimme siihen, että kaikki toteutuksemme toimivat teknisesti kaikilla nykyisillä laitteilla ja ympäristöillä.

Teemme myös käyttäjätestejä mahdollisuuksien mukaan.

Julkaistavan version buildaaminen

Olemme siirtymässä ja pääosin jo siirtyneet projektien "buildaamiseen". Buildaaminen tarkoittaa, että teemme Plus-toteutuksien koodeista erillisen julkaistavan version. Julkaistavat versiot asetetaan projekteissa public/-nimiseen kansioon, jonka alta löytyy käytännössä sama kansiorakenne kuin yllä kuvatulla kehityspuolella. Public-kansiossa asuvat vain tiedostot joita julkaistava versio tarvitsee.

Käytössämme on muutamia rinnakkaisia buildaustyökaluja, mutta useimmat meistä käyttävät työkalua nimeltä Gulp (olisi mahdollista käyttää myös Grunt:a. Olemme integroineet Gulp:n Sublime Gulp:lla Sublime Text -editoriin, jota käytämme koodin kirjoittamiseen (Kuva 2).

Gulp tarkkailee muutoksia tiedoissa ja suorittaa buildin. (Kuva 2)

HTML, CSS ja JS tiedostoille Gulp suorittaa omat tehtävänsä. Javascript-tiedostojen buildaus tekee seuraavat toiminnot (Suluissa ovat käytettyjen Node-moduulien nimet):

• Lint (gulp-jshint)
• Browserify (gulp-browserify)
• Uglify (gulp-uglify)
• Sourcemaps (gulp-sourcemaps)
• Livereload (gulp-livereload)

Lint tarkistaa koodin syntaksia, Browserify tekee koodeista selaimessa toimivia, Uglify minifoi koodin, Sourcemaps mahdollistaa minifoidun koodin palauttamisen, Livereload kertoo selaimelle tiedostojen muuttuneen.

CSS-tiedostoille buildi tekee toiminnot:

• Less (gulp-less)
• Cleancss (gulp-clean-css)
• Sourcemaps (gulp-sourcemaps)
• Livereload (gulp-livereload)

Less muuntaa Less-syntaksin selaimen ymmärtämään CSS-muotoon, Cleancss minifoi koodin, Sourcemaps mahdollistaa minifoidun koodin palauttamisen, Livereload kertoo selaimelle tiedostojen muuttuneen.

HTML-tiedostoille ajetaan:

• htmlmin (gulp-htmlmin)
• Livereload (gulp-livereload)

Htmlmin minifoi koodin, Livereload kertoo selaimelle tiedostojen muuttuneen.

Gulp rakentaa buildin public/-kansioon, jonka sisältö siirretään julkaisua varten julkisen verkko-osoitteen taakse. Tulevaisuudessa tämä julkinen paikka on AWS:ssa. AWS on pilvipalvelu, jonka kautta voidaan jakaa helposti ja tehokkaasti staattisia tiedostoja. Aikaisemmin olemme käyttäneet Ylen omia verkkolevyjä minne tiedostot on siirretty käsin. AWS:n myötä tämä tiedostojen siirtäminen automatisoituu. Tässä suhteessa yhtenäistämme käytäntöjä Ylen sisäisesti.

Toteutuksen siirtäminen julkaisujärjestelmään

Julkaisujärjestelmämme on nimeltään Escenic. Esceniciä käytetään Yle Uutisten sisällön luomiseen ja tallentamiseen. Escenicistä tiedot haetaan rajapinnan (Yle API) avulla yle.fi/uutiset-sivustolle. Plus-toteutuksien osalta Esceniciin luodaan erillinen sisältötyyppi nimeltä "Ulkoinen sisältö". Ulkoiselle sisällölle määritellään kaikki resurssit, joita toteutus tarvitsee eli tämä tarkoittaa HTML, CSS ja JS-tiedostoja. (Kuva 3)

Asetamme julkaisujärjestelmäämme projektin tarvitsemat resurssit. Tässä esimerkiksi Asuntokoneen ulkoinen sisältö. CSS ja JS resursseja voi tarvittaessa olla useita. (Kuva 3)

Ulkoinen sisältö voidaan sitten liittää uutisartikkelissa mihin tahansa haluttuun paikkaan, jolloin HTML-sisältö liitetään haluttuun kohtaan. CSS- ja JS-tiedostot menevät niille varattuun paikkaan sivupohjassa. Aikaisemmin ulkoiset sisällöt oli mahdollista sijoittaa vain jutun alkuun tai loppuun.