Nikola Pantic 
Jade_utveckla

Ibland kan det hända att man befinner sig i en situation där man behöver utveckla ett par olika webbsidor för sina ändamål, men där samtliga webbsidor skall ha samma grundstruktur, stil och tekniker, exempelvis samma grafiska profil och logotyper. Vad som då kan komma till nytta är en form av mall (template), som uppfyller webbsidans grundgrav, att utgå ifrån och som man därefter bygger på för att nå sitt slutligt önskvärda resultat. Att ha en mall att utgå ifrån sparar mycket med tid då det tunga grundarbetet redan står färdigt att användas samtidigt som valbara element kan förbli konsistenta mallen igenom. I detta fördjupningsarbete tänker jag gå igenom om hur man kan skapa en så kallad “webbsidemall”, en mall att bygga hemsidor på. Häng med och häpnas!

Detta fördjupningsarbete kommer behandla hur man kan skapa en återanvändbar mall med hjälp av Jade, och inte lära ut språkets grunder och hur det används. För att hänga med och ha full förståelse för detta fördjupningsarbete krävs därför förkunskaper i mallspråket Jade.


En mall – Varför?

En mall, benämnd på engelska som “template”, är generellt sett en fördefinerad struktur/upplägg att utgå ifrån när man vill skapa något. Det kan vara allt från ett dokument att fylla i uppgifter på och utveckla, till ett fungerande system att konfigurera och sätta i bruk (TechTerms, n.d.). Vad som är huvudsyftet med en mall är att användaren skall kunna ta en kopia av en befintlig mall, som uppfyller kraven för vad som skall göras, och sedan arbeta vidare på denna för att spara tid, resurser och andra kostnader som kan uppstå, samtidigt som standarder och andra fördefinerade element bibehåller en kontinuitet för alla vidarearbeten som baserats på just den valda mallen. Om vi vet att vi skall bygga ett par olika artefakter som skall ha en och samma grund så är därför en mall att utgå ifrån optimalt.

Att designa en mall

När det väl gäller att designa en mall som sedan ska återanvändas åter och åter igen gäller det att ha utrett många frågor kring struktur och innehåll. Vad för typ av hemsida skall byggas från denna mall, en statisk eller dynamisk? Vem skall kunna använda mallen, vilka förkunskaper krävs? Vilka funktioner är kritiskt nödvändiga, vilka är önskvärda och vilka är inte lämpliga? Precis som Löwgren & Stolterman (2012, s.102) nämner handlar det om att skapa en komposition, en helhet av delar, gällande funktion, etik och estetik. Genom att arbeta med hjälp av en funktionsanalys kan man specificera vad produktionen ska innehålla för funktioner och göra, men inte hur den skall göra det (Löwgren & Stolterman, 2012, s.103).

Exempel på funktionsanalys för funktioner kring en webbsidemall enligt detta fördjupningsarbete:

Funktion Klass Kommentar
Återanvändningsbar webbsidemall Nödvändig huvudfuntion, artefaktens bärande idé.
Reglera innehåll (HTML) Nödvändig kunna reglera vad varje produktion från mallen ska inkludera.
Reglera estetik (CSS) Nödvändig kunna reglera och förändra produktionens estetik och utformning.
Stödja användning av andra Önskvärd andra, oinsatta, skall kunna använda produktionen.

Det är många designbeslut som måste tas i planeringsstadiet eftersom en mall skall agera som en grund för kommande påbyggnader, vilket kräver en solid, fungerande och logisk struktur – en påbyggnad kan aldrig bli bättre än vad mallen är eftersom det står som grunden. Se därför till att lägga stor vikt vid planering och utformning, innan själva mallen skapas.

Detta fördjupningsarbete går inte in på hur man ska designa en mall och vad den ska innehålla. Istället fokuserar detta arbete på det tekniska, hur vi producerar en webbsidemall med hjälp av Jade

