Slik koder TV 2 for en haug ulike plattformer

Hvordan lager du apper som skal fungere på ikke bare iOS, Android og Web – men også på et stort antall gamle og nye TV-er? Teamet bak TV 2 Play forteller hvordan.

Det kan være tidkrevende å implementere kompliserte grensesnitt på tvers av ulike plattformer. Teamet som lager TV 2 Play vurderer nå Compose Multiplatform. 📸: TV 2
Det kan være tidkrevende å implementere kompliserte grensesnitt på tvers av ulike plattformer. Teamet som lager TV 2 Play vurderer nå Compose Multiplatform. 📸: TV 2 Vis mer

Dette leserinnlegget handler om hvordan TV 2 driver apputvikling på alle de ulike plattformene de strømmer til.

Innlegget er skrevet av: Alexander Arnesen, Techlead – TV 2 Play Android, Tormod Tønnesen, Teamlead – TV 2 Play, Remi Sture, Techlead – TV 2 Play CTV, Inger-Marie Nilsen, Techlead – TV 2 Play Web og Tobias Lie Andersen, Techlead – TV 2 Play Apple.

For TV 2 er det essensielt å være tilgjengelig der våre kunder er, og det innebærer å levere apper til et bredt spekter av plattformer. Vi etterstreber å levere en sømløs og høykvalitets TV 2-opplevelse uavhengig av hvilken enhet du velger å benytte deg av. Imidlertid byr dette på utfordringer siden norske seere har et imponerende utvalg på hele 16 plattformer, som spenner fra mobiltelefoner, nettbrett, smart-TV-er og PC-er til integrerte system i biler.

Vi i Play Apps-teamet hos TV 2 er dedikerte til innovasjon og forbedring. Vi ønsker å gi dere et innblikk i vår metodikk rundt håndtering av kodebaser samt valg av verktøy og strukturer som vi anvender for effektivt å møte disse utfordringene.

TV 2 Play har engasjert seg bredt teknologisk ved å støtte en rekke plattformer: iOS, iPadOS, Android mobil og tablet, Android TV, Android Automotive (feks Volvo og Polestar biler), nettlesere/web, Chromecast, Apple TV (tvOS), smart-TVer fra LG og Samsung samt flere distributørplattformer, herunder flere versjoner av boksene fra både Altibox, Telia, RiksTV, Allente, og Telenor - samt samarbeid med Strim-appene.

Ut fra våre apper for TV 2 Play bygges også to andre plattformer; MyGame (mygame.no) og Direktesport (direktesport.no). Disse er fullverdige streaming-løsninger som er basert på TV 2 Play, bare re-skinnet med andre farger og noen mindre justeringer i hvordan de fungerer.

Under ser dere hvilke plattformer vi leverer de forskjellige appene på:

📸: TV 2
📸: TV 2 Vis mer

Fem kodebaser

For å sikre en bred tilstedeværelse, har TV 2 utviklet fem kodebaser som spenner over forskjellige plattformer:

  • Apple (som inkluderer både iOS og tvOS)
  • Android
  • Connected TV (CTV, altså Samsung og LG smart-TVer)
  • Web
  • Chromecast

Dette gir oss fleksibiliteten til å nå vårt publikum (nesten) uansett hvilken dings de foretrekker å se på.

TV 2 har et ønske om å teste, måle og lære for å kontinuerlig videreutvikle og forbedre tjenesten. Det holdes også tett dialog med kundesenteret som en førstelinjes instans for å måle pulsen på tjenesten.

Apple, Android og CTV står for mer enn 80 % av seingen vår, mens Chromecast og Web står for resten med omtrent like store andeler.

📸: TV 2
📸: TV 2 Vis mer

Apple: Swift og SwiftUI

TV 2 Play er laget in-house som en native app for både Apple TV, iPhone og iPad. Vi har en moderne og forholdsvis ny kodebase i Swift som både tvOS og iOS bygges fra, med fokus på deling og gjenbruk av felles logikk.

Sentral funksjonalitet slik som videoavspilling og autentisering er laget som egne moduler, slik at de kan gjenbrukes på tvers av alle Apple-baserte applikasjoner hos TV 2. Blant annet bruker tv2.no og TV 2 Sport appene disse.

Vi har tatt i bruk Apple sitt nye UI-rammeverk, SwiftUI, for store deler av appen. Med innføringen av SwiftUI benytter vi oss også flittig av Apples siste UI-verktøysett samt native-komponenter fra Apple selv — noe som støtter integrasjon med nyeste funksjonene lansert i oppdaterte versjoner av operativsystemene deres.

Web: React SPA

På TV 2 Play-web kjører vi en moderne responsiv single-page application (SPA) bygget med hjelp av React-teknologi, sammen med søster-applikasjonene for TV 2 konto-sidene og innlogging/registrering.

