Skip to main content
Untangling the web using the simplest language possible.

What is front end? Back end? Full stack?

JavaScript, HTML, CSS, Ruby, Node, PHP, Version Control, GIT, Java, JVM, React, Angular, Angular 2+, Redux, Vue, jQuery, Hadoop, WordPress, T-SQL, PostgreSQL, noSQL, es6, es7. ecma2015, babel, Webpack, Grunt, Gulp..... what the f%$k.

When I first started in the web world I had no idea what a "Front End" or a "Back End" was, I knew that "Full Stack" meant doing both, but that didn't help much.  Engineering fields can be very intimidating, and many times we don't know what something is but there is often talk of things being "trivial", said usually with a condescending tone, and it scares us away from asking.  Well I don't believe in a dumb question.  If you don't know something it's because you were never taught it.  There are very few innate behaviors, like breathing.  Most of what we know is learned. So let's learn you real good like.

Front End

All bow to the mighty Front End Triad!  Front End development is all about the client side of things.  The client is usually meant to mean the browser.  Browsers are the internet browsers, be that Firefox, Chrome, Opera, Edge, or (unfortunately still in use) Internet Explorer.

The Front End is concerned with how things look and act.  This is where we create the interfaces that people will use to interact with our website or web application.  As such there are many complex factors Front End developers take into account.  User Experience, User Interfaces, Web Design, the list goes on, and they're outright professions on their own.  Rather than delve into the sub fields, let's look at the main triad of the front end.


HTML (hypertext markup language) is the scaffolding of a web page.  Think of it like the physical structure of a web page.  We have HTML elements that act as "tags" for different items.  Want a header? Use one of the header type elements.  Paragraph?  There is a paragraph element.  The site content all goes into an element, and the browser then knows how and where to place it.  It doesn't matter what new framework or library you use, from React to Angular to Vue; everything in the end goes into HTML.


CSS (cascading style sheets) is all about styling the elements.  You can change fonts of specific elements, font color, background color, change element shapes, do complex animations.  CSS is very powerful, and often times you could make a static website using just HTML and CSS together, though it would be very plain comparing it to modern sites.


JavaScript is a programming language that was created specifically for use in the browser.  It has since grown into a behemoth.  If you want your site  to do anything, you'll need JavaScript.  By "do anything" I mean interact with web APIs, a Back End server, update style items based on a user input.  Think of HTML and CSS as the base tools for web development, while JavaScript is the skilled artisan controlling the tools to create things.

You can use JavaScript to change elements or styles based on mouse scroll events, mouse click, mouse entering an area, changing the options in a drop down menu based on an option selected, or changing one specific menu based on an item selected, etc.  JavaScript allows us to turn our page from a static page into an application that has behaviors.

The biggest item JavaScript is used for is the sending and receiving of data from server Back Ends.  We will constantly use web APIs in Front End development, by simply pointing JavaScript methods (like fetch or AJAX requests) at different server URLs.  Those URLs respond with data based on the URL given, and we can then work with that data via JavaScript to place the data into HTML elements and style them with CSS to create content that the users are after.  

But what is a back end?

Back End

The Back End is the the server side of the web site or web application.  Think of it like a grocery store:  our front end is where all of our items are, and our customers come in and use the pretty looking area and buy things.  The back end is the store room behind that we keep locked up as it's where all of our inventory is.

The two basic parts of a Back End would be the HTTP server that handles requests, and the database.  The way the internet works, to keep it simple, is that you enter a URL in a browser; that URL corresponds to a server somewhere, and your pressing enter sends a request to that server.  The HTTP server receives that request, and responds however it has been set up to program.  Most send back their front end package of HTML, CSS, and JavaScript.  Some that send back data in various formats, or are set up to receive data, work some magic on it, and then send it back.  These servers need a place to store information, which is where a database comes into play.  The database is essentially the hard drive of the site or application.  It stores data, can add data, remove, and update data.  The standard database actions is what CRUD is: Create, Read, Update, Delete.

