The design of RESTful web applications with a client-server architecture

I need clarification on how client-server architecture should function for a modern web application with a RESTful backend.

For a web app, the client is typically the browser while the server is the web server. Programatically speaking, there are components like client-side code (view), server-side code (controller/model), and the database. Is my understanding accurate?

So when the client-side code sends a request to the RESTful server-side code, should the server return a JSON/XML object instead of a simple output? Am I correct in this assumption?

If the client-side code cannot use any server-side code to reload the webpage, how would it parse the JSON/XML object back into the page? Would it require a JavaScript library loaded into the browser, such as Ajax? And if we want to reload the entire webpage, would JavaScript be used for that purpose?

Edit:

In a scenario where the web server is separate from the backend application server, should the client-side code call the web server to route to the backend or directly call the backend server when accessing a RESTful service?

javascriptajaxjsonrest

Answer №1

According to Robert, you are indeed correct! In the realm of RESTFul development, there are numerous JSON parsing providers that facilitate data flow from the server to the client using RESTFul annotations. Additionally, there exists a variety of JavaScript libraries that utilize JSON as a model for dynamic content reloading.

A popular combination that I personally favor is Backbone and RESTFul. This pairing is straightforward and efficient, making it an ideal choice for many developers.

For those interested in exploring this further, I recommend checking out backbone+rest for a foundational understanding of how these technologies work together.

Answer №2

Absolutely correct! The concept of "single page web apps" is quite diverse, but the general idea involves the webserver providing a simple HTML page along with JavaScript. This JavaScript communicates with restful services to retrieve JSON data (which is easier to work with in JS compared to XML), processes that data, and updates the HTML DOM accordingly. If necessary, the JavaScript can reload the entire page using window.location.reload() or navigate to a different URL with window.location=urlOfSomeOtherPage.

Various open source JS libraries make it easier to develop such applications. Popular examples include Angular, Knockout, and Backbone (often used with Backbone.Marionette).

Answer №3

When it comes to REST and HTTP, there are no strict rules on what should be returned to the client - whether it's HTML, JSON, or something else. Ultimately, the choice of content type is left up to the development of the specific application.

Over the past 25 years, the web has operated in a "RESTful" manner by following good REST design principles that align with the HTTP protocol. By focusing on resources and utilizing HTTP verbs like GET, POST, and PUT to modify resource states on the server, developers can maintain a RESTful approach rather than treating resources as actions to be executed on the server.

In recent times, there has been a trend towards building web APIs that return JSON instead of HTML, often labeled as "RESTful" even if they may not fully adhere to true REST principles. However, it's important to note that being RESTful does not hinge on returning JSON specifically; HTML can also be used while remaining RESTful since REST does not prescribe a specific content type. The format of content is simply a representation of a resource and can vary based on the supported Content-Types.

If only HTML is required, then simply return HTML. Building a "single page app" should have a clear purpose behind it, such as in the case of Twitter where real-time updates are necessary without full page refreshes. For websites with more navigational links, implementing complex JavaScript redraws for each link click may be unnecessary reinvention of the browsing experience.

Remember, your web browser already serves as a REST/HTTP client, so consider whether adding another REST client within your existing one is truly essential. In essence, REST does not mandate the usage of JSON or dictate the need for single page apps. It's perfectly acceptable to provide both HTML and JSON representations of a resource and let the client choose the preferred version.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

content organized in tabs using the fancybox feature

I am attempting to dynamically load content using AJAX with fancybox. It loads fine, but the tab won't change if I use the default function or via AJAX. However, if I use fancybox and set the type to 'iframe,' it loads and alternates tabs p ...

jqueryajaxfancyboxtabbed

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Why can I only access one property ('member_A') of an Element in an observableArray using an HTML <input>? I am attempting to add a new object of type abc() to the observableArray "list_of_abc" when the button "ADD To List of abc" is click ...

javascripthtmlknockout.jsknockout-mvc

I must create text that is transparent against a colorful gradient background

Hey there! I'm seeking help in figuring out how the text on this site is designed. You can take a look at it here. Essentially, what I'm aiming for is to have the text color match the gradient of the background color from the previous div, while ...

javascripthtmlcss

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

In my index.js file, I have various functions set up like so: // a and b is placed at index.jsp $("#a").click(function (){ //this works on index.jsp and display.jsp(where the servlets forwards it). $("#b").load('servletA.html?action=dis ...

javascriptjqueryhtmljsp

The Vue.js component was unable to retrieve the data

