Article

Frontend vs. backend: what's the difference?

By Marcelo Pastorino

Frontend and backend are two of the most used terms in the computer industry; in a way, they became buzzwords. They dictate the type of job you do as a software developer, the technologies you use and how much you get paid.

So, let's talk about the differences between these two terms, why they exist in the first place and the different paths you can take in your software development career.

Site rendering

To begin this journey, we need to understand the concept of site rendering. In layman's terms, site rendering means generating or rendering HTML output. HTML is a markup language that web developers use to create web pages. It's said that site rendering can happen both at server-side or client-side level, so what does this mean? It's worth noting that frontend and client-side are synonyms. The same is true for backend and server-side.

Server-side rendering (backend)

Not until too long ago, server-side rendering, or back-end web development, was the de facto way to create websites and web applications. You visit a page, send a request for content, the server processes this request and creates a response that is sent back to your browser.

When a site renders server-side, all the processes involved in creating an HTML page that your web browser can understand are handled on a remote server hosting the website or web application. This includes querying databases for information and processing any logic that your web application requires.

While the remote server is busy at work, your web browser is idle, waiting for the server to finish processing the request and sending a response. When the response is received, web browsers interpret it and display the content on the screen.

Client-side rendering (frontend)

In more modern days, a new form of site rendering emerged called client-side rendering or front-end development.

With client-side rendering, the rendering of the content happens in your computer instead of the remote web server using the de facto language of the web, JavaScript. In practical terms, it means that a server is only needed to serve the raw web application, and the browser will be in charge of rendering this application in its final form, HTML. It also means that some of the logic involved in creating the web page, especially the one in charge of dealing with how things are presented to the user on the screen (called presentation logic) are handled on the client-side.

Client-side rendering became popular with the advent of JavaScript libraries such as Angular, React and Vue.

Isomorphic rendering

Also called universal rendering, isomorphic rendering is a new technique used in modern web development. The idea behind isomorphic rendering is to render a web application developed with a JavaScript framework such as Angular, React or View, on the server-side the first time a page is loaded and on the client-side afterward.

To complicate things even further, there is yet another form of rendering called pre-rendering that renders content at compile time.

Where to render a site is a decision that is often based on the type of application and application demographics and will vary from team to team and business to business.

What is front-end development?

Now that we understand the different types of site rendering methods, it's easier to understand that front-end development is the art of creating sites and web applications that render on the client-side.

Technologies used for front-end development

While there are many different types of technologies and stacks, most front-end web developers use HTML, CSS and JavaScript, the de facto building blocks of the web, and client-side frameworks such as Angular, React, Stencil and Vue.

Not everything happens on the frontend, though. Client-side rendered applications still rely on services and APIs that run on back-end remote servers or the cloud.

What are some front-end jobs?

  • Web designer: A web designer, you guessed it, designs websites. The job title of web designer is pretty broad, though. A web designer could just be someone who designs the sites in a program like Photoshop or Fireworks and will never touch the code. But in another location, a web designer could do all the design comps in Photoshop and then be responsible for creating all the HTML and CSS (and sometimes even JavaScript) to go along with it.

  • User interface (UI) designer: This is basically a visual designer and is generally focused on design. They're not usually involved in the implementation of the design, but they might know light HTML and CSS so they can communicate their ideas more effectively to the front-end developers.

  • User experience (UX) designers: UX designers work in the frontend, studying and researching how people use the sites. Then, they make changes through a lot of testing.

  • Front-end developer:  Also called a front-end designer, they can create a site without any back-end development. The site they would create without a web developer, or using the backend, is a static site. A static site is something like a site for a restaurant or hair salon. It doesn't require any information to be stored in a database. The pages will almost always stay the same, unless it's time for a redesign. A front-end developer may be required to have a grasp on testing, as well as be well versed in HTML, CSS and JavaScript. This person may or may not have experience with creating the design in a design program. A different version of this title is front-end engineer. People who work with specific front-end languages like JavaScript developer are also considered front-end developers.

 

What is back-end development?

While front-end development is about making sites and web applications render on the client-side, back-end development is all about making these apps render server-side. But it's a bit more involved than that. While the previous statement holds true, back-end developers also create services that process business logic and access other resources such as databases, file servers, cloud services and more. These services are the backbone of any application and can be accessed and used not only by server-side rendering apps but also from client-side rendering apps.

Technologies used for back-end development

When back-end developers create apps that render on the server-side, they use the same building blocks as front-end developers: HTML, CSS and JavaScript.

Back-end developers also work with software stacks that include operating systems, web servers, frameworks, languages, programming APIs and more. The frameworks, languages and programming APIs in these stacks are used to render server-side sites and web applications and to create services that other applications can consume.

Notorious stacks include .NET, MEAN and LAMP, but there are many more, and each includes a programming language of choice, such as C#, JavaScript, Java, Go, Python or PHP.

What is full-stack development?

As a developer, you don't have to settle for just frontend or backend; you can do both as a full-stack developer. This is, in my experience, where the fun begins. Full-stack developers can create sites and web applications that render both on the client-side (frontend) and the server-side (backend).

They also create services, components and APIs that encapsulate business logic, solve specific business problems and access infrastructure such as databases, file servers, cloud services and more. They work with the full stack and it's the best of both worlds.

Summary

By now, the difference between the frontend and backend should be more evident, as well as the different activities carried by developers that work on both ends of the wire. In practical terms, the frontend means the browser and the backend, the server or, more recently, the cloud.

If you like user interfaces, are keen on sound design and like the visual aspects of creating apps, then perhaps the frontend is where you want to spend your time as a software developer. The frontend is exciting not only visually, but also from a programming standpoint; you will spend endless hours writing logic that will make your site look and behave the way the designers intended.

If you like to spend your time solving business problems, writing algorithms, working in the cloud, and creating services and APIs, then the backend is for you.

If you enjoy both and feel equally excited and comfortable with all aspects of web application creation, then a career as a full-stack developer is what you want.

Whatever path you choose, there has never been a better time to be a software developer.

About the author

Marcelo has 18 years professional experience solving business problems by architecting solutions and developing software for the web, cloud, and mobile using C#, .NET Framework and .NET Core, Azure, Xamarin, JavaScript and modern front-end frameworks among other technologies.