Web Development Basics: Front-End vs. Back-End

Okay, I’ve started out on a pretty generalized foot about why web development is in need of more women, but maybe it’s still unclear what web development actually is. Being a beginner myself, I think it’s easiest to talk to other beginners when I’m not yet too deeply entrenched in technical jargon and expertise. I’d like to talk about web development, the careers that are available once you gain relevant skills, and what kinds of traits make a good developer!

Clients and servers: The basics

First off, there are two sides to all interactions that happen when a user “requests” a website. In every interaction, you have a client and a server. As these are pretty semantic terms, you can visualize that the client is coming to the server asking for something, and the server either says “ok! here you go!” or “nope (and maybe “this is why not”, if errors are being handled appropriately, but that’s another topic)”.

A server is typically just a computer in a remote location — maybe someone’s house, or maybe a giant data center housing thousands of them. That computer has been loaded with software that is designed especially to listen for these types of requests, and respond appropriately. Perhaps you’ve even heard of Apache, which is the most popular open-source Web HTTP server (HTTP stands for Hypertext Transfer Protocol, the basic network protocol used to distribute information on the World Wide Web).

Let’s say you type www.google.com into your browser. What’s actually happening is that your browser is the client. Maybe you are using Google Chrome, Mozilla Firefox, or Internet Explorer. The browser communicates with the server that has the content you are asking for, based on the web address you typed in (google.com).

It gets a response if the site is up and running, and the server hands back what the client asked for. In this case, it’s the main page of Google. The end result is that your browser renders the response visually and interactively, and you see Google’s front page.

Catch all of that? Don’t worry if not — I’m always available for questions, and anything I write is going to be based on feedback received. 🙂 So if you’re with me so far… let’s examine some of the types of careers out there in web development. Please keep in mind that these are my own definitions and impressions of what each area does, and by no means a complete description!

Front-end web development

“Front-end”, or client-side web development, involves working with web browser languages, and the way they render the data a web server sends back after a request. As you can imagine, as there are different types of browsers out there in the world, it’s important to make sure that they are all rendering your website the same way. Or, as close to it as possible.

Front-end developers work with languages like HTML, CSS (Cascading Style Sheets), and JavaScript or jQuery. All of these languages control everything from the way your browser behaves when you hover over or click on a link, to where an image might appear relative to other information on the screen. I’ll be going into more detail about what each of these languages do, but the important part to know is that this tends to be a largely visual-based career. You will write code, or text, that tells the browser what to do… but you will know when it works or doesn’t work pretty much immediately.

You might enjoy front-end web development if you:

  • Have ever worked with and enjoyed print design
  • Have an eye for detail
  • Enjoy working with color palettes and get excited by sites with great style
  • Like to get immediate gratification through visual effects (i.e., you change a line of code, and the webpage appears/behaves differently)

There’s a lot more to front-end web development than this, but I’ll be going more in-depth with each in future posts. In the meantime, there are tons of resources out there for someone sniffing around front-end web development! Udacity has a good extension of my information on their article How to Become a Front-End Web Developer, and Andy Orin over at LifeHacker wrote up a brief overview of what he does and enjoys most as a front-end web developer.

Back-end web development

“Back-end”, or server-side web development, involves working with client-side scripting languages, which dynamically return content to the clients.

Let’s say you’re creating a website, and you want an area that shows information relevant ONLY to the person who is logging in once they enter their credentials. How is the browser going to know who it is, validate their information, and then return just their information to the screen? This is where back-end web developers come into play, and this is my area of choice.

Server-side languages include PHP (and PDO or PHP Data Objects, as an extension), RubyPythonSQL database scripting, and even server-side variations/extensions of front-end languages like Node.js and AJAX (which are essentially JavaScript, but on the server rather than the client end). Sounds like more work than the front-end, right? It can be, but it’s equally important.

You will write code that gets sent to a special server that handles each language, where it’s parsed and returned dynamically. In other words, the user can look at the source code on their personal login page and only see their name in HTML, not the query for their name.

The end result is customizable content that is specific to different scenarios, users, and logic flows. If you choose to work with databases, where user-inputted information is stored for long-term use, then you’ll also need to learn how to tell a server to call that information.

You might enjoy back-end web development if you:

  • Enjoy logical thinking and problem-solving
  • Get excited by data
  • Already understand I and enjoy working with spreadsheets (particularly relevant to databases, which are essentially strings of spreadsheet data)
  • Get easily annoyed by pixels and things not lining up correctly like I do, or differences in the way browsers render things *twitch*

Still don’t quite get the differences?

That’s okay! The two are not mutually exclusive, and some crazy folks even decide to cover both in their careers, building websites on the front and back end — they are known as “full-stack developers”, and they get my total respect and admiration. Our superpals over at Treehouse have already blogged about some of the differences, and offer their own (more professional) perspective on what makes up the different aspects of web-development: I Don’t Speak Your Language: Front-End vs. Back-End.

Questions? Comments? Corrections? Bring it on in — the comments, on my Contact page, on Facebook at La Vie en Code Blog, or hit me up via Twitter @lavie_encode.