Kmom04: SPA och MVC

By . Latest revision .

Vi använt jQuery Mobile en del, låt oss nu titta på ett alternativ till att skriva klientfokuserad kod. Jag väljer att titta på ramverket Mithril som är ett ungt och inte alltför stort JavaScript-ramverk med fokus på klientbaserad programmering.

Mithril erbjuder en kodstruktur som är likt model, view, controller (MVC) som är en ofta använd design arkitektur. Vi prövar hur en lösning motsvarande meappen kan se ut med Mithril, därefter utvärderar vi och jämför med jQuery Mobile.

Ett annat ord för klientfokuserad webbprogrammering är single page applikation (SPA) och Mithril erbjuder möjligheter att bygga den typen av applikationer där hel applikationen ligger i en webbsida. Vi kan egentligen säga att det är precis det vi byggt med vår meapp och jQm, nu gör vi samma sak igen, fast med Mithril.

Det kan se ut så här när vi är klara.

En listview med alternativ.

En listview med alternativ.

Ett alternativ i listan valdes och visas upp.

Ett alternativ i listan valdes och visas upp.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läsanvisningar

(ca: 6-10 studietimmar)

#Kurslitteratur

Läs följande:

  1. Mobile HTML5.
    • Ch 13: Targeting mobile Devices and Touch
    • Ch 14: Mobile Performance

#Artiklar

Läs följande artiklar för att få bakgrunden till övningarna.

  1. Läs igenom artikeln från Jonatan och Henrik om en djungel av ramverk för JavaScript.

#Video

Se följande videor.

  1. En video om att sluta skriva JavaScript-ramverk, “Stop Writing JavaScript Frameworks - Joe Gregorio - OSCON 2015”. Videon ger dig allmän kunskap om ramverk och lite om läget för ramverk inom JavaScript- och HTML-världen.

#Lästips

Det finns inga extra lästips.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

Gör följande övningar för att träna inför uppgifterna.

  1. Läs igenom artikeln och gör övningarna i “Kom igång med ramverket Mithril för JavaScript SPA”.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “Bygg en me-app med Mithril”.

#Extra

Det finns ingen extrauppgift.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Är du sedan tidigare bekant med Mithril eller andra JavaScript-baserade MVC ramverk?
  • Hur känns det att jobba med Mithril?
  • Vad tycker du om sättet som templates och Handlebars fungerar?
  • Var det något som krånglade eller tog extra mycket tid?

#Revision history

  • 2015-12-04: (B, mos) lade till läsanvisningar i boken samt rev c av artikeln.
  • 2015-11-04: (A, mos) Första utgåvan för kursen.

Document source.