Mjukvaruarkitektur - Visualisering/Visualisering GitHub Wiki
Övergripande
Projektet innebär två separata delprojekt. Ett för backend och ett för frontend. Detta för att underlätta arbetet med att bygga fristående och anpassningsbara system.
Frontend
Arkitekturellt signifikanta krav
- Projektkrav #2 Struktur
- Kundens önskan att få ett modulbaserat system ställer stora krav på strukturering.
- Kvalitetskrav #1 Open source
- Ställer krav på val av projektets komponenter
- Kvalitetskrav # 2 Prestanda
- Påverkar valet av teknik
Bibliotek
- React
- Redux
Filstruktur
.
├── index.html
├── spec # Automated tests
└── src
├── actions # Actions to manipulate the state tree
├── components # React components, one for each visualization
├── pages # Each page consists of one or many components
├── store # The redux datastore related code
├── utils # Helpers and general utilities
├── constants.js # Constants used in the system
├── index.js # Main entrypoint
└── routes.js # React routes exposing visualization pages
Implementation
All data ska hanteras genom en immutable datastore skriven med hjälp av bibliotektet Redux. Data skickas in i varje React komponent som ansvarar för rendering av ett korrekt element. Komponenterna i sin tur kan använda olika bibliotek. Varje visualisering skall vara fristående. och placeras i "components" mappen. För att kombinera visualiseringar byggs en komponent som i sin tur använder de relevanta komponenterna. En komponents eventuella inställningar ska läsas in som props och lagras i en separat fil för inställningar. Frontenden har routes som visar olika sidor. Varje sida består av en eller flera visualiseringskomponenter och har som uppgift att tillgodo se en skärm samt en enkel sida för inställningar.
Konsekvenser
Den valda strukturen främjar ett enkelt dataflöde där state hålls väldigt kontrollerat och på så sätt underlättar arbetet med den data som systemet använder sig av. Komponenter blir fristående och det API som exponeras blir väldigt enkelt. Eftersom data bara flödar i en riktning blir systemet enkelt i sin uppbyggnad och funktionalitet samlas på ett ställe.
Insteget för nya utvecklare blir (med grundläggande kunskap om react) väldigt litet då man enkelt kan komponera sina egna komponenter och enkelt koppla upp denna mot en fristående datakälla. Även sammansättningen av nya sidor blir enkel då komponenterna inte är beroende av varandra och lätt går att kombinera.
Backend
Arkitekturellt signifikanta krav
- Projektkrav #2 Struktur
- Kundens önskan att få ett modulbaserat system ställer stora krav på strukturering.
- Kravlista #1 API-användning
- Kundensönskan ställer krav på att arkitekturen underlättar utökning med nya API.
API
- Github
Bibliotek
- Node.js
- npm
- ws
- Octonode
- Githubs egna bibliotek.
Implementation
Varje extern tjänst skapas som en fristående service som hanterar en av de uppgifter vi vill arbetar med. Denna service ansvarar för att hämta relevant information från lokala källor eller externa tjänster.
Processors är ansvariga för att ta fram data för till en klientkomponent (Som givetvis går att återanvända). Tanken är att förbereda data så klientens olika komponenter enkelt kan efterfråga just den information som den kräver. Detta för att försöka koncentrera den databehandlig som krävs på ett ställe för att underlätta informationsflödet och samla detta på en plats.
Konsekvens
Varje del av systemet blir en fristående enhet med få beroenden. Detta underlättar justering och utökning. Hantering av extern data blir uppdelad och går med enkla medel att plocka ihop för att sammanställa relevant data.
Filstruktur
.
├── app.js # Main entrypoint
├── datasets # Static datasets used for caching and persistent storage
└── src
├── data-processors # Modules responsible of preparing data for one type of frontend component
├── lib # Utilities and tools used by other parts of the system
├── services # Services handling one type of information or datasource
└── store # Redux related code