– Trenger verden enda et frontend-rammeverk? Sannsynligvis ikke, sier Merethe Granevang.
Og så lagde hun like godt et, likevel.
Merethe Granevang har lang erfaring som utvikler, og jobber nå som senior systemutvikler og tech lead i Creaza. Hun var også i mange år tech-lead i Gyldendal, og har på kode24 tidligere blant annet fortalt om hvordan hun lagde lærespillet Robi og gitt tips om hvordan du fullfører hobbyprosjektene dine.
Hennes nyeste prosjekt, MereTheme, er et frontendrammeverk som skal være mye enklere å komme igang med enn de mer etablerte rammeverkene.
– Den største forskjellen på MereTheme og de andre mer veletablerte frontendrammeverkene er at dette er et low-effort-rammeverk. Det skal være så enkelt som mulig å lage og teste nettsidene, sier Granevang til kode24.
5 tips til hobbyprosjekter: - Vi koste oss masse sammen
Drømme-rammeverket
– Hvordan kom du på idéen om å lage ditt eget rammeverk?
– Jeg ville oppdatere nettsidene mine, og funderte på hvordan jeg skulle gjøre det. Skulle jeg teste ut et nytt rammeverk, eller bare gjøre noe enkelt?
Granevang forteller at hun har vært borti veldig mye forskjellig etter mange år i bransjen, og opplever ofte at vi fjerner oss mer og mer fra å skrive rene HTML-sider. I stedet kaster vi oss på rammeverk, biblioteker, byggverktøy og konfigurasjon som abstraherer bort det som ligger under, mener hun.
– Det var da jeg begynte å reflektere over dette, at jeg kom på idéen. Hva om jeg lagde mitt eget drømmerammeverk? Slik jeg skulle ønske de var? Hva hvis det var så enkelt at ting bare fungerte uten noen byggeprosess i det hele tatt. Hva hvis man bare kunne dobbeltklikke på fila, og den åpnet seg i en nettleser og bare virket?
Hun lagde deretter en liste med ønsker og krav og satte i gang jobben med å bygge MereTheme-rammeverket.
– Jeg brukte mye tid på å fundere, prøve og feile for å se om det lot seg gjøre, og etter hvert endte jeg opp med noe som fungerte bra for mitt bruksområde.
Skal være så enkelt som mulig
– Hva skiller MereTheme fra andre rammeverk?
– Den største forskjellen på MereTheme og de andre mer veletablerte frontendrammeverkene er at dette er et low-effort-rammeverk. Det skal være så enkelt som mulig å lage og teste nettsidene.
Målene for MereTheme er:
- Det skal være enkelt å bruke!
- Ingen server nødvendig
- Ingen bygging nødvendig
- Ingen nedlasting nødvendig
- Sidene skal fungere direkte fra filsystemet ditt, så det er enkelt å teste lokalt
- Den skal ta høyde for universell utforming
- Den skal støtte søkemotoroptimalisering
- Man skal kunne gjenbruke komponenter på tvers av sider
- Man skal kunne bytte mellom innhold uten full refresh av siden
- Man skal kunne linke til undersidene
- Man skal kunne lage fullverdige nettsider uten å måtte bruke eksterne biblioteker
Granevang sier det sannsynligvis finnes nok frontendrammeverk fra før, men hun fant likevel ingen som dekket akkurat de ønskene hun selv hadde.
– Jeg liker å jobbe med komplekse problemstillinger, men jeg liker ikke å løse enkle oppgaver på komplekse måter. Jeg ville derfor lage meg et verktøy for å gjøre enkle ting på en enkel måte.
«Jeg liker å jobbe med komplekse problemstillinger, men jeg liker ikke å løse enkle oppgaver på komplekse måter.»
Slik fungerer det
Granevang forteller at hun har skrevet en "tutorial" på dokumentasjonssidene som forklarer i detalj hvordan man bygger en nettside med mereTheme.
I korte trekk gjøres det slik:
- Du begynner med å lage en loader som sørger for å hente og starte MereTheme. Da copy-paster du inn en kodesnutt fra nettsiden.
const merethemeStyleCDN = "https://cdn.jsdelivr.net/gh/fabeline/meretheme@v0.2.0-alpha/lib/meretheme.css";
const merethemeCodeCDN = "https://cdn.jsdelivr.net/gh/fabeline/meretheme@v0.2.0-alpha/lib/meretheme.js"
window.addEventListener('load', function() {
var script = document.createElement('script');
script.src = merethemeCodeCDN;
document.head.appendChild(script);
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = merethemeStyleCDN;
document.head.appendChild(link);
});- Deretter lager du en hovedside. Denne inneholder det som skal være på alle nettsidene. Det kan for eksempel være en meny og en footer.
<!DOCTYPE html>
<head>
<title>MereTheme test</title>
<script src="./loader.js"></script>
</head>
<body data-mt-type="garden" style="opacity: 0;">
<h1>MereTheme</h1>
<iframe data-mt-type="entrance-door" src="houses/home.html"></iframe>
<p>Powered by MereTheme</p>
</body>
</html>- Så kan du lage selve innholdssidene som blir inkludert inne i hovedsiden. Du kan lage en meny som bytter ut innholdselementet, som fører til nytt innhold uten en total refresh av siden. Disse får også css-klasser avhengig av om de er valgt eller ikke, som du kan style for å vise hva som er aktivt.
<!DOCTYPE html>
<head>
<title>Home</title>
<script src="../loader.js"></script>
</head>
<body data-mt-type="house" style="opacity: 0;">
<h2>Welcome!</h2>
<p>This is the home house</p>
</body>
</html>– Du kan også lage mindre, gjenbrukbare komponenter på tvers av sidene. Alt blir skrevet i ren, gyldig HTML, med enkelte data-felter som plukkes opp av rammeverket.
– Hva egner rammeverket seg til? Og hva bør du ikke bruke det til?
– MereTheme er ment for å slenge opp enkle nettsider på en rask måte. Det egner seg veldig godt for relativt statisk innhold der man trenger noe gjenbruk på tvers av sidene, som for eksempel en meny, sier Granevang.
Merethe ville gjøre programmering gøy for barn - måtte kode på natta og lære seg å tegne
Støtter mye
Hun forteller videre at hun har lagt til innebygget støtte for integrasjon med noen nyttige biblioteker:
- FontAwesome tilbyr en rekke gratis-ikoner som kan brukes.
- Du kan skrive innholdet på nettsiden din med Markdown om du ønsker en mer visuell tilnærming når du lager innhold.
- Prism gir deg highlight av innhold med kode.
- Bootstrap kan aktiveres for å gi deg en enkel måte å style nettsidene dine på.
– Det er ingen begrensninger på hva du kan inkludere selv av biblioteker manuelt. Men dersom du skal lage store, komplekse nettsider, med mye dynamisk innhold ville jeg nok anbefalt å velge noe annet.
Bruker rammeverket selv
– Kommer du til å bruke dette rammeverket selv, enten privat eller i jobb?
– Ja, det er laget for å brukes. Jeg bruker det nå på nettsiden min, fabeline.com og på dokumentasjonssiden til prosjektet.
Planen er å fortsette å bruke det for små prosjekter, men Granevang er foreløpig usikker på om hun kommer til å bruke det i jobbsammenheng, siden hun der ofte jobber med større og mer komplekse systemer.
– Men hvem vet, kanskje dukker det opp noe det passer til i fremtiden?
Hun forteller at hun har fått veldig mange gode tilbakemeldinger på konseptet, og har også delt rammeverket i kode24-klubben der hun har bedt om innspill.
«Forhåpentligvis skal det leve i mange år framover!»
– Det er flere som har uttrykt at de synes det er for mye styr slik frontendutvikling er i dag, og liker idéen godt.
– Jeg håper jeg også etter hvert får tilbakemeldinger på selve bruken av MereTheme. Både når det gjelder brukervennlighet, bruksområder, bugs og andre nyttige ting, så jeg kan styre det i riktig retning. Det er et ganske ferskt prosjekt, så det har sannsynligvis fortsatt noen barnesykdommer.
– Hva er planen videre for rammeverket?
– Planen er å fortsette å utvikle MereTheme basert på tilbakemeldinger og mine egne erfaringer og behov. Når jeg føler meg trygg på at prosjektet er stabilt og velfungerende kommer jeg til å release versjon 1.0. Forhåpentligvis skal det leve i mange år framover!