En “webbsidemall” byggd med Jade

I mitt fall, och som detta fördjupningsarbete behandlar, är det utveckling och framtagandet av en mall för webbsidor med hjälp av mallspråket Jade som står i fokus. Jade är ett mallspråk framtaget och utvecklat för att enklare, snabbare, mer effektivt och dynamiskt skriva kod som kompileras till HTML-kod (Jade, n.d.). Jade öppnar en mängd möjligheter som tidigare varit svåra, om ens möjliga, att använda sig utav och implementera. Med hjälp av Jade, dess tekniker och tillvägagångssätt kan vi utveckla en dynamisk mall för webbsidor och kan därför ses som ett bra val för detta ändamål.


Komma igång – förberedelser

Innan vi drar igång med att utveckla den tänkta mallen för en webbsida krävs det en del förberedelser:

  • Design av mallen (specifikationer, krav, estetik o.s.v. som nämnt ovan)
  • Förkunskap inom Jade (förstå sig på språket och kunna använda det)
  • Kompilator för att kompilera Jade till HTML
  • Text editor – för att skriva koden

Jag använder mig av, och rekommenderar varmt, kompilatorn Prepros och text editorn Sublime Text 3.

Screen Shot 2015-01-29 at 00.29.09
Prepros är en effektiv och lättanvänd kompilator som kompilerar allt från Jade till LESS, Sass och mycket mer – automatiskt och snyggt. Mjukvaran är dessutom gratis (pro-version tillgänglig) och finns till både Windows, Mac och Linux. Ladda ner här.
Screen Shot 2015-01-29 at 00.34.45
Sublime Text är en text editor med många möjligheter och installerbara tillägg för att göra arbetet smidigare och mer effektivt. Även Sublime Text är gratis och tillgängligt för både Windows, Mac och Linux. Ladda ner här.Jade highlights:
För att få highlights i Sublime Text till språket Jade (som bilden visar) installera först Package Control och därefter, från Sublime Text’s Package Control, tillägget “Jade”. Detta gör att Jade-koden får rätt färg beroende på element, attribut, indentering o.s.v.

Givetvis fungerar alternativa kompilatorer och textredigerare, men jag rekommenderar ovanstående då de är lättanvända och effektiva. Då detta fördjupningsarbete inte inriktar sig på någon specifik mjukvara fungerar vilken kompilator och textredigerare som helst, så länge de kan kompilera Jade.

Skapa projektmappen

Efter att ovanstående förberedelser är uträttade börja med att skapa en tom mapp för projektet (denna mapp ska innehålla alla sub-mappar såsom HTML, IMG, JS m.fl.). Väl inne i denna mappen skapa en ny tom mapp vid namn Jade som skall innehålla alla Jade-filer (Prepros kommer veta att detta är en Jade-mapp och behandla den därefter, så döp den till Jade).Screen Shot 2015-01-29 at 01.03.23
Skapa därefter en tom textfil vid namn index.jade – detta är indexfilen i Jade-format. Skapa även en textfil vid namn docwrapper.jade (filens funktion förklaras senare). Alla Jade-filer som skapas skall ligga i denna mapp samt ha filändelsen .jade
Screen Shot 2015-01-29 at 01.42.38
Om du använder Prepros så öppna upp mjukvaran och drag sedan projektmappen (inte Jade-mappen) till mjukvarans tomma mittfält. Projektet kommer då laddas in och du kommer se mappen Jade. När du sedan redigerar textfilen och sparar kommer Prepros att kompilera .jade-filen och skapa en HTML-fil av den.
Screen Shot 2015-01-29 at 01.10.51

Med en design över webbsidemallen, kunskaper inom Jade samt nödvändiga mjukvaror installerade och en korrekt mappstruktur är det dags att påbörja arbetet kring webbsidemallen.


Börja strukturera, skriva kod och kompilera

