mingel på Nordic.js 2016

För tredje året i rad så hölls JavaScript-konferensen Nordic.js i Stockholm den 8-9 September. Denna gång hölls konferensen på Münchenbryggeriet och några av oss på Svenska Spel var givetvis på plats

Årets tema var Wingdings (eller var det katter?) vilket tydligt kunde ses på bl.a. hemsidan,  planscher, och i presentationer, mm. Eventet i sin helhet var välorganiserat och konferenciern Lydia Winters, brand director på Mojang, gjorde ett mycket bra jobb. Alla föredrag strömmades via Viaplay och finns även tillgängliga på YouTube.

Några höjdpunkter som vi tog med oss från konferensen:

Jeremy Keith (Clearleft) - "Resilience: Tried and tested approaches to building robust, flexible, and resilient web experiences."

Jeremy talade om att istället för att gnälla över begränsningar i äldre webbläsare så kan man bygga grundläggande funktionalitet och lägga till features för modernare webbläsare. Att lösa sådant med hjälp av Javascript är alltid riskabelt. Rätt sätt är att utnyttja att HTML och CSS är konstruerade för att vara bakåtkompatibla.

Frans Rosén (Detectify) - "The Smörgåsbord of Web App Hacking"

Frans talade om bug bounties, dvs när företag erbjuder kodare och hackare en belöning för att hitta svagheter i deras tjänster. Det bjöds på härliga historier om svindlande säkerhetshål i välkända tjänster samt dekadenta hackerhelger i Las Vegas där både kod och bubbel flödade.

Ashley Williams (NPM) - "A brief history and mishistory of modularity"

Ashley jobbar på NPM och hjälper utvecklare med frågor som bland annat berör paketering och distribution av moduler till Node.js. Under detta föredrag fokuserade hon kring frågorna, Vad är en modul? Hur stor eller liten bör en modul vara? Vem tjänar på stora/små moduler? Olika fördelar och nackdelar ventileras och varvas med både historia och filosofi, klart värd att se för oss Node.js utvecklare.

Evan You (Vue.js) - "Demystifying Frontend Framework Performance"

Som är grundaren av Vue.js pratade om benchmarking av frontend-ramverk och att det inte alltid är det enklaste. Utan man måste själv prototypa sig fram och bilda sig en egen uppfattning.

Vitaly Friedman (Smashing Magazine) - "Cutting-Edge Responsive Web Design"

Vitalys talk handlade om några små (men användbara!) knep för att bl.a. designa responsiva email, eller hur man på ett smidigt sätt kan skala en fontstorleken utan media-queries!

Lin Clark (Mozilla) - "A Cartoon Guide to Performance in React"

Lin driver hemsidan Code-Cartoons som med enkla streckgubbar illustrerar och förklarar olika ämnen som kan förbrylla den moderna webbutvecklaren. Försöker du ännu förstå hur Redux eller Facebook Flux fungerar? Besök hennes hemsida och se ovanstående Youtube-klipp!

Mattias Petter Johansson (Spotify) - "If you know map, I will teach you monads"

Mattias ledde oss genom functors, map och flatMap mot målet att förklara vad monads är för någonting. På vägen dit fick han även med hur elegant funktionell programmering kan vara,  när man i koden berättar vad man vill göra, inte hur man skall göra det.

Jem Young (Netflix) - "Embracing The Future"

Konferensens sista speaker (och kanske även en av dom bästa). Några av oss missade honom tyvärr då vi var tvungna att åka till Bromma för att ta flyget tillbaka till Visby. Jem höll i alla fall ett riktigt bra talk om JavaScripts framtid och hur man redan idag kan använda den nya tekniken för att bygga grymma applikationer.

David Björklund (Mic.com) - "Pragmatic performance patterns"

Ögonöppnande och mycket användbart. David berättade om sitt arbetsflöde med benchmarking och varför han vill få in det så tidigt i processen som möjligt. Du kan aldrig veta säkert vad som blir resurs tungt i din kod. ”Prepare to be surprised”.

 

/Henrik Östman, Daniel Färnbo, Mats Karlsson, Mathias Sandberg, Pim Lindahl
Systemutvecklare

Svenska Spels styleguide

Svenska Spels styleguide hjälper oss att utveckla snabbare och få en mer enhetlig design över flera olika plattformar.

På vår tidigare sajt hade vi inget bra sätt att dela design och klientkod mellan olika sidor och tjänster. Vilket ledde till att för varje ny tjänst som utvecklades så togs det fram ny design och utvecklarna fick bygga allt från grunden varje gång och la mycket tid på att tolka och översätta design till kod. En annan nackdel var också att sajten fick en väldigt inkonsekvent design och kunde skilja sig mycket från sida till sida.

Nya plattformen

När vi skulle ta fram vår nya tekniska plattform ville vi att det skulle vara enkelt att återanvända funktionalitet och design tvärs över hela sajten. För att det skall vara görbart är det viktigt att det finns en tydlig dokumentation om vilka funktioner som finns tillgängliga, hur de ser ut och fungerar.

Vår lösning blev att ta fram en styleguide där vi kan samla alla återanvändbara komponenter samt dokumentation om hur, när och var de skall användas.
Där hittar man t.ex. knappar, logotyper, ikoner, färger, modaler, menyer och många andra komponenter som vi använder över hela sajten.
Alla komponenter och även färger, ikoner mm har fått egna namn så alla roller i teamen pratar om samma saker för att minimera missförstånd. Istället för att hela tiden kolla i Photoshop vilken färg det skall vara kan vi enkelt berätta att det skall vara färgen stryktipset-500 eller grey-400 så blir det automatiskt rätt färg.

Det är lätt att dokumentation snabbt blir inaktuell om den inte hålls uppdaterad. Därför har vi valt att dokumentation är en del av varje komponent så kod och dokumentation är samlat på samma ställe. Sedan sammanställer vi alla komponenters dokumentation som tillsammans bildar vår styleguide. Eftersom dokumentationen är en del av plattformen så kan komponenterna köras live i styleguiden precis som på sajten. På så sätt går det alltid att se exakt hur en komponent ser ut och fungerar från styleguiden vilket vi har upplevt som en stor fördel när vi utvecklar nya och gör justeringar i komponenter.

I styleguiden går det också att ladda ner alla logotyper, typsnitt, ikoner och övriga spritemaps så dom enkelt kan användas på andra plattformar såsom iOS och Android.

Just nu är vår styleguide endast tillgänglig internt men målet är att öppna upp den publikt så våra partners som utvecklar sidor åt oss också kan ta del av alla våra komponenter och designriktlinjer.

/Emil Öhman
Systemutvecklare

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

Arkiv