Webbserverprogrammering02 [wesweb02]

Moment02 - Applikationsarkitektur & kodoptimering

Introduktion

Vi skall i detta moment kika på applikationsarkitektur och kodoptimering vilket både handlar om hur vi planerar hela vår webbsite men också hur vi jobbar på kodnivå för att få ut stabila applikationer som är så snabba som det bara är möjligt.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Webbserverns och dynamiska webbplatsers funktionalitet.
  • Utvecklingsprocessen för ett webbtekniskt projekt. Målsättningar, planering, systemering, kodning, optimering, dokumentation och uppföljning.
  • Dokumentation av utvecklingsprocess och färdig produkt, inklusive kod och mjukvarugränssnitt.
  • Funktionen i ett programmeringsspråk för dynamiska webbplatser.
  • Kodning och dokumentation enligt vedertagen praxis för den teknik som används i sammanhanget.
  • Applikationsarkitektur och separation av olika slags logik.
  • Kvalitetssäkring av dynamiska webbapplikationers funktionalitet, säkerhet och kodkvalitet.

Applikationsarkitektur

Applikationsarkitektur innebär att skapa en plan för olika delar av en applikation skall byggas ihop och hur de olika teknikerna skall jobba tillsammans. Vi har tidigare pratat om hur vi låter html ta hand om webbsidans struktur, hur php bygger upp strukturen dynamiskt, hur vi använder bl.a. databaser för att lagra data, hur css styr utseendet samt hur olika klientscript tar hand om det vi kan göra på en webbsida när den är laddad och kan köras som en egen applikation i webbläsare. Vi kikar inom webbutvecklingskurserna på olika ramverk, tex. Bootstrap, som hjälper oss med färdiga mallar för att åstadkomma det vi vill göra.

Om vi går ner ytterligare en nivå och kikar på PHP så kan vi dela upp koden i flera olika tekniker, vi använder oss bl.a. av funktioner och mindre filer som vi inkluderar vid behov, allt detta för att få en bättre struktur på hur vår applikation byggs ihop. Vi kommer i detta moment kika på template som hjälper oss att bygga en enkel ram för alla våra webbapplikationer som vi snabbt kan återanvända. Vi kommer senare i kursen kika på hur vi med objektorientering kan strukturera upp våra webbplatser än med och med objektorientering som grund kommer vi också jobba lite med MVC senare i kursen. Allt detta kommer ge oss en bättre förståelse för hur vi kan utnyttja applikationsarkitekturen för att skapa effektivare applikationer på kortare tid.

Något som angränsar till detta område är att sätta kodregler för hur vi kodar, dels för vår egen skull så att vi kan jobba bort inkonsekventa variabelnamn som $tal1 och $tal_2 vilket gör vårt arbete mycket svårare och vi skapar oss själva problem och error helt i onödan.

Template

Som en del av applikationsarkitekturen så skall vi jobba med en övning där vi bygger en egen template. Gå till applikationen Template för att läsa mer.

Efter att du har kikat på den applikationen så tar du ner alla filer och lägger dem i en mapp på din egen webbserver. Lägg sedan en stund på att kika på koden, gör om strukturen, utseendet eller innehållet om du vill, men lägg inga timmar på det arbetet. När du är klar så har du en egen template som du snabbt kan duplicera och med en färdig mall börja jobba med en uppgift, en ny hemsida eller något annat som du vill göra.

Uppgift

Ändra den template du fick av mig, mycket eller lite, men bygg inte bort någon del av allt som jag har skapat. När du blir van att jobba med template så hittar du egna sätt att koda den på.

När du är nöjd så lägg upp din template på din site, länka från samlingssidan och skriv ett kort inlägg på wordpress där du berättar vad du tycker om detta sätt att jobba, du beskriver översiktligt vad du har ändrat samt länkar till din mapp där din template ligger. Glöm inte att lägga CSource i den mappen.

Kodoptimering

Att optimera kod är viktigt när vi utvecklar applikationer oavsett om de är anpassade för webben eller får någon annan plattform. Kodoptimering ligger på flera olika plan;

  • Snabbhet. Att applikationen skall köras så fort som möjligt är något som användaren förväntar sig. Det är inte alltid säkert att den bästa/snyggaste koden skapar den bästa prestandan, då gäller det att välja bland dessa två. När vi pratar webbapplikationer så brukar det oftast inte finnas mer än mikrosekunder att tjäna vilket har ganska liten betydelse. Men om renderingen för varje utritad bild i ett spel tar 1 millisekund längre tid så blir det en hel del extra datakraft som behövs när detta sker 60ggr/sekund för varje användare och det sitter 100 000 samtidiga användare.
  • Buggfritt. En buggfri applikation har flera fördelar, först och främst så kanske den inte ens fungerar alls om koden är allt för felaktig. Är den lite felaktig så kanske den fungerar men inte riktigt gör vad den skall. När vi bygger webbapplikationer så hjälper webbläsaren oss när vi skriver felaktig html-kod så att den tolkas på rätt sätt. Även om det ser rätt ut så tar det längre tid för webbläsaren att avkoda det vi skrivit om den hela tiden måste tänka och ta beslut om hur koden skall tolkas. Jämför med att läsa en text som har många stavfel och där grammatiken inte är korrekt, det tar längre tid än vanligt.
  • Stabilitet. Att skriva en stabil applikation tar lite längre tid men det är viktigt att ta hand om alla möjliga fel som kan inträffa innan de inträffar. Alla svagheter som finns kommer någon gång att inträffa och kanske tom utnyttjas. Extra känsligt i webbmiljö är input på olika sätt oavsett om det är från filer eller formulär, allt detta måste testas och säkerställas att det inte går att manipulera applikationen.
  • Arkitektur. En tydlig struktur på applikationen minskar risken för att det skapas buggar. Det är också en form av kodoptimering då flera utvecklare samtidigt kan arbeta med samma applikation.
  • Konsekvent namngivning. Att vara konsekvent i namngivningen är viktigt för att en ny utvecklare skall kunna gå in och ta över eller fortsätta utvecklingen med ditt projekt. Det underlättar också ditt arbete, behöver du fundera på vad en eventuell variabel eller funktion kan heta så har du döpt den på ett felaktigt sätt.

