Single Page Applications
Målet med denne fagfredagen er å lage en Single Page (Web) Application (SPA) med HTML og JavaScript. Etter at du har valgt hvilket rammeverk du har lyst til å prøve å bruke (det er lov til å bytte underveis), ta utgangspunkt i et av eksempelrepositoryene våre på github. Vi har laget ett utgangspunkt for Angular og ett for Durandal.
Jobbe med Versjonskontroll (git)
Du kan selv velge om du ønsker å bare laste ned koden og jobbe lokalt, jobbe med git lokalt, eller pushe til git. Om du ser for deg at du kan ønske å jobbe med git foreslår vi:
- Gå til siden for repositoryet du ønsker å ta utgangspunkt i (Angular/Durandal)
- Klikk fork øverst til høyre. Om du ikke er logget inn eller ikke har bruker har du mulighet til å fikse dette her.
Du vil nå få en kopi av oppgaven i ditt eget repository, som du vil kunne jobbe med.
Om du har en favoritt-git-klient trenger du antakeligvis ikke mye hjelp med å klone og jobbe med repositoryet du nå har opprettet. Om du ikke kjenner git, her et et par tips.
- Last ned og installer Github for Windows (eller Mac). Der kan du logge inn med github-brukeren din, velge repository å klone, og sjekke inn (committe) og pushe (synkronisere) etter hvert som du gjør endringer på koden din.
Jeg vil bare komme igang, hvor kan jeg laste ned koden?
Om du ikke bryr deg om versjonskontroll finner du en Download zip-knapp nederst til høyre på sidene for de to utgangspunktene.
Ok, jeg har fått ned koden, hva har jeg her?
I og med at vi skal lage en webapplikasjon må vi ha en webserver. For å slippe å ta hensyn til alle merkelige IIS-konfigurasjoner har vi valgt å prøve å benytte Node.js. Vi har satt opp et veldig enkelt lokalt utviklingssystem med Grunt, i håp om at det skal gjøre det lett å jobbe med kode. Det er ikke tatt noen forutsetninger til IDE/Editor, så bruk hva dere vil. Noen tips: Sublime Text 2 (temmelig bare bones, ganske rett frem), JetBrains Webstorm (Bra JS-IDE, støtter VS/Resharper keybindings, 30 dagers trial), eller bare bruk Visual Studio som dere kjenner (men enklere er kanskje bedre, mer fokus på koden).
For å komme igang:
- Last ned og installer node.js (velg å installere med NPM, pakkemanager for node)
- Åpne en kommandoprompt, og gå inn i katalogen du har klonet fra Git
- Skriv
npm install -g grunt-cli. Dette vil installere Grunt globalt. - Skriv
npm install. NPM vil nå laste ned klientside avhengigheter for løsningen, bl.a. Grunt. - Skriv
grunt. Nå skal grunt starte, og en nettleser skal vise Hello World for applikasjonen. - Hvis du nå gjør endringer på HTMl, JS eller CSS-filer skal nettsiden reloades automagisk av Grunt/LiveReload.
Hvis du får noen feil, dobbelsjekk at du har node/npm i path, og at du sto i katalogen for selve løsningen når du skrev npm install.
TLDR; Bare gi meg lenkene
Utgangspunkt for løsning i: