Introduction to Backed Development
Frontend and backend communication
Frontend application is the main part of the application which end user can see and interact with. It is usually are designed with some web design pattern and uses frontend application development framework like React, Vue or Angular. Everything you can see is finally only combination of HTML, CSS and JavaScript which is running in your browser (if application is made with web technologies). Nowadays web applications are a full applications not only static web pages.
Backend contains usually a server, a server side application and a database. These nice frontend application connects to server and uses server side application to read or store data to the databases. Backend technologies usually consist of languages like PHP, Python, Node.js, etc. Web browsers communicates via HTTP with the server.
Note
In this course, we'll be talking about servers that serve HTTP requests made by the client, in other words the web browser and we'll be using the Node.js at the backend.
Static sites
When a user wants to navigate to a page, the browser sends an HTTP "GET" request specifying its URL. The server retrieves the requested document from its file system and returns an HTTP response containing the document and a success status.
Dynamic sites
A dynamic website is one where some of the response content is generated dynamically only when needed. A dynamic site can return different data for a URL based on information provided by the user. Most of the code to support a dynamic website must run on the server. Creating this code is known as "server-side programming".
Server side vs. client side
They generally don't use the same programming languages (the exception being JavaScript, which can be used on the server and client side). They run inside different operating system environments. Server side code can be written in any number of programming languages. While both client and server-side code use frameworks, the domains are very different. Web developers can't control what browser every user might be using to view a website.
How communication works
Server is essentially a program which listens for incoming requests and then serves them, thus the name "server". Clients send requests using a protocol called HTTP. These requests target resources identified by URIs. The request also defines a method, with the most common method being "GET".
Request
A simple HTTP request might look like the following:
1 |
|
This request defines the following:
- The request method is
GET
- The protocol is
HTTPS
- The host is
jamk.fi
- The path is
fi/Etusivu/
The request also uses defaults for various things, such as the port of the server. For example, default port for HTTPS protocol is 443.
Response
Server will send a response about received request. Response will contain a lot of information about the request (for example):
- The version of the HTTP protocol
- A status code, indicating if the request was successful, or not, and why.
- A status message, a non-authoritative short description of the status code
- HTTP headers, like those for requests
- Optionally, a body containing the fetched/requested resource. In above case a JAMK website materials/files.
Example
Here is a small example made with Node.js and Express. This example defines new API endpoint (route) to handle GET request and return one user to the caller.
server.js | |
---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
Test GET
request to http://localhost:3000/users/1 with a Postman or browser. You should see the returned user JSON data.
Backend Developer
Backend developer are responsible for creating the entire back end of a client side application. This includes the core application logic, databases, data and application integration, API, and other back end processes. The backend runs a delivers a website or data endpoints, which the user doesn’t see or interact with, but it is always running behind and delivering functionality to client side app.
Responsibilities of a backend developer:
- Database creation, integration, management
- Backend frameworks to build server side application
- Server-side programming languages
- API integration
- Operating systems
- Security settings and hack prevents
- etc...
Read more
Goals of this topic
Understand
- The basics of what frontend and backend actually means.
- The client-server separation and that it is not limited to a browser and an HTTP server.
- The basics of HTTP communication.