mysql - AngularJS View-Model creation on Server or Client? -

i curious how others creating angularjs view-models using underlying relational database? team , having trouble deciding if should make object joins on server-side or client-side.

for example, have couple models on server author, book, , bookcomment. in first example, there single endpoint author /api/author/:id , "packages" entire view-model on server. second example, each object has own restful api endpoint /api/authors/:id, api/books/:id , /api/bookcomments/:id.

an author can have 1 or more book objects , book can have 1 or more bookcomment objects.

now lets compare 2 scenarios:

server-side join

we let server join objects based off of foreign keys , end object like

author

           {                 'id':1,                 'firstname':'john',                 'lastname':'steinbeck',                 'books':[{                    'id':123,                    'title': 'grapes of wrath',                    'author':1,                    'comments':[{                        'id':555,                        'content':'this great book!',                        'book':123                    }]                 }]             } 

this gets of needed data , objects render view correctly. problem becomes managing comments , books @ atomic level, if user edits comment, don't want save entire author object, rather update bookcomment object. require pulling out objects , bootstrapping them angular $resource or similar.

client-side join

we ask models individually , join them on client:

author

        {             'id':1,             'firstname':'john',             'lastname':'steinbeck',             'books':[]         } 

book

        {             'id':123,             'title': 'grapes of wrath',             'author':1,             'comments':[]         } 

bookcomment

         {               'id':555,               'content':'this great book!',               'book':123          } 

if pull down lists of objects using restful interface, can join them using like

//get author var author = author.get();  //join books authored author author.books = filterfilter(books, {author:author.id});  // iterate each book , filter comments book id angular.foreach(books, function(book){   book.comments = filterfilter(comments, {book:book.id}); }); 

both of these have own pros , cons. first makes hard manage objects atomically forces post large objects , make backend deal updating sql database. second adds more work client because need pull down large datasets , filter/join them other models on fly.

is there option have yet come across or 1 of these 2 ways considered best practice?

i'm working team on large-scale angular app , have tried out both of implementations.

we started out linking on front-end. because didn't have clear understanding of how wanted structure data or in cases relate it. creating highly generic resources , linking on client seemed more flexible in beginning.

we moved maintaining object structure on both ends of serialization, coming out of rest api , going it. has taken loads of messy logic , murky relationships off of our plate, , highly recommend if data basic objects need crud against. highly maintainable , easy build integration tools around.

an example:

if request author resource, following data:

{             'id':1,             'firstname':'john',             'lastname':'steinbeck',             'books':[{                'id':123,                'title': 'grapes of wrath',                'author':1,                'comments':[{                    'id':555,                    'content':'this great book!',                    'book':123                }]             }]         } 

we go through , wrap each nested layer of data restangular. restangular abstracts wrapping objects restful resource in awesome way.

we can edit underlying objects stuff firstauthor.books[0].remove(). or build custom endpoints suing objects make easy update against, example restangular.one('books', firstauthor.books[0]).get().

one huge 'product' benefit of moving direction less api calls / better performance in browser. when linking in angular, had 1 page make 50 api calls unusually complex object, , still have perform logic in client. nested serialization been reduced 1 api call , 10x better performance on page.

a small thing --- helped standardize how backend deals foreign keys. instead of having weird attribute names objects know foreign keys (like appending _id attribute server) server looks attribute , grabs id. in case of python/django, book_comment foreign key:

book_comment = request.data["book_comment"]["id"]