I desingfasen av din webbsidemall har du säkerligen tänkt ut vad som skall finnas med, vilka sidor som skall existera och vad de ska innehålla. Tänk igenom vilka delar i ett HTML-dokument du kommer återanvända på mer än ett ställe och/eller som du vill ha separata för att vara lättillängliga och enklare att redigera. Exempel på dessa delar kan vara head, body, header, navigaiton, footer m.fl. Det är här en av styrkorna med Jade träder in, dynamiska filer som kan inkluderas i andra filer (då denna teknik är i Jade-språket och inte specifikt för att skapa en mall går jag inte igenom hur det fungerar, då det går att finna här: Jade Includes).

För var del av en HTML-fil du önskar ha separat av valfri anledning, skapa en Jade-fil med korrekt angivet namn i Jade-mappen (jag kommer senare att visa hur och varför man arbetar med det, men för nu skapa tomma filer som representerar dina olika element). I mitt fall har jag valt att ha dessa element separata och därför har jag skapat dessa, för tillfället tomma, Jade-filer, där samtliga ligger i mappen Jade.
Screen Shot 2015-01-29 at 01.44.56
Filerna och vad de hädanefter ska innehålla:

  • docwrapper.jade – grundstrukturen för samtliga element (förklaras nedan).
  • footer.jade – footern som skall vara samma över alla sidor.
  • head.jade – innehållandes meta-taggar, länkar till style-sheets, javascript-filer o.s.v.
  • index.jade – indexfilen med innehållet av sidan.
  • navigation.jade – navigationsmenyn som givetvis är samma över alla sidor.

Docwrapper

Docwrapper.jade är en, i detta fall, viktig fil som fyller en stor funktion. Istället för att index.jade skall först skapa mallen och sedan dra in innehållet, så vill vi att index.jade skall bestå av innehållet och därefter dra in mallen. Det är här docwrapper.jade fyller sin funktion genom att bestå av grundstrukturen, och är filen där resterande filer dras in och kompileras. Syftet med att göra på detta sätt och inte använda index.jade som grund är för att om man sedan skulle vilja skapa ytterligare en sida, såsom contact.jade, så kan man fortfarande använda docwrapper.jade då det är just den filen som består av grundstrukturen, d.v.s. själva mallen (Bracey, n.d.).

Kortfattat:

  • docwrapper.jade – Grundstrukturen för mallen, där andra .jade-filer inkluderas och sedan kompileras.
  • index.jade / valbar sida – en fil som bygger på docwrapper.jade och använder sig av dess grundstruktur.

Som vi ser på bilden nedan består docwrapper.jade av en grundstruktur bestående av html, body och en div. Inuti div finnes “block intro“, vilket i docwrapper.jade själv inte betyder något, utan agerar som en placeholder. Om vi tar en titt i index.jade ser vi först och främst att det är en fil utökad (extends) från docwrapper.jade vilket betyder att den läser in samtlig kod från docwrapper.jade. Där ser vi även koden “block intro” som består av en paragraf med lite text. Eftersom att index.jade ärver allt från docwrapper.jade, och de kompileras samman till en enda HTML-fil, så slås de ihop och koden “block intro” och mallen från docwrapper.jade blir ett – därav en kombinerad och komplett HTML-fil.
Screen Shot 2015-01-29 at 13.04.53

Exempel på en docwrapper.jade som sedan blir utökad (extends) av en index.jade, och dess slutresultat index.html.

Genom att nyttja detta tänk och denna teknik kan vi skapa separata delar (likt vi gjort tidigare med .jade-filerna) som därefter inkluderas och utökar varandra för att få en dynamisk och lättarbetad struktur som kan återanvändas för flertal projekt och produktioner. Vad jag personligen verkligen tycker om med att arbeta på detta sätt är just att separera element i olika filer för att få en bättre överblick, dynamiskt använda till andra filer samt mer lättarbetad kod.

Konstruera, inkludera och utöka

