Building the UI first with Angular, Mocked Data and REST

Posted: 2014-04-09 13:23:00

Lately I have had a few projects using a RESTful backend to output JSON formatted data and a javascript front end. All of them are different technologies but the front end is in Angular.js.

So using the Angular mock module I have been able to build out the front end with no backend. I started to do this for speed reasons but realized a number of huge benefits.

Angular has some good docs on how to mock this data and use this $httpbackend module here.

Also I posted a quick video here on getting the json data from your app or from this great site JsonGenerator.

You can see the video here

## User interfaces change

No matter what the mock up show the ui will change. By having such a quick interface to try out widgets and workflows I can easily change with the clients needs.

Also use Layitout to crank out the UI

## The UI building process helps me to really understand the data goals

If the ui is coming before the data end points are built then this really gives you time to rethink some assumptions on the data goals.

## Speed and Testing

Local testing is super fast.  Also the infamous page reload for viewing the latest change is instantaneous. 

## UI fixes are separate from backend fixes and changes

A bug or feature added to the ui does not get tangled with the backend making for quick fixes and deployments. 

## Lastly it is real code

The mocked routing code is pretty much a drop in for the final front end product. Just one file and it's one call to the mock module and run settings and it will call the real end points! And my data is structured to help guide me in building the RESTful part of the app

I will do a quick series on using Angula mock and in general a workflow for building like this that can be applied to different javascript front ends and back ends.

 

Links

Supports wildcard

http://docs.angularjs.org/api/ngMock/service/$httpBackend and http://stackoverflow.com/questions/18618532/is-it-possible-to-use-wild-cards-in-angularjs-mocks

UPDATE: June 17 13:54 a friend just posted a link to http://jsonstub.com/ which looks really interesting


Tags:

angular.js