Front-End, Back-End, and Full-Stack: Where you “end” up

    It is no secret that the number and type of web development positions have expanded over the past few years. The longer the internet is around, the more intricate it will become – and we witness this growth of scale and complexity every day. In the beginning, a web developer did it all; They hand-coded each page and hosted them on a server somewhere. Naturally, they had to have the knowledge to do this, but the code of the site was simple – complex in presentation rather than technique. During my time at university (starting in 2018), I was also taught this process – code a page in raw HTML5 and CSS3, then host it. Unfortunately, this is an inaccurate view of the web development landscape as it currently is, and I was woefully underprepared by my formal education. I, and I am sure my peers, quickly learned this upon applying to jobs. Looking through job boards for open positions, you find condensed lists of terms you need to know as a professional, and the most common you will see are the three major titles: Front-End, Back-End, and Full-Stack. In this post, I will be delving into the differences between Front-End, Back-End, and Full-Stack – and how to determine where you may fit best. 

    Before diving into the ‘ends’ of it all, let’s get some basics down. In web development, there are primarily three language types: Markup Languages, Styling languages, and Programming Languages. 

    HTML (Hypertext Markup Language) – a language used to contain and display the content you see – is a markup language. These are often denoted by elements contained in greater/less than (<>) symbols. An example would look like <header>Insert Header Here</header> for the header of a page. These languages aren’t used for creating programs, but rather for displaying information. This means you cannot technically program in these languages, but you can use them to output processing performed with other languages. Of course, there are exceptions to this rule, but they are not very common (see Adobe ColdFusion for a prominent exception). Since HTML is used to display this content, if you press F12 on your keyboard, it should pop up a window for you to view and edit the HTML on this page. You can do this to any site, and any edits you make will be reset on refreshing the page, making it a good way to play around with the language. See the below image for a more detailed example of HTML5 in use.

An example of working HTML5 code

    CSS (Cascading StyleSheets) is a language you hear almost as frequently as HTML. As you may guess by the unabbreviated name, it is a style language. These languages are used to change how the markup language displays its information. It can change backgrounds, font sizes, and even what is displayed and what isn’t. These often set default styles for the pages so they look a certain way upon loading, and then are changed by a programming language depending on what the user does on the page. For example, if you’ve ever had a pop-up ad, CSS is what was used to have it fade in, then fade back out when the X was clicked. While the CSS animated the fade-in/out, the programming language governed when it happened. Styling languages cannot do these things alone, and thus they suffer the same limitation that Markup languages do. 

An example of CSS3 code for a website

    Programming Languages are how these shortcomings are resolved. JavaScript is one of the more commonly referenced languages for programming in web contexts. Programming is the process of creating algorithms (processes/solutions to problems) via logical expressions to determine function. That sounds fancy, but it is mostly “When x happens do y”. Despite its simplicity, markup and style languages are not built to do this, and thus a programming language is necessary. For example, when using HTML5/CSS3, it is very common to see JavaScript included for functionality. Many – if not most – new developers are taught all three concurrently by default. Other programming languages can be used for web contexts, and some start to blur the lines between Markup and Programming, but those specifics aren’t important for now. The two programming languages you (are most likely to) need to know moving forward are PHP (Hypertext PreProcessor), and JavaScript (sometimes abbreviated as JS). Side note: PHP does not match its unabbreviated form anymore, but it used to be called ‘Personal Home Page’, hence the abbreviation.

