Hey everyone.

Today, we will talk about Getting Started With Full-stack Web Development. In this article, I will try to clarify some misconceptions around Full-stack Web Development and describe exactly what it is in simple terms. After this article, you should have an in-depth understanding of the topic.

Before we can talk about Full-stack Web Development, there are two key concepts we should talk about first. Those concepts are:

1. Front-end Development·
2. Back-end Development.

Front-end Development

The front-end of an application is the part of an application that a user can see and interact with. E.g. buttons, forms, images, text and literally any other thing a user can see and interact with. It is also called the client-side of an application.

The process of creating this part of an application is called Front-end Engineering or Front-end Development. People who can use the relevant tools and technologies to create this part of an application are called Front-end Developers or Engineers or Programmers.

By tools and technologies, we mean the collection of things necessary to build an application. These include the programming languages, frameworks, libraries etc. Frameworks and libraries will be discussed later in this article.

Talking about applications generally, it is worthy to note that applications can run on different platforms. In the beginning, application development started from the web. After the web was invented, other platforms where applications could run began to emerge. Examples of these other platforms include:

• Mobile devices
• Desktops/Laptops
• Video game consoles (e.g. Xbox, PlayStation) etc.

Meanwhile, something here needs to be noted and that is the difference between a website and a web application. Regularly, these words are used interchangeably by techies and non-techies alike but there are differences.

A key difference is that a website mostly consists of static content. In other words, whatever User A sees on a website, is the same as what User B sees. News websites and blogs could be taken as examples. When you visit Vanguard's website for instance, it is very likely that you'll see the same news that every other user will see.

On the other hand, a web application has dynamic content. Meaning, the contents are tailored specifically to each unique user. For example, what User A sees on gmail.com won’t be the same as what User B sees when logged into the same gmail.com. The contents are different and ever changing. Other examples of web applications are Instagram, Jumia, Google Forms, etc.

There are other differences between websites and web apps. For instance, in the functionality and complexity of both. But these are beyond the scope of this article. However, just know that websites and web applications mean different things.

Now, going back to our discussion on Front-end Development, there are 3 core technologies used to build the front-end of a web application. These are:

• HTML (HyperText Markup Language) – a declarative language.
• CSS (Cascading Style Sheets) – a styling language.
• JavaScript – a programming language.

Apart from these core technologies, there are other tools and technologies used to build the front-end of an application. But all other ones are built upon these three.

HTML

It has been observed that much argument has been going on in the tech community as to whether HTML is a programming language or not. Today, I am telling you that it is not. This is because, there are concepts germane to every programming language. For a language to be considered a programming language, it should have the ability to define constructs like functions, loops, conditions, boolean expressions etc. None of these can be found in HTML.

HTML is a declarative language. This simply means a language that describes what something should look like, rather than what something should do. In this case, HTML tells the browser what our web pages should look like.

CSS

CSS is a styling language. A styling language is a language used to beautify, to style, and to add design to a markup language like HTML.

JavaScript

JavaScript is purely a programming language because it is able to define the things mentioned earlier. At the inception of the web, it was possible to build web pages without JS. In fact, it is still possible. What JS does is to add interactivity to the front-end of our applications. For instance, to trigger some events based on the actions of a user, it is done using JS. Recently I came across a thread on Twitter which I hope, will explain this better. Check it out:

Here, the commenter is asking what it would take to make the chess playable. JavaScript does that. The board was built using HTML and CSS alone. But to make it interactive, JS was needed.

Frameworks and libraries

Over the years, people have been using these three core technologies (HTML, CSS and JavaScript) to build the front-end of applications. But as time went by, they discovered that it was tedious and that brought about the invention of frameworks and libraries.

Frameworks and libraries in their simplest terms are codes written by other people which can be easily imported into a project in order to save time and do the work faster. There is a slight difference between the two which revolves around the flexibility they both offer while using them in projects.

Libraries tend to give more control over your application development than when using a framework. On the other hand, when using a framework, you can only do things which the framework allows. In essence, a library is more flexible.

Examples of these front-end frameworks and libraries include:

• Bootstrap (CSS framework)
• Tailwind CSS (CSS framework)
• W3 CSS (CSS framework)
• React (JavaScript library)
• Angular (JavaScript framework)
• Vue (JavaScript framework)

That said, let’s talk about an important concept in front-end development: The Client.

The Client

A client is anything that makes a request to a server. This could be anything at all e.g. a browser, a car, a wrist watch, a mobile app etc.

When you open up your browser and search for some information. The information your browser displays is not manufactured by itself. It has to get it from somewhere (a server) via making a request. This is similar to the way a car dashboard is able to show you information about weather in other countries. The dashboard doesn't manufacture this information by itself. It gets the information from a server by making a request. The browser and the car dashboard are the clients in these situations. A server would be explained later in this article.

