Visby Web Lab #2 2016

Onsdagen den 20:e april anordnades årets andra träff med Visby Web Lab. Denna gång i samarbete med oss på Svenska Spel. 

För ett femtiotal deltagare berättade jag om vår resa från en teknologiskt och upplevelsemässigt föråldrad tjänst, till en modern responsiv tjänst baserad på öppna teknologier.
Emil Öhman följde upp med en djupdykning i den "Styleguide" som skapades under projektet och hur den används i det dagliga arbetet, både av utvecklare och UX/designers.
Max Thourise avslutade med att berätta om sin stora passion, Clojure, och fördelarna med funktionella språk. Han kryddade teorin genom att demonstrera ett spel byggt med ClojureScript

Vår teknologiska resa

Jag började med att berätta om vår tidigare spelsajt baserad på föråldrade teknologier såsom Flash, vilket hindrade oss från att erbjuda samma tjänst för våra mobila användare. Med separat mobiltjänst och föråldrad teknik var det dags att göra om allt från grunden, på en modern plattform. En plattform som tillät en enhetlig tjänst, med fokus på spelupplevelsen, i realtid.

Sagt och gjort. 2012 påbörjades resan och i maj 2014 lanserade vi första versionen av vår nya responsiva spelsajt för mobila enheter. Nya sajten består av flertalet separata webb-appar, helt skrivna i javascript på ett egenutvecklat ramverk för Node.js/Express. På klientsidan används HTML5/CSS3, jQueryBackbone.js med mera. Nyutvecklade REST-API'er med stöd för push via WebSockets används både på servern och i klienten. I februari i år sjösatte vi äntligen de sista delarna och ersatte i och med detta den gamla Flash-baserade sajten för "desktop". 

Parallellt med ny sajt och teknologistack förändrade vi även arbetssättet radikalt. Med hjälp av GitFlow, testautomatisering, nya CI-verktyg och DevOps-satsningar har vi gått från månadsreleaser till löpande kodleverans med lansering mot kund flera gånger i veckan.

Enligt mig är tre av de största tekniska framstegen på webbdelarna i denna omfattande IT-satsning det vi valt att kalla "Device detection", "Feature toggles" samt "Styleguide". 

Device detection används när traditionell responsiv design inte räcker för att anpassa tjänsten för mobil, tablet samt desktop. Vi kan leverera alternativ kod och design till respektive enhetstyp. Det ger också fördelen att hålla ner mängden data som behöver laddas ner, och bearbetas, av respektive klient. I de flesta fall hanteras desktop-datorer och tablets likadant, medans mobiler kräver avvikande hantering. 

Feature toggles används för att löpande leverera delvis utvecklade tjänster och för att undvika beroende mellan kodleverans och lansering mot kund. Utvecklingsteamen använder toggles för att hantera alternativa kodflöden, stilmallar, vyer och tesfall.
När något ska utvecklas som tar längre tid än en iteration, och/eller ska lanseras vid ett senare tillfälle, definieras en ny toggle av teamet. Under utvecklingen skapas även automatiserade tester för att verifiera tjänsten med toggles både "på" och "av". Ansvariga för kundmötet kan sedan välja hur och när levererade tjänster ska lanseras mot kund. När den utvecklade funktionen är lanserad, plockas toggeln samt inaktuell kod och tester bort av teamet. 

Svenska Spels Styleguide höll Emil Öhman en separat dragning om. Hur den används av UX/Designers för att designa en enhetlig tjänst, av utvecklare för att bygga tjänsten, samt som gemensam dokumentation. Emil kommer förhoppningsvis att berätta mer om detta i ett kommande inlägg :)

/Reine Olofsson
Systemarkitekt Webb

Om Tech

Tech-bloggen har vi satt upp för att visa vad vi gör på teknik-sidan inom Svenska Spel. Du kommer att kunna läsa inlägg skrivna av oss som brinner för utveckling, arkitektur och DevOps.  

Mer om bloggen och oss som skriver

Senaste inläggen