I am facing an issue with accessing data inside a simple component. Here is the code for my component: <template> <!-- success --> <div class="message-box message-box-success animated fadeIn" id="message-box-success"> <div cl ...

javascriptvue.jsvuejs2vue-component

The functionality of Ajax is limited to a single execution after form submission

I am currently working on developing a login widget that makes use of ajax within the user interface of Wordpress. I have successfully created a form, implemented ajax, and set up a response system. However, I am experiencing an issue where the form only f ...

jqueryajaxwordpressforms

Unable to make changes to the text within the textarea field

Currently, I am in the process of creating a script to streamline the tedious task of providing teaching feedback. To scrape data such as student names and classes, I am utilizing selenium/python. While everything is running smoothly, I have encountered an ...

javascriptpythonhtmlselenium

Unusual behavior of the `map` function in Firefox's JavaScript

Here's an interesting observation regarding the behavior of the map function in Firefox. In a particular error scenario on a web application, when Firebug pauses at the error, entering the following code into the Firebug console: ["a", "b", "c", "d" ...

javascript

A Guide to Effortlessly Implementing moment.js into a React TypeScript Application

I'm attempting to implement code splitting and one of the specific packages I want to separate into its own chunk is moment.js. Here's how I'm doing it: const myFunc = async (currentNumber) => { const moment = (await import('momen ...

javascriptreactjsmomentjscode-splitting

How does the call method on array.prototype.includes work with arguments x and y?

Curious about the functionality of array.prototype.includes.call(x, y);. Discovered that includes() confirms if an array has the specified value and provides a true or false result. Learned that call() invokes this alongside any optional arguments. The ...

javascripttypescript

Utilizing AJAX to seamlessly transfer id elements to a database

I have the following working code: <script> function displayUserData(str) { if (str=="") { document.getElementById("userDetails").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLH ...

javascriptphpjqueryajax

Using Vue.js to dynamically populate all dropdown menus with a v-for loop

Getting started with vue.js, I have a task where I need to loop through user data and display it in bootstrap cols. The number of cols grows based on the number of registered users. Each col contains user data along with a select element. These select ele ...

javascripthtmlvue.js

The error message "gulp error - _.flattenDeep is not a function when using gulp.watch" is indicating

Whenever I run a watch task, why am I encountering the TypeError: _.flattenDeep is not a function error? Below is the content of my gulpfile.js : var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require(&a ...

javascriptnode.jsnpmsassgulp

When utilizing Dynamic Links for routing in Next.js, the props are not successfully passed to redirected components

Currently, I am immersing myself in the world of Next.js with the help of the book "Building React Apps using server-side rendering". As part of my learning process, I am constructing a basic react application that consists of an index page linking to an ...

javascriptreactjsnext.jsnext.js13nextjs-dynamic-routing

The footer section of my website seems to have gone missing in the HTML/CSS coding

I'm having trouble with my website footer not displaying. I've tried using "position: absolute; top: 50px; left:100px;" in my HTML/CSS, but it's not working. Can anyone help me fix this issue? Here is a link to the code I'm working on: ...

javascripthtmlcssfooter

What is the best way to restrict the length and number of lines in a textarea based on pixel dimensions?

I am looking to create a textarea where people can select different fonts, such as "sans-serif" and "serif", to type in text. I plan to have buttons labeled "sans-serif" and "serif" that will change the font of the textarea when clicked. However, there ar ...

javascriptjqueryhtmlcsshtml5-canvas

Reordering items in Angular2 ngFor without having to recreate them

I am facing a unique situation where I must store state within item components (specifically, canvas elements) that are generated through an ngFor loop. Within my list component, I have an array of string ids and I must create a canvas element for each id ...

javascriptangularcanvashtml-rendering

Validating groups of fields using Angular fieldsets

AngularJS validation is working well with ng-required. However, I am interested in checking if all the form elements within my fieldset are valid. <form> <fieldset> <legend> Part one <img src="/co ...

javascripthtmlangularjsformsvalidation

Upon the initial rendering, Next.js obtains access to the query { amp: undefined }

When using Next.js 9.3, I encountered an issue where I needed to access the query on initial render and pass the result of the query to next/head in order to change the title and description of the page. The component is receiving the query from the useRo ...

javascriptreactjsnext.js

Ways to display a default view in React

I am working on a React website that has three different routes. My goal is to have the first route, named Home, automatically displayed when a user lands on the site. Below is the code snippet from my App.js: <Router> <Navigation /> <Sw ...

javascriptreactjs