Your job as a Front-end Engineer includes displaying the response gotten from a server in a way the user can easily consume. This is very important because you don’t want your users to get frustrated while navigating your application.

One major challenge associated with front-end development is the vast number of tools and technologies in existence. Because everyone wants to be an inventor, a lot of frameworks and libraries are in existence. So as a Front-end Developer, you need to be aware of these new tools in order to remain relevant in the industry.

Back-end Development

The back-end of an application, also called the server-side, is the part of an application that a user cannot see and interact with.

When you make an online payment on an application, there is a process, a logic that runs behind the scenes to make sure for example, that you are the owner of the account, that you have sufficient funds to carry out the transaction, that someone else’s money is not being stolen etc. Processes such as these happen on the back-end of the application. Likewise processes that make it possible to authenticate your username and password when you want to log into an application. They all run on the back-end.

The process of creating this part of an application is called Back-end Engineering or Development. People who can use the relevant tools and technologies to create this part of an application are called Back-end Developers or Engineers or Programmers.

Typically, the back-end of an application consists of three parts. These are:

• Server
• Application
• Database

The Server

A server is a computer that listens for requests, processes the request and sends back a response.

Now, I want you to note that a server is no different from a computer. In fact, your personal desktops and laptops can be used as a server. But this is not advisable. There are special computers designed specifically for processing requests.

The Application

The application is the actual code you write that tells a server what to do with any request. Without the application, the server would not know what to do when it gets a request from a client, hence it cannot send out a response. That is to say, the codes and program you will be writing as a back-end developer is the application itself. The application is a set of instructions that tell the server (a computer) what to do. This application is hosted on the server.

The Database

The database is a software and/or hardware where data is stored.

I will explain why this definition uses “and/or”.

In the early days of application development, it was common practice to store data on the same server where the application is hosted. This was risky because whenever the data got damaged, it affected the application and vice versa. So later on, developers began putting their data and application on different servers. This way, whenever the application or data was corrupted or damaged, it would not affect the other. In this case, both the software and the hardware that hold the data are referred to as the database.

Your job as a Back-end Developer is to program a server, telling it exactly what you would like it to do with any request. Hence the name, server-side development.

Just like the front-end, there are also tools and technologies used to build the back-end. Like said earlier, tools and technologies include programming languages.

Some programming languages used for back-end development are:

• Python
• JavaScript (Node.js)
• Ruby
• C#
• Go
• PHP

Similar to front-end development, building your back-end from scratch can be quite tedious. Because of this, back-end frameworks came into existence. Examples:

• Django (Python framework)
• Ruby on Rails (Ruby framework)
• Express (JavaScript framework)
• Spring (Java framework)
• Flask (Python framework)
• Laravel (PHP framework)
• ASP .NET (C# framework)
• Gin (Go framework)

These frameworks make it faster and easier to build the back-end. Honestly speaking, you don’t need to know all these. Knowing just one of them will suffice. Now that we have an understanding of all these, we can talk about our main discussion.

Full-stack

First, a stack is the collection of all the tools and technologies used to build an application. These include languages, frameworks, libraries, etc.

So, what is a full-stack? A full-stack is a collection of tools and technologies used to build the front-end AND back-end of an application. Note the “AND”.

In essence, a Full-stack Developer is one who can use both front-end and back-end technologies to create an application. This person is able to write both client-side and server-side code.

So when you’re asked “What’s your stack?”, it simply means: What tools do you use for development? There are a lot of full-stacks. Some popular ones are:

• LAMP (Linux, Apache, MySQL, PHP)
• MERN (MongoDB, Express, React, Node)
• MEAN (MongoDB, Express, Angular, Node)
• MEVN (MongoDB, Express, Vue, Node)
• Django, React/Vue/Angular
• Ruby on Rails, React/Vue/Angular

There's something else that needs mentioning when talking about Full-stack Development and that is the API.

API

In order for the front-end and back-end of an application to communicate with each other, or for the two parts to be able to exchange data, there has to be a well-defined means of exchanging this data. This method has to be understood by both the front-end and the back-end (and typically by both FE and BE Developers). This means is called an API.

An API (Application Programming Interface) is a means by which an application communicates with another application on the internet. It is also a means by which a part of our application communicates with another part of our application.

This is what makes it possible for Back-end and Front-end Developers to work with each other without needing to know each other's stacks.

Conclusion

All we have explained are basically the foundational knowledge of Full-stack Web Development. I really hope this gives a clearer understanding of what it is all about. If you enjoyed reading this article, I would really love to hear about it. Reach out to me via:

• Twitter - twitter.com/yensouchenna
• Email - alphadev.onyenso@gmail.com