Disse applikasjonene baseres på et felles komponentbibliotek som inneholder knapper, farger, skalering og andre gjenbrukbare komponenter.

Med mangfoldige skjermstørrelser på blokken bruker web-teamet flere triks for å visuelt skalere innholdet. Disse inkluderer blant annet å dynamisk interpolere tekststørrelser samt innføre en global multiplikator for resten av innholdet.

«Med mangfoldige skjermstørrelser på blokken bruker web-teamet flere triks for å visuelt skalere innholdet.»

Smart-TV (CTV): Fra JS til TypeScript

TV 2 Play CTV (Connected TV)-appen vår tilbys på TV-er fra Samsung og LG, samt på Telenors tre generasjoner av TV-bokser. Vi leverer i tillegg Direktesport-applikasjonen for Samsung og LG. To applikasjoner på tre plattformer levert fra én og samme kodebase!

Applikasjonen er en klassisk React SPA som er bygget rundt det glimrende open source-biblioteket Norigin Spatial Navigation. Denne løsningen håndterer elegant navigering med tastatur, fjernkontroller og musepeker-kontrollere for browser-baserte Smart TV-er og andre connected TV-plattformer.

Vi er nå i en migreringsfase der vi skriver oss mer og mer over til TypeScript fra JavaScript, samt har høyt fokus på et smidig, fleksibelt og utviklervennlig CI/CD-oppsett med GitHub Actions og GCP. Vi har gått fra å kjøpe et produkt eksternt til å ta mer og mer eierskap til arkitektur og retning internt hos TV 2.

📸: TV 2
📸: TV 2 Vis mer

Android: Ikke bare telefoner

Når man nevner Android, tenker de fleste umiddelbart på mobiltelefoner. Men hos TV 2 har vi også et sterkt fokus på større skjermer, noe som reflekteres i vårt arbeid med å utvikle en applikasjon som er optimalisert for enheter av alle størrelser - fra de mest kompakte smarttelefoner til de mest imponerende store TV-skjermene.

I tillegg har vi vært veldig tidlig ute med å inkludere støtte for Android Automotive, og dermed er TV 2 Play nå også en integrert del av opplevelsen i bilen – noe Polestar- og Volvo-eiere allerede kan glede seg over.

TV-bokser: Distributører som Altibox, RiksTV, Allente og Telia har i dag avtale med TV 2 Play som gir brukere tilgang til TV 2 Play. Disse ender opp som brukere av Android TV-appen vår, da boksene levert av disse distributørene kjører Android som operativsystem.

"Cutting edge" kode

På Android plattformen jobber vi så cutting-edge vi kan!

Kotlin, Compose UI og et godt gjennomtenkt dependency injection oppsett gjør oss i stand til å støtte det store spekteret av enheter, plattformer og skjermstørrelser.

Vi har delt opp koden i over 70 moduler for å kun levere logikk og kode som kreves av den spesifikke varianten av appen som bygges. Denne angrepsmåten har gitt oss stor gevinst i møte med endrede bruksmønstre den siste tiden: dyplenker hos TV-leverandører, biler og nye TV produsenter på det norske markedet som TCL og Hisense og flere som er på vei.

Fremtiden og multiplatform

Med en så stor bredde av enheter og plattformer kunne det virke som en forlokkende løsning å benytte oss av et multiplattformverktøy for å vedlikeholde kun én felles kodebase.

I teorien kunne dette dekke mange av funksjonene til våre diverse klientapplikasjoner. Men hos TV 2 Play verdsetter vi evnen til å finjustere brukeropplevelsen, ytelsen og den tekniske implementasjonen spesifikt for hvert enkelt apparat enormt høyt.

På CTV-plattformer må vi håndtere 10 år gamle versjoner av Chrome(ium), mens Android Automotive krever intelligent respons når kjøretøy settes i gir og automatisk pause strømmingen. Apple TV pålegger oss å etterkomme deres stringente UX-retningslinjer, og med Altibox er det viktig at brukerne opplever sømløs automatisk innlogging via samspillet mellom vår egen app og deres Android-applikasjon. Videre har Apple sine klare restriksjoner rundt in-app-kjøp samt utallige andre plattformspesifikke finesser.

«En annen betydelig fordel med native-løsninger er muligheten de gir oss til raskt å adoptere ny funksjonalitet så snart de lanseres.»

En annen betydelig fordel med native-løsninger er muligheten de gir oss til raskt å adoptere ny funksjonalitet så snart de lanseres fra gigantene som Apple eller Google – uten ventetiden som ofte følger med et tredjeparts multiplattformverktøy. Android Automotive er som nevnt tidligere ett prakt-eksempel på akkurat dette!

