Front-End vs Back-End Developer

This is the second article of my How to Become a Web Developer and Get a Job guide. Within it, we’ll discuss what coding is, as well as the difference between being a front-end vs back-end developer.

If you want to learn to code so that you can become a web developer, welcome. You’re in the right place.

Before we discuss what kind of web developer positions are available and what the differences between front-end, back-end, full-stack, and DevOps are, I’m going to take the scenic route and start with what coding is.

This is necessary because I make virtually no assumptions about your existing knowledge. If you are an absolute beginner, this is the guide for you.

What is coding?

Coding is the act of writing code to program machines like computers and mobile devices. OK, what is code then? Code is the set of precise instructions we give to said machines to execute the actions we want them to take.

The instructions need to be precise because computers, unlike humans, cannot make a bunch of assumptions on the basis or prior experience.

If I asked you to draw a house, you’d probably start jotting down something reminiscent of what a 5 year old would draw. You’ll start with a box, add a pointy roof, a door, a window, etc. If you are really artistically inclined, you might draw a 3D version that looks nicer. In either case, you will be able to handle my generic, open-ended request and deliver something that satisfies it.

Generally speaking, the computer cannot assume what the house should look like, as you would. How thick should the lines be? What color (if any at all) should be used? How big should the house be? What style? And so on.

In short, a computer didn’t draw houses in kindergarten. Yes, it can draw amazingly intricate houses with fantastic degrees of detail, but you’ll need code that very precisely instructs it to do so.

Consider the calculator application that is installed by default on your computer.

A programmer wrote a bunch of code so that when you click on the Calculator icon, the computer launches the application on your screen, presenting you with a series of numbers and operators to choose from.

As you interact with the application, for example by pressing 6, x, 7 and =, the computer, instructed by the programmer’s code, will know what to do. (Namely, multiplying the two numbers and displaying the result for you.)

What’s the difference between a program and an application?

Some computer programs do not have a visual user interface at all, in which case we do not call them applications.

That’s the main difference between a program and an application. They both require code, but only applications have some kind of visual user interface that the user can interact with.

The user interface (UI) doesn’t have to be a window within your desktop operating system (e.g., Windows or MacOS). It can be on your mobile device or even a web page that you access through a web browser like Chrome or Firefox.

Different types of applications and developers

An application that you access on your desktop computer is called… drum roll… a desktop application. One that you access on your mobile device (e.g., Apple or Android smartphone) is called a mobile application. And one that you access through a web browser? You guessed it, a web application.

It turns out that the type of code we must write to create these different types of applications is somewhat different depending on the type of application we are creating.

Many of the concepts are the same but the programming languages, libraries (essentially, prewritten code), tools, and problems you’ll face as a programmer will be different depending on which platform you are targeting.

This is why professional programmers will often specialize in one or maybe two of these types of application development. So, you can be a desktop developer (less common these days), a mobile developer, or a web developer.

Sometimes, you’ll hear the term “app developer” which is a synonym for a mobile developer, given that “app” is often used to specifically refer to mobile applications.

Some programmers specialize even further, and are just iOS developers or Android developers, depending on the type of mobile devices they target.

Since not all programs are applications, it’s worth noting that there are many other types of developers who don’t work on applications.

For example, those who work on the operating system itself, programs that facilitate networks of computers to communicate, or code that enables hardware components to communicate with each other.

The Web won

There are plenty of viable careers to be had in mobile and other types of development, however since the aim of this guide is to help you become a web developer, we are going to focus on this particular subset of the development landscape.

Twenty-five years ago, the majority of developers were desktop developers (or a specialized version, like a Windows developer).

Over the past two decades, the web exploded in popularity. So it might reassure you to know that today the overwhelming majority of programmers are web developers.

The web is certainly not going anywhere, so the skills you acquire will serve you well for a long time to come.

Static vs dynamic pages

Alright, let’s focus on web applications. What are they and how do they work?

Let’s start with a simple web page, rather than a full-blown web application. When you visit https://antoniocangiano.com, my homepage, you are visiting a very simple static page.

