Skip to content

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.

Image 01

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.

Static Site

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".

Dynamic Site

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
http GET https://www.jamk.fi/fi/Etusivu/

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
const express = require('express') 
const app = express()
const port = 3000

let users = 
[
  { 'id':'1', 'name':'Kirsi Kernel' },
  { 'id':'2', 'name':'Matti Mainio' }
]

app.get('/users/:id', (request, response) => {
  const id = request.params.id
  const user = users.find(user => user.id === id)
  response.json(user)
})

app.listen(port, () => {
  console.log('Example app listening on port 3000')
})

Test GET request to http://localhost:3000/users/1 with a Postman or browser. You should see the returned user JSON data.

!Image 04

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.