So... What is Frontend Development?
Original email from Oct 11, 2024
This is an email I've been wanting to write for a while now
First of all because... this is the Exceptional Frontend newsletter! And I still never made an email, article, or post on what frontend is (shame on me).
After all, it makes sense that, before you can be exceptional at frontend, it's important to understand what frontend is and everything it entails, right?
But more importantly, I understand that there are a few readers here who might just be starting in the tech world today and are learning HTML, CSS, and Javascript. As well as some who are primarily backend developers and are now moving on to learning frontend technologies to become more well-rounded (I.E. full-stack developers).
I've been deep in the frontend world for almost four years now and can say... frontend can be a little messy, especially if you don't know what to pay attention to.
So, let's take the opportunity to give a good introduction to frontend in our typical exceptional fashion – going from a very high level of understanding to slowly making our way down to the nitty-gritty.
Starting with...
Level 1: What is the Frontend?
Forget everything you know about software and computer science for just a second. What do the terms frontend and backend (in the most general sense of the terms) exactly mean?
At the absolute highest level of abstraction, the frontend refers to anything that is user-based or customer-facing.
The frontend is about presentation. It's about user experience. It's about interaction and how others view or use something.
Meanwhile, the backend is about everything else the user or customer doesn't see. It's about data, circuits, information, servers, and delivering that which the user wants or expects.
Think about a refrigerator. It could be big or small, have a freezer (or not), have a brand associated with it, and be of a certain color. It also has a dial to adjust the temperature.
You have no idea how the electronics or the motor work, or how temperature is controlled – but that doesn't matter. It was designed in such a way that you don't need to know how it works to use it. You just... use it!
The motors and electronics inside the refrigerator (what you don't see) are the backend, while the outside elements you can interact with (that which you can see) are the frontend.
So then... how does this relate with software and what we typically associate with frontend?
Level 2: Why does the Frontend matter?
We love systems and products that not only work but work well. But "work well" can mean a lot of things.
That which we interact with should probably work relatively fast.
It should also work how I expect it to work.
It probably shouldn't put the information or the privacy I give it in danger.
It should be built so that anybody can use it, no matter their current limitations.
It should simplify and abstract away the complications of how something works to make it easy to use.
The frontend, no matter the discipline, is about service with a smile. It defines the experience and interaction somebody can have with any system.
If something with that experience is negative... or something unexpected happens in the interaction with it, people stop using that system. That's what makes it that important.
Now if you're reading this, you're not only interested in the frontend, but in learning something called frontend development. So let's define that now...
Level 3: What is Frontend Development?
When you hear about frontend development, you'll always find it associated with the web. You'll find a bit of confusion here because there exists this mismatch between the separate meaning of the words (development of the frontend) and the context it's used in.
There are two things to understand:
The frontend in software isn't limited to just the web and websites. Phone apps have frontends. Desktop programs have frontends. Even special devices like smart devices, security systems, and TV applications need a frontend. A lot of times these even use HTML, CSS, and JS! Frontend in the most abstract way is still about the interaction users (or systems!) have with other systems.
With that being said, it's also true that "frontend development" still refers to "developers who work with HTML, CSS, and JS." There are no "frontend developers" for desktop or mobile applications. It's always about the web.
This has been historically like this for decades now. Frontend development is used almost as a synonym for web dev. So keeping that in mind as well, we can understand the definition of frontend development as it's used today.
Frontend development refers to the development of the visual and interactive elements of a website, usually through the use of HTML, CSS, and JS. When you work as a frontend dev, you're focused on the code that is shown in browsers, making sure the elements of the web are shown correctly and giving the best user experience you can.
There are a lot of goals and things to keep in mind in frontend which becomes key to being exceptional at the craft. And all of those goals are...
Something I'll save for another email because this one got way too long 😅
Hopefully, you enjoyed this little breakdown on the frontend. Have a spectacular Friday!