Photo by Fotis Fotopoulos on Unsplash
If you are a developer just learning to code with a desire to focus on web development but confused on what path to take. Be that front-end or back-end web development or perhaps you have already started your journey and are questioning whether you are on the right path? This would be a good article for you to read. It’s important to have a good understanding of both front-end and back-end web development when starting.
Introduction
Front-end development is commonly referred to as client-side development and that focuses on everything that you see, experience, and interact with on a website or an application.
On the flip side of things, we have back-end development, and it’s commonly referred to as server-side development and that’s going to be things that are more focused on functionality, data, algorithms, and such.
Front-End Development
Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.
― Wikipedia
Front-end development encompasses everything on the website or application that you’re used to seeing. Things like layouts, dropdown menus, buttons, and responsive design. The core three languages you’ll need to learn if you want to do front-end development are HTML, CSS, and JavaScript. These technologies all enable us to design our website and also allow for interaction on the client-side which is the browser. Also, there are front-end frameworks like Bootstrap, Foundation, Stylus, Semantic UI, Tailwind CSS, and so on for CSS which speeds up workflow. React, Vue, and Angular for JavaScript, are tools developers leverage to develop advanced web applications.
Photo by Andrea Piacquadio on Pexels
A great analogy to describe front-end development is kind of like a restaurant. There’s the dining room which is the main restaurant where a client sits down, a serving staff brings the menu, the client reads, makes an order, and their food is served. This is client-side, this is what the user sees in the browser, they can interact with the website using JavaScript and see the information that’s been displayed using HTML and CSS.
Enough said about front-end development, now let’s move on to back-end development.
Back-End Development
Back-end web development is the core computational logic of a website, software, or information system. A back-end developer creates components and features that are indirectly accessed by a user through a front-end application or system.
― Wikipedia
The back-end is the structure and processes behind the curtains that make everything run, these include storing and organizing data, creating algorithms and complex logic for a seamless experience on the front-end. The languages a back-end developer should be well versed in are Python, PHP, Ruby, or Java, and also, it’s interesting to note that JavaScript can also be used as a back-end language with something like NodeJS which allows you to execute JavaScript not just in the browser but in a back-end environment. Also, there are frameworks like Express for NodeJS, Ruby on Rails, Flask/Django for Python, and these speed up development using the particular back-end technology you chose. The main job of these frameworks is simply to reduce the amount of repetitive stuff that a developer has to do. They make our lives as developers so much easier by cutting down some of the grinch work and saving us a lot of time.
Photo by Kenny Luo on Unsplash
Moving forward with our analogy, on the back-end, we’ve got the kitchen, and this is analogous to our server, this is the place where all of our dishes get prepared and served. When the client asks for pizza, that order gets sent to the server, the server should be able to send back what it was that the client ordered, which is the actual pizza.
And finally, the larder where all the ingredients are stored is of course the database, this is where all of our user data, our event data, all of the data that makes our website work is stored. So, this is where the divide between the front end and back end happens. It’s between the dining room of the restaurant and the kitchen and larder.
Back-end technologies such as Node.js, MongoDB, etc, enable us to interact with databases and have business logic on a server and a whole lot more.
The back-end consists of things such as:
- A server that will serve up your files that’s your HTML, CSS, and JavaScript.
- A database that can store your user data as their logins and passwords,
- Applications which are where you create your business logic, you determine how your web applications work, for example, things such as calculating flight prices or making payments, that sort of stuff.
Let’s assume you want to book a ticket for an event on a website and you enter your name and buy a ticket, now that information which consists of your name, how many tickets you bought, and your registration details such as your email gets saved to the website’s database. You can just imagine these databases as these giant excellent spreadsheets living somewhere, and almost all of your data that you’ve entered gets saved onto these spreadsheets, and that means that when you come back at a later date, you’re able to log back on to the website and it would be able to retrieve from its database all of the data that is associated with your account, in this case, it would retrieve your tickets to the event.
Finally, we also have what we call full-stack developers, and you can tell by the name that it’s the combination of both front-end and back-end development. It is the flexibility of working with the front and back end that makes you so much more desirable as a developer.
Thanks for reading, I hope having a basic understanding of this will help you choose the right path.
Top comments (10)
Nice metaphor but now I'm hungry
Haha😁
This is a really oversimplification of what the backend does. In the classic (not old or outdated, because it is still valid) backend did all the lifting of processing input and presentation. It served static HTML and processed the input.
This really has not changed with the modern backend which comes with a companion frontend. Instead of serving HTML, the backend now has to server JSON, XML, or whatever format is deemed important. It still needs to fully process input, which is not JSON, multipart/form-encoded, XML, ... whatever. Still before authorization checks, which are also performed the modern frontend code. This is besides the algorithms, storage, etc. the backend has to perform.
Modern frontend does not really take away any responsibility from the backed. It just places responsibility at two ends.
So why this modern frontend stuff? It enables better UX, that's all. It increases complexity, but potentially improve performance. But in the end, it can* enable a better user experience.
*) "can" as your 25MiB compressed javascript frontend for a simple TODO application probably won't.
I get how this article might be simplifying the concepts for someone unfamiliar with the topic. But if you're a new dev, this is a great overview of how to start thinking about frontend and backend
Yea
Thanks for sharing
Nice Write up
Thank you
Nice
Thank you