Question

I am building a MVC javascript application which has most of the logic on the frontend, leaving the backend with the API only, with the modals on the frontend.

However, I think there are some design and performance problems. Considering the following case with a RESTful backend:

1. User issues GET / for the first HTML page including the Javascript application.
2. The page loads up the Javascript application, issuing GET /api/articles?limit=30 to pull the first 30 articles in JSON, which will be rendered to the browser by Javascript application.
3. For each of the article, there are comments with it. So each article will individually make an ajax request GET /api/article/<article_id>/comments to fetch the associated comments also to be rendered also.

As such, there are already more than 30 requests for a single page visit, which induces a lot of HTTP overheads and it does not seem correct.

Can somebody recommend the correct way to do it? Am I designing something wrong? Is RESTful backend useful in this case? What are some other suggestions of communication architecture between a JavaScript-heavy frontend and a backend API?

Answer 1

Not sure what framework you are working with for your backend but the backend would query all your articles and also include (for example) the latest 3 comments per article.

Your JSON returned by /api/articles?limit=30 could look like this:

[
    {
        title: "Article Title",
        comments : [
            {
               comment: "Hi",
               author: "Me"
            }
        ]
    }
]