Mens alle våre plattformer (Web, CTV, Apple og Android) drar nytte av et felles språkbibliotek hvor TypeScript sikrer korrektheten i oversettelser og dynamiske komponenter ("placeholders"), erkjenner vi at grensesnittdesign på tvers kan være tidkrevende.

Nettopp derfor utforsker vi nå Compose Multiplatform-teknologien. Dette eksperimentet tillater oss allerede å dele grensesnittkode fra Android-applikasjonen over på andre plattformer. Hvis denne strategien viser seg vellykket vil den kunne kombinere det beste fra to verdener: muligheten til fortsatt fleksibilitet og hastighet fra native-utvikling samtidig som komplekse UI-elementer gjenbrukes effektivt. Only time will tell!

Mer informasjon finnes her: https://www.jetbrains.com/lp/compose-multiplatform/

Samme kode som kjører på Android, iOS og desktop. 📸: TV 2
Samme kode som kjører på Android, iOS og desktop. 📸: TV 2 Vis mer

Utfordringer med eldre dingser

En utfordring vi jobber mye med er balansen mellom å levere kule nye funksjoner i appene våre og at appene samtidig fungerer så bra som mulig også på de eldste dingsene som alle har i sine hjem.

Og akkurat her oppstår det et stort dilemma for utviklere (og brukere); hva er definisjonen av “eldre”?

Android-appen vår støtter alt med Android versjon 7 og oppover, det vil si at alt det nye vi lager også må fungere på et 8 år gammelt system - og dette kan fort by på utfordringer. Spesielt blir det vanskelig når system-eier (Google i dette tilfellet) offisielt avslutter støtten for versjonen og ikke lenger leverer fikser på problemer vi sliter med og som ikke vi som app-utviklere råder over.

Tilsvarende gjelder for Apple sine mobiler, padder og TV-bokser, de får bare oppdateringer en viss periode, og etter at den er over gjør de det veldig vanskelig for oss å vedlikeholde appene på disse versjonene.

Tilsvarende gjelder også for våre såkalte CTV-apper, spesielt på Samsung og LG TVer. Når en TV selges ny i butikken (og gjerne både som fjorårets modell og året før der igjen) har systemet (OS-et / firmwaren) som kjører på TV-en allerede brukt lang tid på å bli utviklet, testet og klargjort. Det betyr at når noen henger sin splitter nye TV på veggen hjemme så er den allerede delvis utdatert, dessverre.

«Det betyr at når noen henger sin splitter nye TV på veggen hjemme så er den allerede delvis utdatert, dessverre.»

Deretter går det noen få år før Samsung og LG selv annonserer at de ikke lenger vil gi oppdateringer og forbedringer til årsmodeller eldre enn for eksempel 2017 (som de nå nylig gjorde). I tillegg til at selve firmwaren som kjører på disse TV-ene da har blitt gammel, så er det med web-baserte apper veldig viktig hvilken Chromium-versjon de bruker, og for eksempel en Samsung-TV som ble solgt ny i 2017 kom med en browser-motor fra 2015, som nå er ni år og som aldri blir oppdatert etter produksjon.

Her har ting vi lager en lei tendens til å ikke virke, og det krever stor ekstrainnsats for våre utviklere å teste, finne og rette opp i disse feilene - som ikke skjer på nyere TV-er.

Disse tingene er naturligvis ikke mulig for andre enn oss som sitter på detaljene å vite om, så det er forståelig at våre kunder reagerer når appen må avsluttes på deres TV eller pad. Det fører også til at eldre versjoner koster oss veldig mye verdifull tid å utvikle, feilsøke og fikse på, siden vi ikke lenger får god hjelp av produsentene.

Stort sett annonserer de at de eldste modellene ikke lenger er offisielt støttet bare 5-7 år etter at de ble solgt. Folk har jo TV-ene, mobilene og paddene sine mye lenger enn det! Heldigvis koster det bare 350 kr for en fullverdig smart-tv-opplevelse man kan plugge i en hvilken som helst TV og fortsette å bruke appene våre videre.

Globale aktører som Netflix støtter ofte eldre modeller lenger enn TV 2 Play. Grunnen til at de kan gjøre dette, er at de har massive utviklerteam over hele verden. I motsetning har TV 2 Play en liten håndfull utviklere i Bergen. Dette tvinger oss til å gjøre tøffe valg på hvor tiden brukes.

Vi gjør vårt beste, men det er ikke alltid vi kan forsvare å bruke tid på mindre brukte plattformer, selv om vi skulle ønske vi kunne fikse alt for alle innerst inne. Vi jobber med å skape stabile løsninger, men det er krevende på eldre modeller når produsentene ikke støtter ny streaming teknologi.