Stjernefødsler og fyrverkeri: En litt annen måte å se på kode

Kategorier: Datavisualisering, Nettjenester, NRK-stoff, Utvikling & Webutvikling

Visualisering av NRKs frontend kodebase anno 2016.


Veldig ofte snakker vi om kode som datalinjer, og da er det ikke så enkelt å forklare hvordan alt henger sammen. Denne gangen ønsker vi derfor å vise hvordan koden til en del av NRK har forandret seg de siste to årene.

For to år siden hang mange ulike deler av tjenestene våre som NRK TV, NRK Radio og NRK Super sammen, og de var tett knyttet til bakenforliggende systemer.

Det var ikke heldig, og derfor har vi gjort dem mer selvstendige.

Uten å gå i dybden på det tekniske viser vi livet til en kodebase ved å visuelt vise hvordan filene henger sammen med hverandre.

Grenene er et resultat av hvordan filene henger sammen, slik gir de et grovt overblikk over sammensetningen til deler av NRKs kodebase.

Når nye filer blir lagt til gir det et hvit lysglimt, nesten som en stjernefødsel. Filer som fjernes gir røde grener som etterhvert forsvinner bort. Lynglimtene som stadig skyter mellom grenene er endringer som påvirker flere filer samtidig.

Det hele ser i grunn litt ut som et lite univers. Det fødes nye stjerner og planeter, og innimellom kollapser hele systemer og blir borte i det store intet.

Man kan se for seg tre webapplikasjonene (NRK TV, NRK Super, NRK Radio) som tre garnnøster som er flettet inn i hverandre. De siste to årene har vi jobbet med å skille dem fra hverandre med å nøste dem opp, litt som man ville fått orden på et garnnøste.

Hvorfor lurer du kanskje?

Det er fordi det ofte er enklere å klone en del av garnnøstet og klippe bort de trådene man ikke trenger, enn å starte med klippingen. Derfor vil du se at vi kloner, så sletter gjentatte ganger.

Her er hele videoen som tar for seg de siste to årene, lengre nede i saken får du høydepunktene som perler på en snor.

Vår 2016

Vi klonet først NRK Super fra NRK TV og NRK Radio. Da ble 534,461 linjer kode ble kopiert.

Det kan sees som en masse grønne streker som dukker opp. Dette skulle gi oss mulighet til å fjerne masse kompleksitet og avhengigheter som ødela for NRK Super hver gang vi gjorde ikke-relaterte endringer i NRK TV eller NRK Radio.

Etterpå ser vi kode som ikke lenger er relevant for de to klonene slettes.

Kloning av NRK TV/Radio/super

De som er interesserte i tekniske detaljer rundt hvordan vi gikk frem kan se dette videoforedraget:

Vinter 2016/17

Vi flytter rundt på en del filer for å rydde opp i garnnøstet. Det gjør at vi kan slette mye kode som nå er overflødig.

Rydding og flytting – det skjer lite egentlig endring men det ser stilig ut

Sommer 2017

Her flytter vi NRK TV og NRK Radio til en egen kodebase, kodelinjene som slettes sees som røde streker. NRK TV og NRK Radio lever nå adskilt fra API-et.

Tidlig vinter 2018

Nå var det bare NRK Super som var igjen av den gamle front-end koden. De tok eierskap til det systemet selv og skrev en ny løsning. Vi kunne da slette alt det som var igjen av front-end koden deres.

Kodebasen spises så opp i det som ser ut som et strålende fyrverkeri.

tv.nrksuper.no og noe verktøy forsvinner

Bakgrunnen for endringene

Da NRK TV, NRK Super og NRK Radio ble laget var de en felles webapplikasjon som brukte databasen til backendsystemene direkte. Over tid har vi bygget et såkalt API for mobilapplikasjoner og smart-TVer, som etterhvert frontend-koden også tok i bruk.

Til tross for at systemene snakket sammen gjennom et API, hang de ganske tett sammen i koden og bodde altså av historiske årsaker i samme repository.

Vi ønsket ikke lenger å ha det slik, vi ønsket at disse webapplikasjonene kan leve sine egne liv. Og selv om det oppstod ut fra en og samme ting, ønsket vi ikke å gjenbruk av kode mellom disse applikasjonene.

Det gir avhengigheter mellom systemer og team som skal jobbe uavhengig, med konsekvenser som oppsummeres fint i denne tweeten:

For eksempel kunne NRK TV gjøre endringer som medførte utilsiktede feil hos NRK Super. Eller at man gjorde en endring på Radio som medførte problemer for TV.

Arbeidet med å skille API-et fra webapplikasjonene er beskrevet i mer detalj i denne artikkelen: Decoupling legacy code using NDepend.

Resultatet av den toårige prosessen er at vi har introdusert mer funksjonalitet i tjenestene og fått en mindre og mer håndterlig kodebase.

Slik gjør du det til selv

Vi har visualisert filer på disk ved hjelp av http://gource.io
Hele videoen ligger her

Det er utrolig enkelt å bruke Gource om du har git som kildekodekontroll. Da trenger du å kun to linjer for å lage en video:

 
gource --seconds-per-day 0.1 --auto-skip-seconds .1 --hide dirnames,filenames,files,users --camera-mode overview -o psapi.ppm
 ffmpeg -y -r 60 -f image2pipe -vcodec ppm -i psapi.ppm -vcodec libx264 -pix_fmt yuv420p -bf 0 psapi.mp4

Vi valgte å anonymisere brukere, men videoene blir ganske tøffe om man ikke har med ‘users’ i kommandoen over. Det går også an å skru på –seconds-per-day for å få opp tempoet litt hvis man vil ha mer action.

Det finnes mange andre kule visualiseringer. Synes du dette var fascinerende er det bare å søke etter «Gource» på f.eks. Youtube.

Denne er også en favoritt:

3 kommentarer

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *