Proxy Your Requests With Grunt

Probably you’re already using grunt to serve your local frontend code. Everything is fine, but if you’re developing your backend with something different than JavaScript (Being a Java developer I heard that might happen), you will have problems accessing this backend while running grunt server.
With grunt-connect-proxy there exists a grunt module to help you out. It basically delegates requests that match a given URL to a different backend of your choice. Unfortunately I found it rather difficult to configure, if you are unaware of the connect middleware concept.

Basically you just need to add two things to your Gruntfile.js file:

Firstly add the connect server configuration to your config JSON inside of grunt.initConfig. This example delegates all requests to http://localhost:8000/services to http://localhost:8090/services – keep in mind the grunt server is running on port 8000 and the backend on port 8090:

Secondly register your grunt server task:

then you can call your grunt server with the configured proxy via :
grunt server
from the command line.

Enjoy!

Building Mockups in ExtJS 4.1

Note: This post has been updated for ExtJS 4.1

In the early development phase it is usually a good idea to provide a mockup that is not using real data but some dummy data from memory. To do that for a grid in ExtJS we need to create a record class first. For a person this might look like this:

Then we need a store where instances of the Person class will be stored:

The store is initially loaded with data from peopleProxy which must be defined previously like this:

If we want to replace this in a later development phase with real data, we simply replace this proxy with an HttpProxy, which might look like this:

If we finally connect the store to a data grid, it looks like this: