Kmom02: Frontend

Vi tittar på hur vi kan använda JavaScript ramverk på klientsidan för att skapa en Single Page Applikation (SPA) som pratar med servicen från kmom01.

Vi utvärderar vilka möjligheter vi har vid val av ramverk och väljer det ramverk, som efter noggrant studerande står som vinnare.

Vi fortsätter även att bygga vidare på vår backend och lägger till möjligheten för att autentisera sig med hjälp av JSON Web Tokens (JWT) och skapa redovisningstexter med hjälp av API anrop.

Tänk dig in i rollen som systemarkitekt på ett företag där du är den som gör teknikvalen till nästa projekt. Du skall göra teknikval som hela ditt utvecklargäng sedan skall använda. Tänk så, det blir en bra attityd inför kursmomentet. Tänk att kursmomenten går ut på att du skall utvärdera och introducera en helt ny teknik till ditt utvecklingsteam. Är tekniken bra och värdefull? Var kritisk och utvärdera.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läsanvisningar

(ca: 4-6 studietimmar)

#Video

Titta på följande video där John Papa pratar om att välja ett frontend ramverk.

Det finns en videoserie kopplat till kursen, titta på videos som börjar på 2. Videoserien uppdateras varje måndag och innehåller material för att utvärdera tekniker och ge tips & trix för att lösa kursmomenten.

#Material

Kika igenom följande material.

1. Angular ger dig en översikt och där hittar du dokumentationen som du vill läsa igenom.

2. Mithril ger dig en översikt och där hittar du dokumentationen som du vill läsa igenom.

3. React ger dig en översikt och där hittar du dokumentationen som du vill läsa igenom.

4. Vue ger dig en översikt och där hittar du dokumentationen som du vill läsa igenom.

#Övningar & Uppgifter

(ca: 6-14 studietimmar)

#Övningar

Gör följande övningar, de behövs normalt för att klara uppgifterna.

1. Jobba igenom artikeln “Frontend ramverk” för att bekanta dig ytterligare med frontend ramverk och fyra stycken exempelprogram.

#Uppgifter

Följande uppgifter skall utföras och resultatet skall redovisas via me-sidan.

1. Gör uppgiften “Autentisering med JWT och bcrypt” för att bekanta dig med tekniker för autentisering och möjlighet till att skapa redovisningstexter med hjälp av API anrop.

2. Gör uppgiften “Me-sida i ditt valda ramverk”. Där du bygger en frontend till API:t du skapade i detta och föregående kursmoment.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Lägg extra tid på skrivandet i detta inledande momentet då redovisningstexten är mer omfattande än du är van vid.

Se till att följande frågor besvaras i texten:

• Vilket JavaScript-ramverk valde du och varför?
• Hur gick det att sedan implementera din me-sida i ramverket?
• Vilka fördelar ser du med ett JavaScript ramverk jämfört med vanilla JavaScript?
• Vilka lärdomar gjorde du dig när du implementerade autentisering med JWT på servern?
• Vad är din TIL för detta kmom?

Har du frågor eller funderingar så ställer du dem i forumet.

#Revision history