Ramverk

Ett ramverk är någonting som bidrar med funktioner och struktur som en utvecklare kan använda i mjukvaruprojekt. Olika ramverk gör givetvis olika saker men vanligtvis bidrar de med generisk funktionalitet som underlättar mjukvaruutveckling då utvecklaren inte behöver bygga allting från grunden [31]. Utöver det är de flesta populära ramverken väl testade och optimerade.

B.3.2.1 Bootstrap

Bootstrap är ett ramverk utvecklat av Twitter och är idag det mest populära när det kom- mer till bibliotek av frontend-komponenter [32]. Det bidrar med en mängd CSS-klasser och innehåller inte bara basala stilmallar utan har även mer komplexa och välutvecklade design- mönster. En av Bootstraps huvudattraktioner är att det är flexibelt och fungerar till många unika designbehov [33]. Det är också väldigt omfattande och gör att mjukvaruutvecklare inte behöver arbeta med CSS aktivt för att kunna få önskvärda grafiska resultat [34].

Bootstrap har också stor fokus på mobilapplikationer. Utvecklarna bakom Bootstrap kon- staterar tydligt att det ska vara responsivt och mobile-first [32].

Utöver det är Bootstrap ett ramverk med öppen källkod och finns tillgängligt på GitHub1_.

Någonting som medföljer detta är att det faller under MIT-licens vilket då tillåter utvecklare att använda och distribuera arbeten som använder Bootstrap gratis.

B.4. Metod

B.3.2.2 Material-UI

Material-UI är ett ramverk som inte endast omfattar CSS utan även HTML och JavaScript. Detta gör att komponenterna som Material-UI bidrar med också kommer med betydande funktionalitet. Ramverket härstammar från Material Design som är ett designspråk utvecklat av Google och förenar React med Material Design. Material-UI är ett av de mer populära ramverken och har även öppen källkod [35]. Likt Bootstrap har Material-UI ett stort urval av komponenter som kommer med färdiga stilmallar vilket gör att utvecklare inte behöver lägga stor vikt på utformningen i sig. Utöver det fungerar komponenterna självständigt och tillämpar endast de stilmallar som behövs för att visas [36].

B.3.2.3 React

React är ett modulärt ramverk skrivet i JavaScript, som används för webbutveckling av klien- ter. Utvecklaren skapar React-komponenter, som kombineras på olika sätt för att gemensamt utgöra en hemsida som användaren kan interagera med. Varje komponent genererar HTML- baserat på programmets tillståndsvariabler, och har därav alltid en visuell aspekt. När föränd- ringar av programmets tillståndsvariabler sker så ritas de komponenter som berörs om, så att det visuella alltid reflekterar det interna tillståndet.

B.4 Metod

I detta kapitel beskrivs metoderna som användes för att hämta teorin nödvändig för att besvara frågeställningarna samt för att komma fram till resultatet.

B.4.1 Litteraturstudie

För att söka information och kunna besvara frågeställningarna har en litteraturstudie genom- förts. Huvudsakligen har sökmotorerna Google, Google Scholar och IEEE Xplore används för att hitta artiklar, e-böcker och allmänna informationssidor. Google användes för att hitta mer allmän information medan Google Scholar och IEEE Xplore användes för att hitta e-böcker och publicerade artiklar. Allmän information hämtades mestadels från ramverkens officiella hemsidor och från blogginlägg från ramverkens utvecklare. Urvalet för vilka sökträffar som an- vändes gjordes genom att utvärdera hur relevanta och pålitliga de var. Sökträffarna gällande ramverkens inlärningskurvor var få vilket ledde till att källorna oftast bara kunde jämföras med en annan. Utifrån det valdes den källan som ansågs mest relevant för arbetet.

Följande punktlista innehåller de söksträngar som användes: • bootstrap • twitter bootstrap • material-ui • bootstrap vs material-ui • material design • framework • ramverk • css • css framework • react • react-bootstrap

B.4.2 Egna erfarenheter

De egna erfarenheterna har till största del använts för att besvara frågeställning 2. Denna me- tod har inte varit centrum för arbetet som helhet utan var till för att bidra med ytterligare ett perspektiv. Eftersom Bootstrap användes i projektet finns egna erfarenheter om inlärningskur- van också och dessa användes försiktigt då egna erfarenheter om Material-UI:s inlärningskurva

B.5 Resultat

I detta kapitel redovisas resultatet från den litteraturstudie som har genomförts samt de egna erfarenheterna.

B.5.1 Ramverkens inlärningskurvor

Den första punkten som är starkt kopplad till inlärningskurvan är dokumentationen och hur pedagogisk den är. Både Bootstrap2 _{och Material-UI}3 _{har välstrukturerade dokumentations-}

sidor med omfattande information som redovisar de olika komponenterna med kodexempel. Båda dokumentationssidorna integrerar också komponenterna vilket gör att läsare lättare kan utforska och testa de komponenter som denna önskar. Sammanfattningsvis är dessa sidor överlag snarlika och redovisar innehållet näst intill identiskt vilket syns i Figur B.1 och Figur B.2.

Utöver dokumentation är komplexiteten hos ramverken givetvis också en viktig aspekt. Bootstrap har överlag mer färdigbyggda komponenter, exempelvis en knapp, som för en oerfa- ren frontend-utvecklare är lättare att integrera i dennes designlösning [37]. Material-UI behöver mallar för samma funktionalitet och kräver därför mer hänsynstagande vid implementation [38]. Skillnaden här är dock inte stor och många komponenter kan implementeras på väldigt liknande sätt.

Figur B.1: Bootstraps dokumentation om komponenten Buttons

B.6. Diskussion

B.5.2 Egna erfarenheter

Utifrån de egna erfarenheterna har Bootstrap varit användbart och bidrog med det mesta av den funktionalitet som önskades i projektet. Tiden som krävdes för inlärningen av Bootstrap var inte orimlig och hindrade inte utvecklingen. Den funktionalitet som önskades var mesta- dels diverse knappar och rullgardinsmenyer (drop-down menus). Någonting som önskades men saknades var en ordentlig tidpunktsväljare likt en som Material-UI har, se Figur B.3.

Figur B.3: Material-UI:s tidpunktsväljare