Prototyping med AngularJS

La meg smelle begrepet “User first development” i bordet. Sånn for å fange oppmerksomheten din. Funket det?

Hos de fleste start-ups er lean et godt kjent begrep. Å kunne få opp en en “fungerende” applikasjon tidlig i utviklingsfasen av en løsning gir utrolig høy verdi i å avdekke mangler, misforståelser og bekrefte/avkrefte påstander og antagelser om brukere av applikasjonen.  Får brukerene løst det de ønsker og på en god måte? Trykker de på knappene eller klarer ikke de å skille knapper fra innhold? Tar applikasjonen høyde for det miljøet den brukes mest i? Holder den underliggende datamodellen vann?

Jo senere man tester applikasjonen, dess dyrere (i tid) blir feilrettingen. Målet til de fleste applikasjoner er tross alt å forenkle brukeres hverdag. Løser din applikasjon det problemet på beste måte og utvikler du på en måte som lar deg teste tidlig med brukerene?

AngularJS og prototyping

Jeg er en ivrig AngularJS misjonær og i denne posten skal vi se litt på hvordan jeg strukturerer utviklingsprosessen og hvilke muligheter AngularJS gir for effektiv testing og prototyping. Merk at denne fremgangsmåten ikke passer alle prosjekter, men jeg tror mange kan ha glede av å tenke slik.

Om du benytter Angulars medfølgende service for kommunikasjon over HTTP får du mye rett ut av boksen. Til normal bruk fungerer $http som en hver fantastisk service burde. Bak scenene benytter servicen $httpBackend til å kommunisere med eksterne tjenester. Det er denne $httpBackend provideren vi nå skal herje litt med så den gjør som vi ønsker, nemlig å fake en back-end så applikasjonen kan oppleves og ikke minst utvikles uten at det må foreligge så mye som en spesifikasjon for hvordan back-end skal håndtere spørringer.

Dette toucher for så vidt inn på diskusjonen om hybrid kompetanse. Vi trenger hybrider som kan spesifisere API og klient smidig og samtidig. Vi må unngå situasjoner hvor for mange utviklere graver seg ned i sin kode og samtidig lager en løsning man ikke får testet med målgruppen før man faktisk har lagt ned dyrebar tid i implementasjon. Vi er avhengige av både hybrider og team som jobber tett sammen.

For å komme igang

Du må først legge inn Angulars bibliotek for end-to-end testing og inkludere det like etter du har inkludert angular. Du kan installere denne enten ved hjelp av bower (bower install angular-mocks), eller møysommelig klikke deg igjennom interwebben

Deretter må den tidligere nevnte $httpBackend servicen dekoreres til å forvente at back-end spesifiseres klient side.

Det neste hintet, er at du så må overstyre og implementere en mock-back end som svarer på alle PUT, POST, GET og DELETE spørringer du skulle finne på å benytte i applikasjonen din.

Du kan også legge inn en fake delay på eksempelvis 800 ms på alle spørringer slik at applikasjonen oppleves som at den brukes på et halveis tregt 3G nett.

Her har du en demo av et fungerende eksempel.

See the Pen Mock back-end by Kenneth Lynne (@kennethlynne) on CodePen.

Og til slutt, et angular mock back-end starter kit.

Publisert