My homepage is a so-called “static page” because it doesn’t dynamically change. For example, it doesn’t pull the data from a database like when you search for a product on Amazon.

It’s just a static document containing some text, images, and links organized in a somewhat logical and pleasing (if minimalist) manner.

When the web first come about in the early 90s, that’s all it was for the most part. A bunch of static pages linking to each other.

When server-side dynamic web pages became common, it transformed the web. We could now, among other things, collect information from the user, store it in a database, and dynamically display to the user content on the basis of their request.

You could even customize the page that was rendered to the user on the basis of who was logged in, for example.

Over time, these capabilities evolved to a point where web applications can deliver rich desktop-like interfaces and user experience.

Technically, this blog you are reading is a web application written in HTML, CSS, JavaScript, and PHP. It allows me to log in as an administrator and write blog posts. It allows you to comment, search for posts, subscribe to my RSS feed, see related content, and much more.

Web applications can be as simple as a plain todo list or as complex as the online version of Microsoft Excel or an elaborate video game.

How does requesting a static page work

When you type https://antoniocangiano.com/ in your browser’s address bar and press enter, the following steps take place:

• A DNS (Domain Name System) server is called to translate the hostname antoniocangiano.com to an IP (Internet Protocol) address where the site is actually hosted. You can think of DNS as white pages for the internet, where instead of people’s names being mapped to their phone numbers, you get website names mapped to their servers’ IP addresses. Knowing the IP address of the server hosting the site will allow your browser to send the request to the right server among the millions of servers available on the internet.
• The request you made tells the server that you want to get the page/information available at /. The server will grab the index.html file for my site and send it back to your browser as a response. (On a static site, / will typically render index.html just like /about would render the content of about.html. This is by convention and not always the case.)
• Within that HTML file, I also reference a CSS file on the server, some images, and a little bit of client-side JavaScript. Your browser will request all of these elements from the server, and ultimately render the HTML page for you to see.

(This is a simplification, but conceptually these are the major steps.)

There is no back-end development going on here. HTML, CSS, and client-side JavaScript are all front-end development technologies.

HTML provides the structure and content of the page. CSS determines the style of the page (font size, spacing, padding, colors, etc.). And JavaScript determines some behaviors of the page as you interact with it.

In the case of my homepage, when you move your mouse over the icons at the top, you’ll see a little tooltip pop up appear. That’s a bit of JavaScript in action.

I clarified that it’s client-side JavaScript because nowadays there is also server-side JavaScript which is indeed in the scope of back-end development. When I say “client-side”, I mean JavaScript that is executed by your browser.

How does requesting a dynamic page work

Web applications are collections of dynamic pages (and sometimes dynamic and static pages). Requesting a dynamic page is conceptually similar to requesting a static page, but behind the scenes there are a few more steps taking place.

For example, let’s say that you enter “iPad” in the search box of this site and press enter. You’ll notice in the address bar that you’ve made a request for https://programmingzen.com/?s=ipad.

There is no ipad.html file on the server, given that you could have typed anything into the search field.

(Ignore caching for the sake of this simplification, if you are already familiar with the concept.)

So behind the scenes, instead of locating the static file and issuing it in response for the browser to render, there are two extra steps:

1. The web server understands that you want posts related to the iPad. So the dynamic page will send a request to a database server that contains all my posts. Using a language called SQL (Structured Query Language), it will ask for a list of posts containing the word “iPad”.
2. With that information available, the web server will execute the code in the dynamic page which will use the list of posts to formulate a response which includes a series of neatly arranged iPad-related posts.

Ultimately, what’s sent to your browser is still a bunch of HTML, CSS, and JavaScript. However, it didn’t come from a file on your server. It was dynamically generated based on information stored in the database.

Imagine for a moment that some posts on my site were available only to subscribers. The code of the dynamic page would need to check whether the person is logged in or not, whether they are a subscriber, and then alter the response accordingly.

If the user is a subscriber, include subscriber-only iPad posts in the list, if they are not, exclude those posts and just return the free ones available to everyone.

As you can imagine, the ability to dynamically generate the response depending on certain conditions is quite powerful and is the basis of how web applications work.

