I learned JavaScript from the basics to a deeper level, thanks to The Modern JavaScript Tutorial. Now is the time to understand the backend. Although I've previously worked on full-stack applications using MERN and PHP, I've been away from it for some time. Through this series of blog articles, I plan to revisit the fundamentals and, hopefully, explore a little deeper into concepts for a better understanding.
- Difference between Front-End and Back-End
- How Client-Side and Server-Side Communicate
- How Back-End Works
- Use Cases for Back-End Systems
Difference between Front-End and Back-End
Front-End
The front-end is code executed on the client side. It creates the user-facing and interactive parts of the website. Client-side code is written in HTML, CSS, and JavaScript and runs inside a web browser, which has little to no access to the underlying operating system.
Back-End
The back-end is code that runs on the server, handling requests from a client and managing application data. Back-end or server-side code can be written in various programming languages, such as PHP, Python, Ruby, C#, and JavaScript.
Usage of Frameworks
Frameworks are layers that provide useful tools to speed up coding.
Front-end code can be written without frameworks, but frameworks help accelerate development. On the other hand, writing backend code without a framework is rarely an option.
Source: MDN
How Client-Side and Server-Side Communicate
Web browsers communicate with servers using the HyperText Transfer Protocol (HTTP). An HTTP request is sent when a link is clicked, a form is submitted, or a search is performed. The HTTP request includes a URL, a request method (such as GET, POST, PUT, or DELETE), and any additional data needed. The server receives the request, processes it, and sends back an HTTP response, which contains a status code (e.g., 200 for success) and the requested data.
Static Sites
A static site is one that always returns the same hard-coded content from the server in response to requests, such as retrieving a new page when navigating between pages.
Dynamic Sites
A dynamic site returns content generated dynamically, such as an HTML page with data inserted from a database. Most of the code for a dynamic site runs on the server.
How Back-End Works
The back-end primarily consists of three main parts:
1. Server
A server is a computer that listens for incoming requests from clients. A web server may also store website files (such as HTML, CSS, and JavaScript) and facilitate communication over the internet.
2. Application
An application processes incoming requests, retrieves data from the database, and sends back responses. The server runs the app, which contains logic to handle requests. The combination of HTTP methods (or verbs) and a Uniform Resource Identifier (URI) is called a route, and matching these based on a request is called routing.
Middleware refers to functions executed between receiving a request and sending a response. These functions may modify the request, query the database, or perform other processing tasks before passing control to the next middleware or completing the request-response cycle. Frameworks like Express simplify routing and middleware handling.
3. Database
A database is a system for organizing and storing data persistently. Using a database reduces the load on the server's main memory and ensures that data can be retrieved even if the server crashes or loses its connection.
Source: Codecademy
Use Cases for Back-End Systems
- Efficient storage and delivery of information
- Customized user experience
- Controlled access to content
- Store session/state information
- Notifications and communication
- Data analysis
Source: MDN
In this blog article, I discussed what the back-end is and its key components. As mentioned, frameworks play a significant role in back-end development, so I plan to begin learning about Node.js to deepen my understanding.
Top comments (0)