Front End vs. Back End

Front End vs. Back End

In this blog, we talk about two popular concepts that are thrown around in the web development world.

Marketers today work with web design and development teams regularly.

In some organizations, there are separate eCommerce teams that have different functions that come together including front-end, back-end, digital marketing, and merchandising.

Let’s lets look more closely at these two jobs (front end vs. back end development) are now interacting with the marketing functions in brands of all sizes.

So what is the front end?

When you are looking to understand the front-end, the focus is primarily on:

How things look is what is predominately meant by the front end. This means we are looking to understand how the structure is laid out, the images and content of the web pages.

This is made up of most of the 3 languages for Front-Ent: HTML, CSS, and Javascript.

HTML – stand for Hypertext Mark-up Language. A fancy way of saying the words and structure of the page you see is due to what you write with HTML.

CSS – cascading style sheets are the cosmetics on top of the HTML. It adds colour, better design, visuals, the ability to render on different devices properly and so much more to the basic HTML pages.

Javascript brings in interactivity. You hover over anything and see something zoom in or pop up. You are about to leave the site and a pop-up appears.

Those are javascript commands that create interactions with the user and are taking input based on your signals from the site or event-based triggers that launch other actions.

Now you hopefully understand the front end and how the 3 main languages are used to create a user experience for a visitor on the site. There are other languages you can build your front end with like anything else- but these are the most popular by far.

Switching gears to Backend

This is the stuff you do not see in the front but how the information that the site receives from the front end is handled – i.e. stored, read, manipulated, and sent back to the user.

We are talking about databases here. The logic on storing emails, credit card payments, and more.

There is also a whole backend language world out there. Languages such as PHP (which WordPress is built on – the # CMS in the world), Python, and Java (not Javascript).

The great thing is that for the back-end, you pick one and usually stick to it – unlike the front end that has the 3 main languages.

Let’s walk through an example

Nothing helps absorb theory with some practical application.

So let’s look at a live example of Amazon (the number 1 online retailer – well at least in the Western markets).

I am currently browsing the Amazon website. The interactive nature when you hover over some things or elements on the page, the structure of the page, the colour choices, the ability to zoom in and out of the product pictures, the animation, the copy or the writing on the web page here – this is all front end.

Front End vs. Back End concepts explained using Amazon.ca website screenshot

Basically – everything a visitor (or in this case me) is looking at the page, interacting with the elements are all the front-end stuff. What we see and interact with without looking at how the machine, the browser is processing it is the “front end”.

So where does the back-end come into this?

So as soon as you come on the page, there is a ton of code happening on the Amazon page that looks immediately looks to identify and crosscheck the user with its IP or if it is a returning user based on whether they signed out or not – all to keep the user experience personalized and relevant.

The back-end code does that by cross-checking the database of user ids. (you can see I have 9 items that I abandoned in my cart before I closed my session with them and it showed that to me as a reminder).

It uses this id (via cookies – learn more about them here) to determine what my browsing history was, what is in the carts, whether I am likely a male or female, and based on all those factors, the backend displays images to the front-end that will be relevant for me as a returning user.

Now this happens super fast or almost instantly if you are a returning user.
But when it recognizes a new visitor, then the display is different (but super-fast due to the evolution of internet technology).

All these logic checks – all of this is handled by the millions of lines of code that are written with Java and PHP for Amazon’s case.

Now granted, Amazon is a huge website with advanced customization and an army of developers creating the shopping experience online super engaging and personalized – but this logic happens for smaller websites or even start-ups all the time.

I mean, with platforms like WIX or SquareSpace, you can literally have a website up in an hour.

Businesses have made this into a no-coding solution for non-techies to take advantage of for their marketing efforts. So all the backend heavy lifting is handled by these website builders and you get to use the front end like a drag and drop technology the way you would a PowerPoint.

Marketing and understanding Front End vs. Back End

Now how does this tie back to marketing? Why would a business leader or business owner care about this distinction?

Well, marketers are responsible for the marketing mix – the 4Ps.

Product, Price, Promotion, and Placement.

So placement, the product, the design, and the distribution can all happen now with the front-end and back-end capability of the website.

Marketers have to understand who they will be interacting with to cover what part of the 4Ps.

Marketers will need to work with the front-end team to create an experience that will attract customers for the product, price offers, etc.

Once customers are ready to engage and buy, then the backend team will need to ensure the ability to handle customer information, the placement, and distribution are set up effectively.

Over to you…

And that’s it for this blog. We hope you found it useful.

If you like what you read, comment below and we would love to hear your thoughts.

Good luck with your development projects.

Until, next time, we will catch you in our next blog post!

Additional Readings:

What is Web Development?

What should businesses do to establish trust online?

Leave a Reply

Your email address will not be published.

x