- I. Definition
- II. Roles
- III. Dependencies
- IV. Examples
- V. Review
Definition
A major distinguishing difference between “front-end” and “back-end” is where the action takes place. Remember, you download the "front-end" of webpages before interacting with them. Webpages are in your browser on your computer. When you interact with this tutorial webpage, you aren’t “in” a server somewhere thousands of miles away. This page is on your computer in front of you. If you were to open your computer (and had the superpower to read electrical signals) you would see this webpage sitting in your system. That is why front-end is also called the “client side” because it’s with you, the client.
Back-end code is on a server somewhere possibly hundreds of miles away and that is where the back-end action takes place, thus the name “server-side” code. The front-end code on your computer sends information to the back-end code on a server somewhere which then performs a function and then sends information back to your browser to be display by, you guessed it, your front-end code in your browser.
Example:
- Front-End: You are looking at Google. You enter "Disneyland" in the search text field. You hit the "search" button.
- Back-End: Your browser sends the word "Disneyland" to Google's servers where back-end code searches their databases for the results that match. Google's servers then send the results to your computer.
- Front-End: Your browser refreshes to show a Google page that contains the search results for "Disneyland"
What kind of functionality usually falls in the back-end realm?
Anything that depends on a database.
This includes:
- Content Management Systems (CMS) – Instead of building individual webpages, a CMS will generate webpages for you from templates, filling in the content areas dynamically. Blogs can be considered CMS in this way. A blog is a single webpage (template) but the content on the page changes daily as it is drawn from a CMS database.
- eCommerce - Your average online shopping experience (the ability to put items into a shopping cart, process a credit card and send an order to be fulfilled) could not happen without a centralized system processing the transactions..
- Search – When you use a search function on a website, the search word(s) you use is sent to a back-end system where it is compared to a search engine’s database which then returns a result-set of possible answers.
- Forums/Wikis – In a wiki and/or forum, content is stored and recalled from database, and additions/updates to the content is written to the back-end database. It is very similar to a blog except that you the end-user have an active role in creating the content.
Roles
Back-End Developer/ Database Engineer: Often times the BE developer and database engineer are two separate roles fulfilled by two separate people. The reason is, depending on the complexity of the project, they can require two very specialized skill sets. But in less complex implementations a single back-end "generalist" who can adequately handle both skills is usually appropriate.
There are a variety of languages and applications that support back-end functionality (Java, .NET, Ruby on Rails, Oracle, SAP) and each one is a specialized skill set.
Other Roles:
- Front-End Coder – There should be a close collaboration between the front-end coder and the back-end developer to make sure data is being handed off between the two layers appropriately. Its common to find gaps in the technical specifications after development gets underway. Good communication between the front-end and back-end developers is key to make sure these gaps do not derail a project.
Dependencies
Most of the Back-End dependancies are the same as the Front-End code.
Technical Specifications
- Client requirements
Internal Skills - Traditional the client administers the website after its initial launch so it is crucial that the front-end developer creates a website that can be supported by internal client resources. Research into the client's technical capabilities will reveal what internal skill sets are available and/or if resources are open to training.
Server Architecture - If there are existing servers or server requirements, those requirements will affect how the Front-End developer will code the solution.
Information Architecture
- Functional specifications
The Front-End developer needs to know how functionality that has been approved on a diagram is supposed to work on a real webpage.
Front-End Code
- Because of the close dependability between the Front-End and Back-End code, they are often developed concurrently. Ideally a channel of constant testing and communication is established to aid each other in their separate efforts.
Example
Want an example of the Front End to Back End relationship?
Take something we use all the time. Google. Here is a scenario you have probably been apart of:
- You visit www.google.com and download their homepage, which is primarily just a single text input field.
- You put in your search request and hit the “Google Search” button.
- That homepage you are interacting with is sitting in your personal computer. It is front-end code. But when you enter a search word and hit the button, that word is sent back to Google’s servers, their "back-end."
- In Google's back-end servers, you search term is run through Google's complex, centralized search functionality, checking the term against billions of webpages they have categorized.
- After the back-end comes up with a result, the back-end code on Google’s servers sends the results to your computer where front-end code displays it as search results.
Deliverables
Application Flow – This document shows the interaction between different systems that are required to complete a specific user task.
Application Flow (CMS) 277kb 
Technical Documentation – Building on the Technical Requirements document, the back-end developer will continue to document how the overall website system is being built, including the definitions and strategies that were implemented during the development phase.
Review
Click the button below to launch a quick review of the Back-End Code period. Once you are done, close the review and move on to Chapter 7: User and QA Testing.
- Centrally located on distant servers, not your computer
- Usually database driven
- High computational functions
- Allow for dynamically generated content for websites
Application Flow (CMS) 277kb