Front-End vs Back-End technologies

In terms of technology, what did we add to the HTML, CSS, and JavaScript front-end stack? We added code to the dynamic pages which can then make calls to a database and generate a customized response. PHP and SQL code in my case.

This code can be written in a variety of programming languages, however. Some popular examples are Python, Ruby, Java, Elixir, and even server-side JavaScript.

We’ll discuss why you’d use one language over another or which to choose to land a job, in the next installment of this guide. For now, know that back-end development will require you to be familiar with a server-side programming language.

You’ll also need to know SQL and be familiar with how databases work.

Truth be told, back-end developers will need to know quite a bit more than just another programming language and databases.

For example, they’ll typically leverage a web framework like Ruby on Rails, Django, Flask, or Express.js to be more productive and write fewer lines of code to implement the features needed by the web application.

So you’ll also need to develop familiarity with whichever framework is most popular for your language of choice.

A lot of front-end developers are not writing plain JavaScript either. They too have to worry about frameworks and libraries, typically for JavaScript (and even CSS). Popular JavaScript options are React, Vue, Angular, and Ember.js.

Front-end developers will also need to worry about accessibility and providing a good user experience (UX) for the end-user. Huge topics that have dedicated specialists in their own right.

We’ll cover what you need to study in the next article of this guide.

Front-End vs Back-End developers

While it is good to have an understanding of both front-end and back-end, most web developers end up specializing in either front-end or back-end.

Historically, front-end development had a certain stigma. It was perceived as easier. These days, I don’t believe this is a valid stance anymore.

The capability of web interfaces has grown dramatically over the years and so did the complexity of technologies leveraged to build such interactive and rich user interfaces.

It’s worth noting that back-end developers’ salaries still tend to be higher than front-end developers’ ones. But this might be at least in part because the majority of beginner web developers start with front-end technologies.

After all, you can’t be a back-end developer without knowing the fundamentals of HTML, CSS, and JavaScript, but you could in theory be a good front-end developer without knowing server-side languages and SQL.

Of course, exposure to both sides of the Web development line is always beneficial.

Full-Stack developer

Full-Stack developers are unicorns born in an enchanted forest located where the Hanson and the Eich rivers meet.

More seriously, it’s rare for someone to be amazing at both front-end and back-end development, but there are plenty of developers who are competent at both.

Larger companies tend to prefer specialized people, because they have the resources to hire larger teams that will include both front-end and back-end developers.

Startups and other smaller businesses might only be able to have one or two developers on hand, and therefore might find a full-stack developer who can build the entire web application to be a more practical option.

DevOps specialists

Writing web applications is only one part of the equation. You then need to deploy them somewhere on the internet so that they’re available to the public. (Pushing code to production, to use common lingo.)

You also need strategies to keep them running smoothly and handle updates and new releases of the code you write.

In smaller operations, this often falls on the web developer’s shoulders. Over the years, however, the role of DevOps engineer became its own profession.

Today, larger organizations will hire DevOps specialists/engineers to work alongside developers and system operators/administrations to ensure the best deployment practices.

As you work on becoming a web developer, you’ll inevitably pick up some of the skills possessed by DevOps. However, you don’t need to become a DevOps expert, unless you discover that it’s what you enjoy the most and decide to pursue that as your career.

Which one should you choose?

It’s way too early for you to commit to becoming a front-end, back-end, or full-stack developer.

The best you can do is learn the fundamentals and then decide on the basis of what you enjoy the most, what comes more naturally to you, and ultimately what you tend to be good at.

Some people might struggle with grokking databases but are capable of creating wonderful user interfaces. Others might be very good at solving algorithmic problems but fail miserably at putting together a user-friendly UI.

You’ll find out where you fit very soon.

What’s next?

In the next article of this How to Become a Web Developer and Get a Job guide, we’ll cover the technology stacks I recommend to maximize your chances of becoming a professional web developer and landing a job.

I’ll also discuss which languages, technologies, and tools you need to study to break into this industry.

That master list can act as a road map of skills you must acquire in the upcoming months to become a web developer.