An example of JavaScript used for Front-End Functionality

    With that context in mind, we can move forward with defining each end of development, and their respective scopes. 

    Front-End is referring to the parts of the site visible to clients and the general public. This (typically) does not require any authorization to access, and should ideally be used to pull people further into the site. For example, the part of the site in which you are currently reading this post is the front end. This tends to primarily consist of HTML5/CSS3/JS or HTML5/CSS3/PHP and may be returned by a CMS (Content Management System). CMSs are widely used nowadays to make managing large amounts of content and pages simpler for the site admin. These tend to have a database in which they store pieces of information. This information is made up of broken down bits of the front end and may contain raw HTML5 to be recalled later. When you load a page, the preprocessor (such as PHP) will call the database to look for those pieces, and then they are returned and rendered for you to view. A Front-End Developer will not mainly deal with how the page is stored/returned, but rather what the page looks like, and what it does. They will develop the content and user-facing functionality, and will often be firefighters to put out the flames of disaster if a page has bugs. Front-End developers are sometimes paired with a Web Content Editor team so they can focus more on the style and functionality of the sites. This practice is more frequently seen in organizations with large sites and databases, like Wikis or Universities.

    Keeping the bounds of Front-End in mind, you might be able to guess that Back-End is the rest of the site. They deal with the how of data-recall, will develop applications for employee-facing purposes, and might extend the CMS, or change how the data is broken down for storage. This often doesn’t have to do as much with the content that’s being broken down, but rather the general rules for its organization. They don’t have to worry as much about how things look unless they will be interacted with by non-developer employees, and more often than not, the Front-End team will design the interfaces for those apps anyway. They aren’t any more or less technical than the front-end despite how it may sound, but they are a bit more abstract. Abstraction in a programming context is referencing how broad something can be to still deliver the desired output. Front-End development tends to be less abstract because the user needs to see one specific output, but Back-End development tends to be very abstract to allow Front-End developers to get as much as they can out of the platform.

    What then, is Full-Stack development? It doesn’t reference either end – and what is a ‘stack’? Full-Stack is a developer/engineer who can work on both Front and Back End Applications, as well as engineer databases around their needs. The ‘Stack’ refers to a tech stack, which is the sum of languages and technologies used to create an application or website. For example, YouTube uses a variation of the LAMP Stack (Linux, Apache Web Server, MySQL, and Python/PHP). Typically, developers are only on one end of this stack. However, for more abstract problems that may deal with either end, or for developing solutions for other internal developers, full-stack skills tend to be necessary. 

    Knowing what Full-Stack development is, why is it not just called Full-Application, or even Application Developer? In some cases it is, but most of the time it is called full-stack for a few reasons. First, every company will use different stacks. Just because you are a full-stack developer doesn’t mean you’ll be able to use their stack, but you may be able to use one end of it. You may be able to develop for MERN (MongoDB, Express.js, React.js, and Node.js), but not for LAMP. Alternately you might be able to develop for LAMP in conjunction with Node.js and Angular, but not for LAMP in conjunction with Python and React. Many times, companies look for full-stack developers not for larger flagship products, but for developing or extending smaller (potentially new) applications. This tends to be the case for large companies like Amazon. Their stack can be too large to expect a single developer to learn, and it is often simpler to manage two specific teams while having full-stack developers on reserve. Application development does not fit the full extent of what full-stack development is/can be, but full-stack could mean application development, similar to squares and rectangles. 

    Given these definitions, how can you decide where you end up? As a developer, you can fill any of these roles, but does that mean you should? This is a very subjective topic, but typically the answer is no, you probably shouldn’t just become a full-stack developer by default. It is good to have full-stack experience, but for most of the population, this experience should serve as a way to help you understand which you prefer. I have done full-stack development because I enjoyed delving into how the data breaks down and is reconstructed, but at the same time, I tend to enjoy the Front-End more. I decided that I should describe myself as a front-end engineer with full-stack experience, and people tend to understand what that means. If you enjoy the design and UI or prefer to work on things that directly respond to input, the front-end is probably where you belong. Else, if you enjoy mucking about in the data, really looking at storage and optimization, and creating data distributions and APIs, the back-end is probably more your speed. If you truly enjoy both, maybe you can be a full-stack developer, but do keep in mind these can be very specialized positions. You may need to work separate front and back-end positions to qualify if you don’t start your professional experience in full-stack. For some, this is more effort than the experience is worth, and if you are one, it may be best to look at one end in particular.

    At the end of the day, where you end up in this web of technology is up to your preferences. It will take time for you to fully explore stacks and the functionality within, but eventually you will settle where you are best suited. Development is a complex but fun road to travel, and if you enjoy what you are doing, you will get to where you need to be. Don’t stress about these details too much, just put the effort in and see where you arrive.