Front end vs back end web development

Web development is the act of building and maintaining websites through the use of front-end and back-end web technologies. These include HTML, CSS, Javascript, and back-end technologies like PHP, Node.js, C#, and Python. The terms web design and web development are often conflated and used interchangeably, but web design actually represents just one aspect of web development.

Front-end development and back-end development are the two main facets under the umbrella of ‘web development’, but are very distinct and require a very different skillset.

Front-end development

The ‘front end’ basically refers to what we can see and interact with. You might also know it by the term ‘client-side’. Anything the web user interacts with directly – including text, buttons, colours, images, navigation menus etc. – is front-end development. These elements combine to create what is presented when you visit a website. They need to be translated into language that the internet can understand, however. To do this, front-end developers must understand the relevant web development languages. Here are some popular examples:

• HTML
  Hypertext Markup Language (HTML) is at the heart of any website. All websites must contain HTML because it is used to specify the format and layout for a webpage. Essentially, it’s about tagging the content on a webpage in order to define what it is and how it should look. For instance, <h3> is used to represent a particular header format, while <img> can be used to embed an image. The same goes for tables, colour, spacing, navigation, and much more.
• CSS
  For a time, HTML was the only way to format web pages. This caused problems because changing certain web layouts would mean many edits to the HTML code. CSS was created to help, taking care of the look and feel of the website by differentiating the content from the styling. CSS – or Cascading Style Sheets – allows developers to more easily control font options, columns, background images, layout designs, variations in display for different devices (responsive), and much more. It can’t be used to create a website on its own, but it makes a significant difference to the presentation options in an HTML document.
• JavaScript
  You might remember JavaScript from the early days of the web when your browser would refuse to display certain content until you had updated Java. It’s come a long way since then and is now used to create dynamic content. It’s essentially used to develop greater interactivity on a website, including features like interactive maps, animated graphics, or video jukeboxes, and that’s just scratching the surface. JavaScript allows complex features to be included within a website with greater simplicity.

While it’s possible to make a website entirely out of HTML, it would likely be fairly bare-boned and amateurish. By adding CSS, developers can incorporate a more interesting aesthetic as envisioned by the designers, while JavaScript adds some much-needed interactivity and life to the web page.

Back-end development

Since front-end development involves the elements that users interact with, you can probably surmise that back-end development involves the elements you can’t see. But what does this actually mean? The back-end – sometimes called the ‘server-side’– is responsible for storing and organising data and making sure the front-end elements work properly. When a user does anything on a website, the front-end sends a request to the back-end, which then sends information to be displayed as a web page.

The back-end usually consists of three parts: a server, an application, and a database. The application takes information collected from the user and stores it on the server’s database. These servers are usually hosted on a data site and managed independently. The languages back-end developers use differs from front-end developers. They use languages like PHP, Node.js, C#, and Python:

• • PHP
    This is the most popular language used in back-end development. It was purpose-built for the web and is used to pull and edit information in the database. PHP was the foundation for sites like WordPress, Drupal, and Facebook and has become incredibly popular thanks to its ease of use, compatibility, and scaling proficiency.
• Node.js
  The ‘js’ stands for JavaScript, which is usually associated with front-end languages (as above), but the Node.js framework is used in back-end technology. It’s USP is that it can handle front-end communication quickly without bottlenecking, making it a good choice for data-heavy or real-time applications, such as chat rooms or news feeds. PayPal, LinkedIn, Yahoo!, and Groupon are just a few examples of sites that use Node.js
• C#
  Microsoft’s .NET framework is the most popular framework on the web, and C# is the language it speaks (so to, uh, speak). Its productivity and versatility make it the ideal choice for building Microsoft applications. It can also build applications for iOS and Android with the help of cross-platform technology. It’s used by sites like GoDaddy, DELL, and Ancestry.com.
• Python
  Python’s programming language is very fast and easily readable compared to other back-end web languages. Its fewer lines of code combined with its relative simplicity makes it a great place to start for beginners, but it’s also extremely adept at working with object-oriented designs. Python is very popular, being used by sites including Google, YouTube, Reddit, and Instagram.

 

Front-end and back-end developers need to be in sync in order to implement the webpage design, so it’s essential that they collaborate with one another. If you have any questions about web development or are interested in how Dusted can optimise your business website, get in touch via our contact page.

Image by Fatos Bytyqi