Tessins teknikavdelning ser till att användarupplevelsen och all teknik bakom Tessin.com fungerar och utvecklas i rätt riktning. Det är teknikavdelningens arbete som gör det möjligt för er att bläddra bland projekt, reservera andelar och investera genom plattformen. Idag gästas bloggen av Tessins Head of Research: John Leidegren, som berättar om arbetet bakom Tessin.com och tekniken som skapar användarupplevelsen på plattformen.

En fråga som jag får ofta är vad använder ni för teknikstack? Med det här menar man vilka verktyg, programvaror, plattformar bygger ni Tessin.com med? Jag är stolt över det faktum att vi har en väldigt bred teknikstack. Vi är inte jätte intresserade av en specifik teknik utan försöker välja teknik med omsorg efter vilket problem vi försöker lösa.

För snart två år sedan påbörjade vi vad som idag jag tycker är en riktigt häftig teknikplattform och vi har lärt oss väldigt mycker på vägen. Jag tänkte ta det här tillfället och prata lite om hur vi jobbar, vad vi försöker uppnå och vad vi vill kunna göra för er som använder vår plattform.

Vi har under en längre tid jobbat på att internationalisera Tessin varpå några av er kanske noterat att ni inte längre kommer åt Tessin via tessin.se utan nu går in på tessin.com/sv/. Det är bara en del av teknikavdelningens internationaliseringsarbete som användaren knappt märker av, vilket också är syftet och indikerar på ett lyckat utvecklingsprojekt.

Ur friktionen i utvecklingsprocesserna föddes nya idéer

För er som är bekanta med webbutveckling så använde vi oss ursprungligen av webpack, React.js och Redux. Med dessa tre verktyg kan man åstadkomma väldigt mycket och under en period så rullade det på bra.

Vi lärde oss dock att när vi sjösätter ny kod, dvs, släpper ny funktionalitet eller fixar problem med plattformen, blir upplevelsen för våra användare inte alltid friktionsfri. Vi gjorde så gott vi kunde men tekniken som så kunde inte riktigt leva upp till våra förväntningar så när vi också bestämde oss för att gå mot ett göra Tessin till ett publiceringsverktyg föddes en ny idé.

Ca tre veckor in i det arbetet befann vi oss på programmeringskonferensen Nordic.js 2018 och jag hade lyckats lura någon att ge mig 5 minuter på scen för att prata om vad vi höll på med.

Det var förstås lite nervöst och prata om en helt ny teknik framför 800 erfarna webbutvecklare men det hela gick ändå ganska ok. Vad jag insåg dock var att jag lyckades nog inte riktigt betona vikten av hur vi ändrar på problemställningen.

Ni förstår, när vi skriver kod så talar vi om för datorn på ganska hög detaljnivå vad den ska göra och datorn följer instruktionerna. Om vi vill att datorn ska göra något annat, då får vi gå tillbaka och ändra koden. Vi måste också gå igenom testprotokoll samt sjösätta den nya koden i vår server park. Inte jättekonstigt i sig, men om koden istället för att innehålla en massa detaljer om vad den ska göra, även får instruktioner i form av data så kan vi istället med data tala om för datorn vad den ska göra. Genom den metoden slipper vi en massa testarbete och "deployment" strul.

På det här sättet byggs alla storskaliga TV och datorspel idag och även om det är interaktiva simuleringar med massor med data så är ett publiceringsverktyg inte annorlunda i sig från det. Det ska också ta information i form av data och presentera det på webben. Det här är vad som ligger till grund för vår teknikplattform. Vi tar vår kod och gör den till data som vi sedan kan återanvända i vårt utvecklingsarbete.

Återanvändbar data hämtad från grannen

Vi har i samband med det här valt att gå över till att jobba med något som heter TypeScript, eftersom dess kompilator (programmet som översätter texten vi skriver, till instruktionerna som datorn utför) är utbyggbar. Vi kan alltså skräddarsy de verktyg som vi jobbar med så att koden blir mer betydelsefull för oss. Kod blir till data som går att återanvända.

