Många av sajterna vi på Bazooka bygger och lanserar idag har mellan 40 och 60 procent mobil- och surfplattetrafik. Denna siffra växer för varje år och skvallrar om en tydligt pågående trend; vi rör oss mer och mer åt att sköta våra digitala ärenden via surfplattor och smartphones, snarare än via vanliga datorer.

Många enheter

Tyvärr är det handhållna enhetslandskapet väldigt fragmenterat. Det finns huvudsakligen två plattformar för smartphones och plattor – iOS och Android. Men dessa operativsystem finns i dag i många olika versioner för en drös olika skärmstorlekar med en drös olika webbläsare. När det gäller Android kan en version dessutom skilja sig väsentligt mellan olika tillverkare. Med andra ord blir det ett väldigt tidskrävande arbete att testa sajter, då respektive sajt ska surfas igenom och klickas i på många, många olika enheter (ofta i emulatorer, vilket gör processen ännu långsammare).

I strävan efter att hela tiden bli bättre (och effektivare!) på vad vi gör har vi därför byggt ett häftigt och snyggt (och praktiskt!) verktyg för att testa de responsiva sajterna vi bygger – Bazookas Devicewall!

Animerad gif på device wallen

Den snygga  (vi sa att den är snygg va?), rullbara väggmöbeln har den snickrande rums- och möbeldesignern Malin Kent specialbyggt på uppdrag av oss. Vi rekommenderar varmt Malin för alla era excentriska och esoteriska möbelbehov! (nå henne på malin.kent@gmail.com).

Device wall - work in progress

Mjukvaran för väggen har vi utvecklat själva (såklart, det är ju det vi gör!). Den tillåter oss att få upp vilken sajt som helst på alla enheter på väggen och sedan surfa runt synkroniserat mellan enheterna – klick som sker på en enhet (eller i administrationsgränssnittet) sker på alla enheter samtidigt.

Resultatet är en “enhetsvägg” vi lätt kan rulla bort till en arbetsplats för testning och utveckling, eller in i ett konferensrum för att hålla en demonstration för våra kunder. Fiffigt va?

Det tekniska

För den tekniskt nyfikne kan vi berätta att back-endet för demoläget på väggen är byggt med Nginx/Node/Express/BrowserSync som genom en salig härva av proxyanslutningar får allt att gå runt. Front-endet är byggt med React och Mobx och den tjusiga skärmsläckaren är gjord med WebGL.

Skärmsläckare

För att kunna felsöka och inspektera koden på varje enskild enhet använder vi verktyget Ghostlab. Ghostlab startar upp en utvecklingsserver lokalt på din maskin, som antingen läser filer lokalt eller proxar dig vidare mot en stage-server eller liknande. Väggmjukvaran synkroniserar därefter enheterna mot denna utvecklingsserver. Resultatet är en synkroniserad utvecklingsmiljö med inspektionstillgång till alla enheter på väggen (samt möjligheter att exekvera script, ta screenshots m.m.) – allt från din egen utvecklingsmaskin.

Framåt

Just nu är mängden enheter lite skral – planen är att kontinuerligt utöka med nya enheter och också byta ut enheter emellanåt; detta för att spegla de vanligaste enheterna på marknaden just nu. Vi kommer också att finslipa och vidareutveckla mjukvaran i sann agil anda.

Nyfiken? Hör av dig till hej@bazooka.se om du vill kika närmare på vår nya favorit – vi demar den gärna!