Front-end vs Back-end Web Development

In this article you will learn about the basic differences between front-end and back-end web development. The content is kept as simple as possible so that entry-level developers could understand the basic differences easily.

Front-end

Front-end is everything a user can see when they interact with a website in a browser. A well-known website is for example google.com that is widely used by regular people and us, developers, to search for information.

In front-end we use the following technologies: CSS, HTML and JavaScript. These are usually the first technologies developers are familiar with when they start learning to code. Developer who is working with front-end technologies is usually called a front-end developer or a client-side developer.

Furthermore, front-end developers in their daily work use various libraries. Libraries help to make the development easier and faster to implement. Some of the most used JavaScript libraries today are React and jQuery.

Back-end

Back-end contains everything a user can’t see and interact with. Instead, front-end can talk to the back-end to get or store some data. The communication is done through API that is provided by the back-end.

Back-end usually contains of the following components:  server, application, database. Developer working with back-end development is called a back-end developer or a server-side developer.

As mentioned before, back-end provides front-end with data and stores data if needed. For example, when user is searching for something on google, then before they click on the search button, they interact with front-end. After clicking on the search button the front-end starts talking to the back-end.

Let’s make it more clear with an example. Alright, let’s say that an user is on the google.com website and is searching for cute cat photos. So far she is interacting with the front-end. Now, when she clicks on the search button (or enter on the keyboard), the front-end calls the backend’s API and tells it “give me all the cute cat photos”. What happens next is that the back-end calls the database, the storage for the photos, to search for all the cat photos. All the photos found from the database are then returned by the back-end to front-end. Finally, front-end can now display all those cute cat photos to the user.

Following is the diagram that illustrates the whole communication described above:

Some examples of technologies used in back-end development are: Java, C#, Jetty, Maven.

Conclusion

Front-end is everything a user can see when they interact with a website. In contrast, user can’t directly interact with the back-end and can’t see it. Front-end communicates with back-end through its’ API. When needed, back-end can talk to a database to fetch data from it that front-end requested and store it.