I samband med det här så har vi också gått bort ifrån webpack eftersom det verktyget inte riktigt har stöd för hur vi i slutändan gör så att Tessin.com funkar på din enhet. Vi paketerar idag vår applikation så att endast det du ser är vad som finns på din dator, inte allt som du kan se. Det här kallas på teknikspråk för "code splitting" och vi är väldigt bra på det. Det är bl.a. det här som gör att Tessin.com uppfattas som väldigt snabb. När du är inne på en del av sajten så är det bara det du se som laddas hem, inget annat. Allt eftersom du klickar dig runt på siten laddas ytterligare delar hem och varje gång du klickar på något så läggs en del av vår applikation på en server närmare dig. Till slut så hämtas hela Tessin i från din granne. Inte ordagrant men vi använder oss så kallade "content delivery networks" CDNs för att flytta informationen närmare dig. Och ju närmare den ligger dig, ju snabbare går det. Det är inte krångligare än så.

Kodsnuttar som eliminerar manuellt jobb

En annan rolig sak som hänt under 2018 är CloudPad. Vi på Tessin använder ofta ett verktyg som heter LINQPad för att skriva små kodsnuttar för att utföra vad som annars hade kunnat vara en hel del manuellt jobb. Vi är helt beroende av att snabbt kunna skriva lite kod som gör något och sedan sjösätta det omedelbart. Vi kan på detta sätt inom loppet av timmar ta fram lösningar på problem som uppstår i vardagen.

Det här gör vi enklast tack vare en del uppfinnesrikedom och Microsoft Azure. Vi använder oss utav något som kallas Azure Function för att snabbt ta en liten snutt med kod och göra en tjänst av det som vi kan konsumera utan att behöva fundera så mycket på om tjänsten kommer överleva morgondagen. Om resultatet står sig och funktionen förblir användbar så vet vi det och vi kan välja att göra små förbättringar. Men oftast så behöver inte gör det alls. Utan vi löste problemet och gick sedan vidare.

CloudPad är nu inne på sin 2:a iteration och vi funderar just nu på vad vi skulle kunna göra bättre. Vi har idéer och tankar om vad som skulle kunna göras här och vi ser att vi skulle nog kunna göra CloudPad till ett utav av våra allra vassaste verktyg.

Som jag nämnde tidigare så jobbar vi allt mer med att försöka hålla Tessin.com snabb och för att kunna göra det så behöver vi använda dessa CDN. Vi har idag ett ganska omfattande bildarkiv med allt ifrån pressbilder, bilder på våra anställda och marknadsföringsmaterial till projekten. Dessa kan komma i ganska hög upplösning och istället för att vi ska sitta i dyra bildredigeringsprogram så har vi en tjänst som löser även detta problem. Vi kallar den TIX, och den tar helt enkelt originalbilden och anpassar den för din enhet. Ursprungsbilden kanske är fler megabyte men om du sitter på din telefon så ser vi till att skala om bilden, ner till säg en hundradel av originalet. Du märker aldrig detta på din enhet men det går helt plötsligt väldigt fort. Om du sitter på en iPad Pro så får du en bättre bildkvalité för att din enhet klarar av att visa det. Det är på det här sättet vi försöker för bättra Tessin.com för alla som besöker vår sajt.

För den med utvecklarbakgrund så kan ni hitta både CloudPad och TIX på GitHub.com (som Facebook för utvecklare). Vi välkomnar andra att prova våra saker, men även om vi är ett techbolag så är vårt huvudfokus inte open source. Vi gillar open source, använder open source och delar gärna med oss. Vi har dock inte resurserna att underhålla flera open source projekt, vad vi huvudsakligen gör är att vi gör delar av vår källkod tillgänglig för andra att utvärdera och om ni så vill använda i ert eget arbete.

Med vänliga hälsningar,
John Leidegren
Head of Research