Uppdrag
Spotlight Stock Market, frontend i React
Spotlight Stock Market, som tidigare hette Aktietorget är en nordisk marknadsplats för tillväxtföretag som grundades 1997. Namnbytet och den nya webbplatsen är en del i de satsningar bolaget just nu gör på den nordiska marknaden.
Limetta var redan i ett tidigt stadium delaktiga i planeringen av projektet som har drivits som ett samarbetsprojekt tillsammans med andra designers och utvecklare. I projektgruppen har Limetta haft huvudsansvaret för frontendutveckling (HTML, CSS, javascript och datahantering mellan backend och frontend).
Vi ville att den rena moderna designen skulle reflekteras även i gränssnittets funktionalitet. Webbplatsen skulle upplevas som snabb med enkla men väl genomarbetade och konsekvent implementerade funktioner. Vi valde därför att bygga alla interaktiva delar som komponenter i React. För datahantering har vi använt Redux.
Mycket information, många funktioner, i realtid
En marknadsplats för värdepapper är bland de mest informationsintensiva webbplatser man kan bygga. Bolagsinformation, nyheter från ett flertal olika källor, kursinformation, grafer, tekniska analyser och så vidare - ofta i realtid.
Vår strategi för att hantera den stora mängden funktioner var att så långt som möjligt bygga små, generella, konfigurerbara komponenter som man sedan kan sätta ihop till större enheter som tillhandahåller de gränssnitt som användaren interagerar med. Man kan likna det vid att skapa legobitar (komponenter) som man kan kombinera i olika byggen - samma bitar, helt olika legofigurer (gränssnitt och funktioner).
Ett exempel på detta är de många sökformulär och filter som finns på webbplatsen. Varje enhet (t.ex. en knapp, en dropdown eller en datumväljare) är en egen komponent. De kombineras sedan ihop till ett komplett formulär som används för att ställa frågor mot Spotlights API:er. Även sättet att presentera information i form av tabeller, grafer eller listor är byggt modulärt. Samma komponenter används överallt på webbplatsen. Resultatet är betydligt kortare utvecklingstid, högre kvalitet och enklare förvaltning.
Tabeller och grafer
Finansiell information ska vara tydlig, rakt på och snabb. De som arbetar med värdepapper dagligen vill inte ha något som står i vägen mellan dem och informationen. De vill bara se och kunna agera snabbt på det som händer på marknaden. Det ställer krav på både design, layout, interaktionsdesign och funktionalitet. Centrala enheter för att presentera finansiell information är tabeller och grafer och Spotlight Stock Market är inget undantag.
Precis som med sökformulär och filter har vi arbetat modulärt med tabeller och grafer. En och samma tabellkomponent kan anpassas, dels efter den information som ska visas, dels efter den konfiguration man vill att den ska ha. Ibland vill man bara ha en kort enkel tabell, t.ex. en lista över de bolag som genomför en split under året. Ibland vill man ha en tabell som är fullmatad med funktionalitet och data, t.ex. en kurslista.
Det samma gäller för grafer. En och samma grafkomponent kan presentera en mängd olika typer av grafer, data i olika tidsintervall och med olika utseenden och färgscheman.
API:er och data i realtid
I stort sett all finansiell information som visas på Spotlight Stock Market kommer från API:er. Limetta hade i detta projekt inte ansvaret för att bygga den bakomliggande funktionaliteten för API:erna, men vi ansvarade för att definiera dataformatet för den data som skickas mellan API:et och gränssnittet. Vi fattade också beslut om vilken funktionalitet som kunde implementeras direkt på klientsidan och vilken som behövde implementeras i backend.
Ett exempel på det är funktionalitet för sortering och färgmärkning av data i tabeller. Eftersom React är så snabbt valde vi att implementera båda dessa funktioner direkt på klientsidan. Komponenten avgör alltså på egen hand om ett värde i en kolumn är positivt, negativt eller neutralt och sätter färgmärkning därefter.
Om Spotlight Stock Market
Spotlights mission är att hjälpa tillväxtbolag att växa. Idag är Spotlight mer än bara ett torg där man kan köpa och sälja aktier utan också en marknadsplats som sätter bolagen i rampljuset.
Besök Spotlight Stock Market