Want to go back?
Frontend vs. Backend Development
How Does the Internet Even Work?
When you visit a URL like https://www.vcahospitals.com/, what happens?
Here is a simplified diagram of the client-server model:
Source: Mozilla.org
When a User enters in a website name (web address), a request is made to the Server for that company. That server stores all the data for that company and will return the data which was requested. The Client (browser), will then display that data and allow the user to view and interact with the requested data.
What is Backend Development?
Backend engineering is concerned with managing and manipulating data (aka information).
When we talk about backend engineering, we’re often thinking of the programming tasks involved in making this possible:
- Storing data and accessing it later
- Verifying that data is accurate
- Manipulating, analyzing, and/or calculating data
- Making sure data can be retrieved quickly and easily
Backend Programming Languages
There are numerous technologies that can be used for backend programming. Here are a few of them:
- Languages and frameworks: Ruby/Rails, Python/Django, Elixir/Phoenix, Java/Spring, and more.
- Databases: PostgreSQL, MySQL, Oracle Database, MongoDB, etc.
What is Frontend Development?
The frontend is the part of the application that users see, touch, and interact with.
When we’re talking about web development, the frontend is the part of the code base that takes care of rendering the user interface in the web browser.
The frontend will prompt users in various ways to collect information which can be used to customize the user’s experience within an application.
Today, we are going to focus on the frontend!
Frontend Programming Languages
Almost every frontend web application is built using HTML, CSS, and JavaScript.
It can feel like a lot, but let’s start by understanding the role of each language in the context of our application. We will make some comparisons to the human body as a frame of reference.
HTML
HTML holds the content we see on a page (text, images) and defines the structure and order in which the content appears.
We can think of HTML as the skeleton of our webpage; without it, we'd just be a blob:
CSS
CSS defines the look and feel of a webpage - it can change the size or layout of items on a page, change colors, fonts, and more!
We can think of CSS as anything that makes us unique and recognizable - our skin, hair, clothes, style, etc.
JavaScript
JavaScript is what lets the user interact with a page. For example, clicking a button and getting some sort of response.
We can think of JavaScript as the brain and muscle of our webpage, as it powers all the action:
Interested in learning more about FE vs BE?
Come to a What is Front End, Back End, and Full Stack Development? workshop! You can see a list of upcoming events here!