Forårsrengøring, planlægning og ungdomshold

Bubbles, FC Sunnyvale Udvikler 14. marts 2018, 18:36

Så er det tid til en opdatering fra udviklingsafdelingen.

Efter vi blev færdige med server-flytningen, som vi desværre blev tvunget til at bruge al vores tid på i januar, tog vi fat på design og implementering af de mange nye sider, som kommer sammen med Ungdomshold.

Efterhånden som dette arbejde skred frem, stod det klart at vi var nødt til at tage et skridt tilbage og foretage en analyse af al den 3.-parts software, de web-teknologier og de fremgangsmåder, vi anvender, samt al den gamle kode, der ligger og samler støv i krogene.

Men hvorfor har vi så brugt tid på det nu, og ladet Ungdomshold vente?

Jo, vi har nemlig ambitioner om, at vi efter Ungdomshold endelig skal i gang med at gøre Virtual Manager ordentligt brugbar på mobil. Fordi spillet efterhånden har mange år på bagen, så vil det forinden være nødvendigt med en grundig omgang oprydning, opgradering, og optimering - ikke mindst af sikkerhedshensyn.

Det ville være dumt, hvis vi implementerede alle de nye sider og funktioner i ungdomshold med vores sædvanlige gamle teknikker og værktøjer, og så skulle lave det hele om igen til sommer. Vi har absolut ikke råd til at lave dobbeltarbejde.

Derfor var det vigtigt at vi brugte noget tid på at udforske, afprøve og udvælge de teknikker og værktøjer, der bliver en del af Virtual Managers fremtidige udvikling - samt at udpege de mange steder, hvor vi trænger til slette eller opdatere gammel kode og tredjeparts-softwarebiblioteker.

I forbindelse med denne udforskning besluttede vi os for at plukke nogle af de lavest-hængende frugter i forhold til oprydning, opgradering, og optimering. Så den sidste måneds tid har vi stået på hovedet i maskinrummet for at implementere og afprøve nogle af disse ting:

Oprydning

Vi har været rundt omkring i vores Javascript og CSS og slettet store mængder kode, som ikke længere er nødvendig - især en en hel kompatibilitets-kode, som blev brugt til at understøtte Internet Explorers mange fejl og mangler. Det har vi ikke brug for længere, og det betyder at mindre kode skal sendes til dig, når du besøger sitet.

Opgradering

Derudover har vi opgraderet softwaren på vores webserver, og konfigureret den til at bruge HTTP/2, som er den første opdatering til HTTP-protokollen i 18 år. De væsentligste fordele for Virtual Manager er i første omgang header-komprimering og multiplexing.

Hver gang din browser beder vores server om at få tilsendt en bestemt fil, sender den sammen med forespørgslen en række headers med ekstra information til at koordinere overførslen. Når serveren svarer, kommer der ligeledes headers med tilbage. Selvom headers ikke fylder voldsomt meget, så løber det alligevel op, når vi overfører mange små filer. Førhen har disse headers ikke kunnet komprimeres, men det problem løser HTTP/2.

Multiplexing løser et andet gammelt problem i HTTP, når der skal sendes et stort antal filer, såsom billeder, stylesheets og scripts. Med HTTP 1.1 vil browseren normaltvis åbne 6 separate forbindelser til serveren, som hver især henter 1 fil ad gangen. Browseren er nødt til at vente på at serveren er helt færdig med at sende en fil, før den kan bede om den næste og de mange små filer kommer til at stå i kø og vente på hinanden. Det giver en masse spildtid og dårlig udnyttelse af forbindelsen.

I HTTP/2 åbnes kun en enkelt forbindelse hvor browseren ikke behøver at vente på at modtage en fil, før den kan bede om den næste. Alle filerne sendes over den samme forbindelse i en lang, ubrudt strøm, hvorved hele båndbredden udnyttes.

Hvis man er teknik-interesseret kan man læse mere om HTTP/2 her: https://developers.google.com/web/fundamentals/performance/http2

Optimering

Vi har også gennemgået og optimeret al grafikken på sitet. Totalt set er størrelsen af vores samlede billedmateriale reduceret med over 30% uden at det er gået ud over kvaliteten.

I gennemgangen af vores server-konfiguration fandt vi desuden en fejl, som gjorde at vores javascript-filer ikke blev komprimeret inden de blev sendt. Det har vi fået ordnet, og det giver endnu en reduktion i mængden af data, der skal overføres, når man besøger sitet for første gang, eller når vi har lavet ændringer.

Resultatet

Alle disse ændringer er indført en ad gangen i løbet af den seneste måneds tid. Tilsammen har de resulteret i en væsentlig forbedring af responstiden på sitet, især over mobilforbindelser. Vi har brugt et automatiseret test-værktøj fra Google, som simulerer en middelmådig mobiltelefon over en langsom 3G-forbindelse. F.eks faldt tiden for at vise forummets forside med denne simulerede mobiltelefon fra 7 sekunder til 3,5.

Den største forbedring så vi på stadioneditoren, som henter et meget stort antal billeder og scripts. Der har vi skåret over 4MB af den samlede fil-størrelse, og HTTP/2 kommer virkelig til sin ret på den side på grund af det meget store antal billeder, der hentes.

På de fleste sider er vores performance-score i testværktøjet fordoblet eller tredoblet, men der er stadig rigtigt mange ting, vi kan optimere på. Hele processen har været utroligt lærerig og spændende, og har resulteret i en alenlang opgaveliste, som vi tager fat på efter Ungdomshold er udgivet.

Hvad med Ungdomshold?

I skal selvfølgelig ikke snydes for et lille smugkig på Ungdomshold.

Herunder er vores første version af det, vi kalder for vores ungdoms-dashboard.

Det stod hurtigt klart at det ville blive for rodet og uoverskueligt hvis ungdomsholdets kampe, spillere, taktikker osv. skulle flettes ind på de samme sider som seniortruppens. Derfor får alting relateret til ungdomsspillere sin helt egen sektion.

Meningen med ungdoms-dashboardet er at give dig den vigtigste information omkring dit ungdomshold ved et enkelt øjekast. Vi vil løbende vende tilbage og reevaluere denne side, efterhånden som vi får testet gameplayet af og hvis nogen får en genial ide til et info-panel, der bare skal være der.

Sektionen "Interessante spillere" er nok den vigtigste på siden. Meningen med den er, at give dig notits om de ungdomsspillere, der skiller sig særligt ud af den ene eller anden grund.

Det vil f.eks være spillere, som træner særligt godt eller skidt, og som du måske kunne overveje at sælge eller fyre. Panelet viser også spillere, som er sure fordi de ikke får nok spilletid. Hvis en anden klub sætter en af dine spillere på deres ønskeliste, vil de også optræde her.

Vi overvejer også at lade jer konfigurere og tilpasse indholdet på siden selv. Det kommer dog ikke med i første version, men hvis der er stemning for det, vil vi kigge på det efterfølgende. Som jeg har nævnt, så er planen at vi først udgiver en version, som indeholder de dele, som skal gøre funktionen brugbar. Derefter vil vi bruge et par måneder på finpudsning og udvidelser, efterhånden som vi alle får prøvet Ungdomshold af og fundet fejl, mangler og ønsker.

I mit næste blogindlæg vil jeg fortælle om hvordan vi har tænkt os at udføre den gigantiske data-migrering, der skal til for at understøtte Ungdomshold.