Börja med att konstruera samtliga .jade-filer enligt dina designbeslut i designstadiet av webbsidemallen, dvs vad de ska innehålla. Se det som att du “egentligen” skriver allt i en enda HTML-fil, men där du istället skriver Jade-kod och separerar elementen från varandra i separata filer. Se nedanstående bilder och text för mina exempelfiler.

Docwrapper.jade

Självaste grundstrukturen av den blivande HTML-filen. Som vi ser så inkluderas head.jade inuti head-taggen, vilket innebär att allt ifrån filen head.jade inkluderas inom head-taggen. Därefter, inuti body-taggen, inkluderas navigation.jade, vilket är en fil innehållandes huvudmenyn för denna webbsida. Därefter, inuti div-taggen (#fullpage) syns ett block benämnt som intro, och precis som förut, så finns detta element inuti index.jade. Sist, men inte minst, inkluderas footer.jade, d.v.s. footern för webbsidan. Som vi ser ytterligare en gång är alltså docwrapper.jade filen som står för grundstrukturen där andra element inkluderas och/eller utökar sig ifrån för att konstruera HTML-filen.
docwrapper

Docwrapper.jade agerar som behållare för grundstrukturen där andra element inkluderas och kombineras.

Head.jade

Inuti head.jade finns alla nödvändiga och önskvärda meta-taggar och länkar till externa filer. Filen börjar med att ange en titel för webbsidan. Denna titel benämns som block headertext, vilket även finns i index.jade. Eftersom att head.jade inkluderas i docwrapper.jade, och index.jade är en utökning av docwrapper.jade, får alltså index.jade tillgång till head.jade. Detta gör att block kan delas mellan, i detta fall, head.jade och index.jade även fast de inte inkluderar varandra.
head

Head.jade är vad head-taggen kommer bestå av i det färdigkompilerade HTML-dokumentet.

Navigation.jade

Denna filen är tänkt att innehålla menystrukturen som skall finnas på webbsidan (i mitt fall använder jag mig av Bootstrap och därför är det dessa specifika klasser.) Även här stöter vi på ett block vid namn headertext, samma block som head.jade använder sig av. Detta betyder att samma text kommer att användas i huvudmenyn som i webbsidans titel vilket tyder på dynamik då samma block med text kan användas på flera ställen (likt en variabel). Sist ser vi ännu ett block vid namn menuLinks. Precis som med föregående blogg återfinns dess innehåll i index.jade, och i detta fall är det menyns länkar som inkluderas.
navigation

Menyn utgörs av strukturen i navigation.jade men där själva innehållet (länkarna) finns i index.jade (block menuLinks).

Footer.jade

En simpel footer med inget märkvärdigt. Om man önskar kan man givetvis inkludera andra .jade-filer eller block med text och/eller länkar.
footer

En simpel footer som skall vara konsekvent webbsidan igenom.

Index.jade

Självaste filen med allt innehåll som skall äga rum i bland annat body-taggen. Medan de andra .jade-filerna står för struktur, och i vissa fall innehåll för filer som separerats och kan återanvändas, så står index.jade för huvudinnehållet. Filen är även en utökning från docwrapper.jade, vilket betyder den får tillgång till allt som finns inuti docwrapper.jade samt allt som inkluderats i docwrapper.jade. I mitt fall ser vi att blocket PageTitle, headertext och menuLinks finns i början av filen och det är dessa block som infogas i de andra filers blocks. Nedanför ser vi blocket intro som innehåller text som tar plats i body-taggen.
index

Index.jade, filen som kommer kompileras till HTML-filen och innehållandes resterande .jade-filer.

Syftet med index.jade

Anledningen till att det är index.jade som innehåller allt innehåll är för att om man sedan vill skapa ytterligare en sida, exempelvis contact.jade, så kan man fortfarande använda de andra .jade-filerna (docwrapper.jade, head.jade, navigation.jade, footer.jade) eftersom de är designade och konstruerade för att vara universella och återanvändningsbara, och inte endast för ett specifikt scenario.


Den kompilerade HTML-filen

När .jade-filer sparas så kompileras de till HTML-filer som blir brukbara på webben. I detta exempelfall är det index.jade som kompileras till en HTML-fil med hjälp av resterande .jade-filer, och får därför namnet index.html. På bilderna nedan ser vi resultatet av HTML-filen och att alla .jade-filer har blivit inkluderade och kompilerade.

PS! I detta fall, när vi arbetar med Jade, ska endast HTML-filen användas för uppladdning av webbsidan. Redigera därför ingen kod i HTML-filen, utan gör det i den lämpliga .jade-filen istället. Detta för att var gång en .jade-fil sparas så kompileras HTML-filen om och skrivs över.
Screen Shot 2015-01-29 at 16.38.07

Den färdigkompilerade HTML-filen.

Som vi ser nedan är HTML-filen färdigkompilerad och går att använda i webbläsaren, precis som vilken HTML-fil som helst. Man får inte glömma att Jade endast är till för utveckling och skrivning av kod, resultatet kommer alltid vara en HTML-fil efter kompilering.
Screen Shot 2015-01-29 at 14.56.55

Den färdigkompilerade HTML-filen i webbläsaren.

JadeExplained

Vilka .jade-filer som står för vad och hur de syns/används i den färdigkompilerade HTML-filen.


Andra nyttiga saker att nyttja

Vilka och hur många .jade-filer du vill ha i ditt projekt bestämmer du själv genom designfasen av vad webbsidan/mallen ska innehålla. Dock får man inte glömma bort kreativiteten och att man kan skapa ytterligare .jade-filer för att nyttja andra effektiva och smarta tekniker som Jade erbjuder. För ett sådant ändamål kan man skapa en separat .jade-fil, och i mitt exempelfall är denna benämnd som config.jade. Min config.jade innehåller endast variabler som i sin tur har en betydelsefull roll i webbsidan/mallen. Exempelvis har jag skapat variabler som innehåller en sökväg till en länk eller en fil som kan användas av valfri .jade-fil som inkluderar config.jade i sig. Dessutom har jag skapat en boolean gällande två script.
Screen Shot 2015-01-29 at 17.29.31

config.jade innehållandes variabler och booleans, för att effektivt sätta värden.

Genom att kombinera booleans med if-satser (generella programmeringstermer) kan man enkelt bestämma om element ska inkluderas och kompileras, eller ej. I exemplet nedan: Om tooltipPopover är satt till true, inkludera då nedanstående skript. Om man i config.jade istället ändrar tooltipPopover till false kommer if-satsen vara falsk och skriptet kommer inte att inkluderas. Genom att strukturera upp koden på detta sätt kan man snabbt och effektivt inkludera/exkludera element som man ibland vill/inte vill använda sig av. Detta betyder att koden alltid kan ligga kvar, men det är värdet av variabeln som bestämmer om de kompileras in i HTML-filen eller inte. Det sagt kan man fylla .jade-filen med en mängd if-satser, och i config.jade reglera om de ska inkluderas eller inte. Detta medför att en mängd olika webbsidor kan skapas från en och samma mall, där man med hjälp av if-satserna bestämmer vad den specifika webbsidan ska inkludera.
Screen Shot 2015-01-29 at 17.36.18

docwrapper.jade med config.jade inkluderad där värdet true/false från config.jade avgör om det inom if-satsen inkluderas eller ej.


Mitt användande av Jade för en webbsidemall

Under min tid som praktikant i Taiwan, där jag främst jobbade med webbutveckling och innovation inom webb, använde jag mig utav Jade i ett av mina projekt som var just att ta fram en återanvändningsbar, flexibel och mångsidig webbsidemall. Innan projektet startade undersökte jag lämpliga tillvägagångssätt för att skapa återanvändningsbara webbsidemallar och blev rekommenderad Jade som språk, varav jag lärde mig det genom en kurs på Tutsplus.com. Efter att ha lärt mig, och insett vilken potential Jade erhåller, bestämde jag mig för att använda språket i min framtagning av artefakten. Jag kombinerade ihop Jade med Bootstrap för att bygga upp min webbsidemall som var responsiv, modern och effektiv.

Om du önskar bygga en webbsida baserad på Bootstrap med hjälp av Jade, ta en titt i denna guide:
https://webdesign.tutsplus.com/tutorials/baking-bootstrap-snippets-with-jade–cms-22798

Då Jade, som jag nämnt förr, är ett alternativt sätt att producera HTML-kod men där slutresultatet blir detsamma så går det att använda i alla sammanhang där HTML-filer används. Givetvis ska man göra ett designbeslut på förhand för att se om det är något, för det specifika scenariot, olämpligt med att använda Jade (såsom att om någon okunnig skall behöva ändra i koden) varpå man kan behöva avstå. Men för produktioner där det inte är ett hinder att använda Jade kan jag starkt rekommendera det, och jag själv kommer använda det framöver.

Dynamik med stilmallarna

I mitt projekt använda jag mig även av LESS för att även skapa dynamik, effektivitet och mångsidighet gällande CSS-koden. Jag rekommenderar starkt att man kombinerar Jade med LESS/Sass/Stylus för att få en så dynamisk och anpassningsbar webbsidemall som möjligt där även stilmallarna är lätta att manipulera för att få önskad effekt.


Workshop

För att påvisa förståelse för vad detta fördjupningsarbete behandlat finnes här en liten workshop-uppgift:

Likt vad detta fördjupningsarbete behandlat skall du skapa en webbsidemall. Denna webbsidemall skall först och främst behandlas i en designfas där du kommer fram till nödvändiga funktioner och vad mallen i helhet ska göra och stå för. Därefter skall du skapa en webbsida med hjälp av Jade med följande krav:

  • En docwrapper.jade som står för grundstrukturen.
  • En index.jade som står för innehåll i form av en index-sida.
  • En navigation.jade som innehåller huvudmenyn.
  • En footer.jade som innehåller footern.
  • En config.jade som innehåller variabler och minst en if-sats.

Lägg gärna till fler .jade-filer om det fungerar med din tänkta produktion och vad du kommit fram till i designfasen.

Därefter skall du skapa en ny valfri .jade-fil med innehåll (likt index.jade) där resterande .jade-filer skall användas. Tanken är att du skall skapa ytterligare en HTML-fil som innehåller samma grundstruktur, meny och footer men där innehållet är annorlunda än vad som återfinns i index.jade.

Redovisning

Redovisa genom att ladda upp projektmappen du arbetat i, som skall bestå av:

  • Samtliga .jade-filer
  • Minst två kompilerade HTML-filer (index.jade samt valfri extrasida)
  • Stilmallar och scripts, om du använt sådana.

Resultat

Resultatet från exemplena jag gått igenom i detta fördjupningsarbete:

See the Pen YPxvKa by Nikola (@nikkop) on CodePen.


Referenser

Bracey, Kezz (n.d.). Creating Parent and Child Templates. [Video online]. https://webdesign.tutsplus.com/courses/top-speed-html-development-with-jade/lessons/creating-parent-and-child-templates [2015-01-28].

Jade (n.d.). Language Reference. [Elektronisk]. Tillgänglig: http://jade-lang.com/reference/ [2015-01-28].

Löwgren, Jonas & Stolterman, Erik (2012). Design av informationsteknik: materialet utan egenskaper. 2., [rev. och utök.] uppl. Lund: Studentlitteratur

TechTerms (n.d.). Template. [Elektronisk]. Tillgänglig: http://techterms.com/definition/template [2015-01-28].