← Hem

”Ramverk” är ett ord som används ofta i samband med kod. Så vad är egentligen ett ramverk? När vi pratar om ramverk brukar dessa ramverk vanligtvis delas in i tre olika kategorier – frontend, backend och CSS- eller användargränssnittsramverk. Men även när du vet vad ramverk är, vilket ramverk bör du lära dig eller använda och varför? Det här inlägget kommer att diskutera vad ett ramverk är, vilka ramverk som finns där ute och hur du kan fatta beslut om vilken typ av ramverk du bör använda för dina projekt!

Vad är ramverk

Om vi tittar på ett par olika webbapplikationer kan vi se att det finns en hel del duplicerade funktioner. Många har användarautentisering, sidor som renderar, de ansluter till databaser, de har profiler som man kan titta på, de har alla stiliserade flöden av information osv. Om jag ville skulle jag kunna skriva all denna logik själv varje gång jag vill bygga en ny applikation, men det finns också många verktyg som kan göra det åt oss i stället.

Flera gånger när vi bygger applikationer vill vi dessutom formatera vår kod på vissa sätt som hjälper oss att bli effektivare och hjälper andra utvecklare att förstå vår kod. Webbramverk hjälper oss att uppnå struktur i våra applikationer, och de ger oss ytterligare funktioner som vi kan lägga till utan alltför mycket extra arbete. Ramverk ger oss en plats att börja på så att vi kan fokusera på funktioner snarare än konfigurationsdetaljer.

Kod läses många fler gånger än den skrivs, och det är så viktigt när du arbetar med andra utvecklare att de vet var koden för vissa uppgifter är skriven så att de kan använda den i sin egen kod. Ramverken har också konventioner för hur koden skrivs och struktureras, vilket standardiserar hur utvecklarna skriver sin kod.

De flesta webbplatser har en mycket likartad (för att inte säga identisk) struktur. Syftet med ramverken är att tillhandahålla en gemensam struktur så att utvecklarna inte behöver göra om allt från grunden utan kan återanvända den tillhandahållna koden. På så sätt gör ramverken det möjligt att skära bort mycket av arbetet och spara mycket tid.

För att sammanfatta: det finns ingen anledning att uppfinna hjulet på nytt.

från Awwwards.

Under huven är ramverken bara kodbibliotek (det vill säga andras kod), och de populära ramverken är open source! Så du kan titta på ditt biblioteks kod online!

Backend vs Frontend

• Frontend i en webbapplikation är den del som du ser och interagerar med. Den består av webbdesignen och interaktionen på webbplatsen. När det gäller programmeringsspråk består detta nästan alltid av sidans CSS, HTML och JavaScript.

• Den bakre delen består av servern, databasen och koden som interagerar med dem. Den består också av den kod som ger dynamisk data till webbplatsens front-end. Detta kan hanteras i de flesta programmeringsspråk. De vi främst kommer att diskutera idag är Python, Ruby och Node JavaScript men det finns otaliga andra.

Frameworks för användargränssnitt

Frameworks för användargränssnitt hjälper till att skapa stiliserade och professionellt utformade webbapplikationer. De flesta innehåller någon form av rutnätssystem så att du kan anpassa elementen, de har färgscheman så att det hanteras åt dig och de stiliserar dina HTML-komponenter med hjälp av CSS så att de ser rena och professionella ut. Dessa är inom frontend-domänen, men när vi hänvisar till frontend-frameworks talar vi vanligtvis om JavaScript-frameworks.

En del ramverk för användargränssnitt inkluderar:

• Bootstrap
  • Väldigt välkänt och byggt av Twitter
  • Lätt att lära sig och ser professionellt ut
  • Kan vara lätt att upptäcka ”Bootstrap Sites”
  • Kan vara svårt att anpassa komponenter
• Materialize
  • Renoverat
  • En aning ”roligare” än Bootstrap
  • Mängder av stil- och färgalternativ
  • Följer Googles Material-stilguide
• Foundation
  • Mängder av exempel
  • Proffsigt utseende
• Semantisk gränssnitt
  • Mängder av byggda-in
  • Inbyggda-i teman så den är anpassningsbar
• Grommet
  • Har ett stort fokus på tillgänglighet
  • Ser riktigt snyggt ut
  • Inte lika använt som några av de andra
  • Gjort för React JS (ett annat ramverk som vi kommer att titta på senare)

Välja ett ramverk för användargränssnitt

Välja ett ramverk för användargränssnitt beror främst på personliga preferenser när det gäller utseende och webbplatsens mål. De olika stilarna kan tilltala olika branscher eller förmedla ett annat budskap till användarna.

Frontendramverk

Frontendramverk är i de flesta fall skrivna i JavaScript och är till för att organisera funktionaliteten, interaktiviteten på din webbplats. Några av dessa är t.ex:

