3

I have the following scenario, a page that will show different widgets with different data, the back-end is ASp.NET Web API 2 with SQL Server and EF + Repository Pattern + Unit Of Work.

If I have to show quite some data, including user profile and other information on top of the widgets information, what will you recommend:

  • make one big $http.get request that will return a big json and bind that one to the UI

or

  • each controller (service) when it loads will make it's unique call to back-end and get's the data it needs to display, that means each widget will make a call to back-end and retrieve it's values.

I just want to know what do you recommend as a best practice.

enter image description here

2
  • Any idea how much kb's the single request is vs the size of multiple requests? Commented Nov 19, 2014 at 17:37
  • I'd do whatever makes sense disregarding performance. If it ends up being a performance bottle neck then worry about optimizing it. "Premature optimization is the root of all evil" -Donald Knuth Commented Nov 19, 2014 at 17:47

3 Answers 3

1

IMHO the best way is to separate every request into single service methods that way you can reuse just a part of it and not make server calls to load to whole data, check the angular-resource $resource to have a clean reusable service of server calls and not a bunch of $https arround your code:

example: A service that points some url of your backend server

.factory('ClientService', ['$resource', function($resource){
        return $resource('http://some_url/:controller/:method', null, {
            "agents": { method: 'GET', params: { controller: 'agent', method: 'search' }, cache: false },
            "query": { method: 'GET', params: { controller: 'client', method: 'search' }, cache: false },
            "save": { method: 'POST', params: { controller: 'client', method: 'save' } },
            "delete": { method: 'POST', params: { controller: 'client', method: 'delete' } }
        })
}])

The use in the controller (Injecting ClientService as dependency)

// If i want to query the agents into a scope element
// that will call the url = http://some_url/agent/search
$scope.agents = ClientService.agents(); 
// If i want to query a single client i cant send adtional params
// as is a get request it will call http://some_url/client/search?id=5
$scope.client = ClientService.query({id:5});
// and you can event manage callbacks if you want to
// This will send the client object to the url = http://some_url/client/save
ClientService.save($scope.client).$promise.then(function(response){ alert(response) })

As you can see this way you can access just the things you need from the backend server not having to do all the callback response if you dont need to and in a reusable cleaner way

Info Angular Resource Docs

Sign up to request clarification or add additional context in comments.

Comments

0

I think it depends...

If performance might be a problem you should think about what is best for your User... Will the overhead of making 4 HTTP requests affect the user experience in anyway? Also, would a one big request take too much time to retrieve info from the database?

However if you want just to use a developer perspective of the problem, I'd prefer doing 1 generic API call then calling it 4 times in Angular with different parameters for each Widget.

Comments

0

It is likely that making 4 requests will actually be faster. Not to mention the data can start being populated on the screen as it comes back, instead of needing to wait for the slowest service.

For the max number of concurrent AJAX requehttp://www.coderanch.com/t/631345/blogs/Maximum-concurrent-connection-domain-browsers

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.