Lesson Weekend

Sinatra is a server-side framework. Before we begin writing our first web applications with Sinatra, let's learn more about what it means to be server-side.

Server-Side Applications


In a server-side application, the client's request to view a page depends on the server delivering the correct content for that specific page to the client — whether that's HTML, CSS, or other resources. The client then renders this content for the user.

Before we can discuss what server-side means, we must first understand the difference between a client and a server. We covered this in a previous lesson but let's quickly review.

Clients & Servers

A client is usually a web browser like Chrome but can be anything that facilitates interaction with the web. A server is a machine that contains resources like web pages, files, and databases. When a client requests those resources, it provides them in an HTTP request to a server. For example, here's what happens when we visit Epicodus' website in our browser:

  • We type http://www.epicodus.com into the URL bar and hit Enter.

  • The client (our browser) constructs a request formatted with HTTP protocol to the server Epicodus' site is hosted on.

  • A DNS server locates the IP address of Epicodus' server by resolving the http://www.epicodus.com URL.

  • The client's request is sent to this IP address.

  • The server receives the request. It constructs and sends a response, also formatted following HTTP protocol, containing the resources necessary for that specific page.

  • The client receives the response and uses the included resources to render the page.

  • As we continue navigating the site, our client communicates with the server. Each time a new page is visited, the client must send another request to the server for information for that specific area of the site. And, unless something goes wrong, the server continues to respond with new content. This ongoing conversation is called a request-response loop.

This process is considered server-side because the server is responsible for sending required content for the specific page a user attempts to view. The server is also continually contacted as the user navigates the page, in that request-response loop.

By the way, even though we haven't built any server-side applications yet, we have some experience already with communicating with servers — specifically, we know how to make an API call to a server.

Client-Side Applications


We specify that frameworks like Sinatra are server-side because not all frameworks follow this same pattern. It's important to denote which do and which don't. Other types of applications such as React are considered to be client-side. These rely on the web client to locate resources for specific pages and then to render the site instead of contacting the server each time a user wants to see a new page. Also, all the projects we built in Introduction to Programming and Intermediate JavaScript, which didn't use frameworks, are client-side.

How does this work? Let's say we have a site at www.fancyclientsidesite.com/. It's built with a client-side tool instead of a server-side framework like Sinatra. Here's what happens when we visit and interact with it:

  • We visit the site by entering its URL (or clicking a link) in our client.

  • The client constructs an HTTP-formatted request to the site's server to retrieve the necessary resources to render it.

  • A DNS server locates the IP address of the site's server by resolving its www.fancyclientsidesite.com/ URL.

  • The client's request is sent to the specific IP address.

  • The server receives the request. It constructs and sends an HTTP-formatted response. But the response doesn't contain just the resources necessary for one specific page. It actually sends one big file containing all resources and code for all pages in the entire site!

  • When we later navigate to a different area such as www.fancyclientsidesite.com/about-me, the client doesn't send another request to the server. Instead, the client is responsible for locating the new page's resources in the big response the server sent the first time because this response contains everything necessary for the entire site.

Conclusion


  • When users navigate server-side applications, the client enters a conversation with the server known as a request-response loop. Each new area a user navigates to results in a new request to the server.

  • In client-side applications, the server is contacted once and all content for the entire website is provided. When users navigate to new areas, the client has to find resources for that new page in the single big response instead of contacting the server again. Note that more complex client-side applications will combine the client-side application with requests to a server as needed.

  • Sinatra is a server-side framework. It will make a series of requests to the server in a request-response loop. This includes a new request for each page or area the user navigates to. For that matter, Rails is also a server-side framework as well.

Lesson 3 of 37
Last updated August 7, 2022