I Don’t Speak Your Language: Frontend vs. Backend

frontend-backend

“I Don’t Speak Your Language” is a series of articles designed to give you a quick overview of all of the tech terms in our industry. Knowing these terms will help you in your communications and allow you to build better products more efficiently.

There has been a lot of discussion in the blog comments lately about what constitutes design and development when it comes to the web. I’m trying as best as I can to help you, our dear readers, in your journey to becoming the best web professional you possibly can.

Our goal is to listen to you and create content that is relevant to the discussion and the challenges that you face, so I thought I would take this opportunity to highlight the differences between design and development. My goal here is to lay the foundation for further discussion and see if we can define the lines together.

Free trial on Treehouse: Do you want to learn more about backend and frontend development? Click here to try a free 14-day trial on Treehouse.

The differences between design and development actually lead to more of a discussion around frontend and backend web work. Let’s start with the frontend…

Front End

When we discuss the “frontend” of the web, what we’re really talking about is the part of the web that you can see and interact with. The frontend usually consists of two parts: the design and frontend development.

In the past when someone discussed development it usually referred to the backend, but in recent years there has been a real need to differentiate between designers that worked strictly in Photoshop and those that could code HTML and CSS. It went even further when designers crossed the lines to working with JavaScript and jQuery.

So now when we discuss the term “web design”, we’re really talking about those that work with Photoshop and Fireworks, and those that code using html, CSS, Javascript or jQuery (it might be important here to state that jQuery is a compiled library of Javascript).

Everything that you see when using the web is a combination of HTML, CSS, and JavaScript all being controlled by your computer’s browser. These include things like fonts, drop-down menus, buttons, transitions, sliders, contact forms, etc.

Now to make all of this become a reality and to store the information that you put in the frontend elements, we need technology to make it happen. Enter the backend…

Backend

The backend usually consists of three parts: a server, an application, and a database. If you book a flight or buy concert tickets, you usually open a website and interact with the frontend. Once you’ve entered that information, the application stores it in a database that was created on a server. For sake of ease, just think about a database as a giant Excel spreadsheet on your computer, but your computer (server) is stored somewhere in Arizona.

All of that information stays on the server so when you log back into the application to print your tickets, all of the information is still there in your account.

We call a person that builds all of this technology to work together a backend developer. Backend technologies usually consist of languages like PHP, Ruby, Python, etc. To make them even easier to use they’re usually enhanced by frameworks like Ruby on Rails, Cake PHP, and Code Igniter that all make development faster and easier to collaborate on.

Many web professionals that are just getting into the field may have heard a lot of people talking about WordPress. WordPress is a good example of the frontend and backend working together because WordPress is an open-sourced framework built on PHP that you have to install on your server with a database. Designers then customize the look and functionality of WordPress sites using CSS, jQuery and JavaScript.

Conclusion

I hoped this helped many of you get clear on when people are talking about the frontend and the backend of the web, as well as knowing when they’re talking about design as opposed to development.

The lines between design and development seem to get more and more blurred on a daily basis, but fundamentally they are still very separate.

In order for everyone to carry on great discussions and to collaborate on great products it’s very important that we’re clear on what part of the product we’re really talking about.

What are your thought on design and development, and the frontend versus the backend? Please join the conversation by commenting below. Cheers!

Comments

14 comments on “I Don’t Speak Your Language: Frontend vs. Backend

  1. Great article Brother! But what am I? I write the html and css using the psd file from my AD, i set up the database and make the site work in both wordpress and umbraco. So Im a front back end developer?? :)

    Thanks for sharing!
    Dave

    • I think you are an amateur and somebody who configures a stupid and rigid product that’s all !!!

    • Hi! There is a concept called “Full-Stack” Developer, but it’s really difficult to achieve both worlds. In this case, I think you have more emphasis to Front End Development, you should try Javascript to complete the triangle.

  2. Hi
    Your blog is really informative gathered with valuable information..thanks for
    sharing these information
    WRS Builder

  3. separation of front end and back end isn’t always black and white – even if conceptually it may be – it may be just easier for every developer on the project to work on their own modules front through back. here is an example of one of our apps youtube.com/webrenovators – the front end and back end both run in the browser as they should and the back end can call optional webservices developed in your preferred language if you need them.

  4. Hi Josh. Thanks for such a structured way of defining Front-end and Back-end roles. Since many are discussing about the thin line of difference between front-end and back-end when it comes to Javascript Frameworks. I am also in confusion to understand whether MVC based JS frameworks like Backbonejs, Angularjs or knockout js should be added in front-end skill set or in back-end? Considering the business logic and MVC architecture, its not that easy for a front-end Dev. to learn it and grasp it quickly as we can do with jQuery(Javascript for showing effects and DOM manipulation). Would you be able to explain me further. As being a front-end Dev., do i need to learn such JS frameworks since it is more related to what we see on Website? (Well then in php development , back-end guys also use a bit of JS for logic and data manipulation.)

  5. Hello Josh, thanks for the great content I found it very helpful. Just a quick question please, I’ve hired a web developer to create my Ecommerce website. He wants me to pay 40% of the total sum for the frontend and 60% once he’s done with the backend. Is this fair?

    sarah