• Vue
  • Lätt att lära sig
  • Väldigt snabbt
  • Alla verktyg som är förknippade med det är väl paketerade
  • Tar delar från Angular och React och optimerar dem
  • Mindre utbredd än vissa andra
  • Flexibel. du kan använda den på flera olika sätt
• AngularJS
  • Byggd av Google
  • Väldigt stöd
  • Hög antal funktioner
  • Förbättrar applikationens skalbarhet
  • Svårt att felsöka
  • Stort inlärningskurva
• Angular 2+
  • Byggd av Google
  • Väldigt stöd
  • Förbättrar återanvändbarhet
  • Förbättrar applikationens skalbarhet
  • Lång inlärningskurva
• React
  • Byggd av Facebook
  • Bundlar frontendkoden i komponenter
  • Organiserar kod och data för att göra koden mer återanvändbar
  • Stor inlärningskurva
• Ember
  • Gör en stor mängd funktionalitet out of the box
  • Opinionerad (du måste använda dess formatering)
  • Strap inlärningskurva

Väljning av frontendramverk

Världen av frontendramverk utvecklas särskilt snabbt, Det verkar som om ett nytt frontendramverk dyker upp med några månaders mellanrum. Lär dig vad som är vettigt för dig, och oroa dig inte för mycket för vad som är det ”hetaste” för tillfället.

En del människor hävdar att React och Vue är bibliotek istället för ramverk, men många anser att de är ramverk, så jag tog med dem!

Backend Frameworks

Backendramverken är mycket mer varierade. De är skrivna i en mängd olika programmeringsspråk och har en mängd olika funktioner. Nedan, liksom ovanstående lista, är en mycket ofullständig lista över några av de ramverk som finns för att skriva applikationsbackends.

• Spring MVC
  • Java (svårare språk att lära sig)
  • Väldigt snabbt
  • Mindre åsiktsstyrt
• Django
  • Python. (enklare språk att lära sig)
  • Glatt mellanting mellan att vara mycket åsiktsstyrd och mindre strukturerad
  • Ger dig en hel del funktionalitet från början (t.ex. användarautentisering, databasanslutningar och visningsrendering)
  • Kan vara svårt att integrera en snygg front-end.
  • Pythons datahantering är fantastisk
• Flask
  • Python (enklare språk att lära sig)
  • Mindre åsiktsstyrd och mer anpassningsbar än Django
  • Ger dig mindre out of the box (du måste bygga mer)
  • .
• Ruby on Rails
  • Ruby (enklare språk att lära sig)
  • Mycket åsiktsstyrt
  • Har bra verktyg som scaffolding så att du kan bygga saker snabbt
  • Ger dig mycket funktionalitet out of the box (som användarautentisering, databasanslutningar, och visningsrendering)
  • Asset pipeline hjälper till med front-end utveckling
  • Ruby tar längre tid att köra program än vissa andra programmeringsspråk
• Meteor
  • JavaScript (enklare språk att lära sig)
  • Ger dig en hel del funktionalitet direkt ur lådan (som användarautentisering, databasanslutningar, och visningsrendering)
  • Integrerar sig mycket bra med moderna front-end
• Express
  • JavaScript (enklare språk att lära sig)
  • Mycket anpassningsbart
  • Mycket lättviktigt
  • Mindre byggt-in features
  • Node is very fast

Välja ett backend-ramverk

Oftast, väljer du ett ramverk för backend utifrån det programmeringsspråk som det är skrivet i. Ta också hänsyn till vilka funktioner du vill lägga till – om du till exempel vill ha autentisering (eller användarinloggning) för din webbplats är det mycket enklare att skriva den i Django där autentisering är inbyggd än att skriva den i Flask där du skulle behöva en extra tjänst.

Lär dig mer

Om du vill använda eller lära dig ett ramverk, så finns här ett gäng applikationer som är byggda med olika ramverk, så att du kan utvärdera vilket som är mest vettigt för dig. Det finns många fler ramverk av olika storlek och popularitet, men den här artikeln ger en kort översikt över några av de populära ramverken och var du kan börja. Det finns inget rätt svar på vad du ska lära dig först! Det finns för- och nackdelar med allting, så väga vad som är viktigast för dig och gå därifrån. Ramverk är superhjälpliga och gör att det går mycket snabbare att skriva kod i de flesta fall, men det är också superviktigt att ha en stark programmeringsgrund innan dess – så se till att du kan språket som ditt ramverk är skrivet i väl först. Ramverk är superhjälpliga för att skriva webbplatser eftersom de upprätthåller en struktur som andra utvecklare i ramverket förstår, och de ger dig gemensam funktionalitet så att du inte behöver uppfinna hjulet på nytt!

Var kan man börja lära sig….

• Django Girls Tutorial – Jag lärde mig mitt första ramverk genom deras online-tutorial!
• Code Academy
• TodoMVC
• CodeNewbie Podcast

Och om du behöver en idé till en applikation…

• Grymma app-idéer
• 15+ APP-idéer att bygga för att öka dina kodningsfärdigheter