The best example is a simple social media type site.  We type the URL into our browser and go to the site.  I'll break this out front to back:

  1. Back End:  HTTP server receives our request for the base URL route and sends back the front end package of HTML/CSS/JS that is the landing page
  2. Front End: We see a log in form and a sign up form.  We fill out the form with a username, email address, and password then click submit.
  3. Back End:  The submit form button shoots off a simple request to the HTTP server that is just another URL tied to a route on our back end server that is a different URL than the standard log in.  It takes the data (username, email, password) from the form (because it was programmed to handle those specific fields in specific ways) and checks it against the database to see if your username or email is already in use.  If it is, it is programmed to send an error back telling you which item was already in use.  If it isn't, it then activates a function written to save the data to the database, and sends a redirect url to the browser (the user).
  4. Front End: We are redirected by the back end, which automatically pushes us to a new URL where we then see our logged in home page on the site.  The front end code JavaScript then talks to the back end API, requesting this specific user's data for their profile, because at this point everyone gets the same profile page, but the only difference is what data goes into it.  JavaScript is what gets that data and places it into the correct elements around the page.
  5. Back End: receives the request from the front end for the specific users data at a different URL route, which fires off a function that takes the data sent by JavaScript and searches the database based on that information, then returns what it found to the front end JavaScript code.
  6. Front End: receives the response from the back end which is the data found in the database for that user, and then fires off code to populate the fields of the page.
The above leaves quite a lot unexplained, and is broken up a bit more than it usually is in terms of flow for the sake of clarity, but I hope it gives a good overview of what the differences between Front End and Back End are.  Which leaves the last item...

Full Stack

Full stack, as you've probably guessed, means that you "do it all".   Full Stack is code for "we don't have the money or want to spend the money to hire the correct number of people, so we're going to ask you to do the job of several people without an increase in pay rate".  Sometimes it's fine, my internship and first gig were both Full Stack, but that's because my internship was set up to give me some hands on everywhere to figure out what I liked, and my first gig was a tiny team that didn't push me too hard and was more interested in helping me learn.  If that's the case for you, then jump on it!  My two cents (take it or leave it because who the hell am I anyway?) is to pick a side and focus on that, and do the other thing in your spare time to keep up with it but don't kill yourself.  I think you will easily find what you enjoy doing more as they are very different areas.

I hope this was helpful, more to come soon!

// Corey


Popular posts from this blog

JavaScript Closures: A use case

I recently started working for a small dev agency here, and the first item I was supposed to take over was a data scraping tool.  If you don't know what that is, basically it's going through websites and targeting specific elements and grabbing the data off of them.  How do you do that? Well, you can use something like Puppeteer to run an automated Chromium browser that can carry out tasks such as "navigate to this page" and "click the element with this CSS selector", etc.  In this project we were grabbing XHR responses from the server (if you open your browser dev tools, go to 'network' and click 'XHR' you can see requests and responses, their headers, etc) and then saving the JSON in the responses to our database (a SQL database). Puppeteer has a handy method that places a listener for requests or responses.  So any time the browser receives a response it would fire off a callback.  It was within this callback that I had an async func

What is Git and Version Control?

Today we have dev teams that can number in the hundreds, some working from different countries remotely, all working on a single code base; making changes sometimes in the same file.  Could you imagine passing around a thumb drive with your changes?  Or constantly having to plug in new changes?  Or someone deleting a critical file? Or changing some very complex code, forcing the team to go back in and do the same work all over again?  What a nightmare. Enter version control. Version control software allows us to have many different people working on the same files very easily.  It gives us the ability to put our changes into the code base (pushing or merging/pulling) easily, get updates and changes that others have made (pull or fetch), and allows us to make copies of the entire code base to work on instead of working on the "master" code. As an aside, Git is not the only version control software, but it is the only one I've used, and it is the only one I am

What the hell is automated testing?

I was recently contacted by a recruiter wanting to submit for a position that specifically asked about my experience with Automated Testing ™.  Also if (read: when) I place something in Bold Italics  with a  ™ after I am being extremely sarcastic. I feel like automated testing is one of those things that is built up to be much more than it actually is.  It conjures images (at least in me) of the above; or a robot in lab automatically testing things, or  perhaps an AI system that just knows what to do. Well it turns out that automated testing is just a test or group of tests that you write once and then call whenever the tests are needed. What is a test? I'm so glad you asked!!  A test is just a bit of code that checks your other code.  But what the hell does that really mean? Say I have a function, it takes arguments, and returns a value (I know, sometimes I get  wild ): Now we want to test this function, so we'd write a test: Essentially we just wrote a second