Tips på optimerad kod

Att optimera kod är en mycket djupare vetenskap än vad vi hinner med att jobba med i denna kursen, men här följer några videoklipp på saker som kan vara bra att tänka på för att skriva bättre kod. Vi kollar på några filmer i CodeCourse playlist om PHP Best Practice.

PHP Tags, CodeCourse

Sanitising Output, CodeCourse

Consistency, CodeCourse

Uppgift kodregler

Du skall i ett inlägg på wordpress skriva ner dina egna kodregler.
Lägg särskilt märke till hur du jobbar med namn när det är flera ord som du vill använda, fyra vanliga alternativ för att skriva ihop ord finns; camelCase, PascalCase, snake_case eller kebab-case.

Skriv en kort text om hur du funderar och se också till att på något sätt presentera hur du kommer jobba med följande typer av namn, ge gärna exempel på hur namnen skall skrivas, både korta och längre namn med flera ord.

  • filnamn
  • namn på kataloger/mappar
  • variabelnamn
  • namn på funktioner

Senare kommer vi bygga på denna lista, det kommer bli din guide som du skall följa. Vem vet, kanske kommer jag bedöma ditt arbete utifrån att du följer dina egna riktlinjer.

Uppgift kodoptimering

Micro Optimisation, CodeCourse

I följande film så kör presentatören ett resonemang om hur olika koder som gör samma sak kan ta olika lång tid att köra.

Det han säger är att foreach inte skall användas eftersom det är en långsammare kod än for-loopen. Han säger att han inte orkar testa om det stämmer, så det får du i uppgift att göra.

Kraven är följande;

  • Bygg en applikation utav din template som du gjorde tidigare.
  • Koda enligt de regler som du bestämde i uppgiften kodregler.
  • Skapa en array med många komponenter, det spelar ingen roll vad den innehåller men det enklaste är att fylla den med tal, uppräknade eller slumpade spelar ingen roll.
  • Mät sedan tiden det tar att loopa igenom hela arrayen med foreach respektive for, vad du gör inne i loopen spelar ingen roll så länge du utför samma arbete. Tiden mäts lämpligen med funktionen microtime().
  • För att kunna säkerställa att ditt resultat är ok och inte har påverkats av något särskilt vid en enskild körning så bör du köra testet flera gånger.
  • Analysera resultatet och dra en slutsats om presentatörens åsikt är den rätta.

Tips! [klicka för att dölja/ visa]

Steg för steg hur du kan lösa uppgiften;

  • Skapa en array, fyll den sedan med komponenter, minst 5000st. Fyll varje komponent med räknaren. [kodtips] Bild med kod
  • Bestäm vad du vill göra inne i loopen, summera alla tal, räkna samman alla värden, eller ingenting? Det viktigaste är att du gör exakt samma sak vid båda jämförelserna. OBS: Skriv inte ut något, det tar onödig tid och gör att din sida blir svår att läsa. [kodtips] Bild med kod
  • Använd funktionen microtime() för att göra ett timestamp, på mikrosekundsnivå. Du gör ett anrop före loopen och ett efter loopen, när du sedan tar skillnanden mellan dessa värden så vet du hur lång tid själva operationen tog. [kodtips] Bild med kod
  • När du har gjort samma beräkning på den andra loopen så tar du två värden som du kan jämföra. Tänk på att trots att mikrosekund är ett litet tal så kan det vara många nollor i början av decmaltalet. Om det är det varje gång så multiplicera gärna med 100, 1000 eller någon anann storhet så att det är lättare att läsa och jämföra. Vi skall ju inte mäta hur lång tid det tar, vi skall mäta skillnaden mellan looparna.
  • För att få validitet i undersökningen behöver du upprepa den några gånger, jag skapade en loop som gjorde hela programmet 10 ggr, då är det lättare att ta ställning till resultatet.[kodtips]
    Bild med kod
    Bild från applikation

Redovisning

Lägg nu upp alla uppgifter på din domän och skriv ett inlägg på din wordpressida med tydliga länkar till de olika delarna.