This post will explain full-stack web development and how to become a full-stack developer. I hope you enjoy it as much as I did. 😊
What is Full-stack Development?
In simple terms, this refers to the Creation of web applications' front end (client-side) and back end (server-side) elements and DevOps.
Who is a Full-stack web developer?
A full-stack web developer is a developer or architect who can deal with both the front and back finishes of a product application, which implies they can easily take on projects requiring information bases, client confronting sites and even customer joint effort all through the planning cycle.
They are also well-versed in both business logic and user interface, allowing them to get their hands dirty and advise and collaborate on strategy.
I previously mentioned the frontend (client-side) and backend (server-side) of a web application. But, first, you'll need to understand what that entails. 👇👇👇
What is Frontend Development(client-side)?
This skill set entails presenting your website and how it is viewed in browsers and mobile devices. In addition, a frontend developer must be familiar with HTML and CSS and the client-side scripting language JavaScript.
A frontend developer aims to build an interactive platform that allows visitors to communicate with one another in real-time and a platform that provides and receives information. A frontend developer's range of abilities may likewise incorporate client experience and UI plan, which can assist a group with picking the best procedures for introducing and obtaining information.
Here is a sample snippet of HTML, CSS, and javascript.
HTML snippet
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Sample</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
<h1>I am a headline made with HTML</h1>
<p>And I am a simple text paragraph. The color of this text is styled with CSS. Click the button below to remove me through the power JavaScript.</p>
<button>Hide the text above</button>
<script src='main.js'></script>
</body>
</html>
CSS snippet (main.css)
body {
font-family: sans-serif;
text-align: center;
padding: 3rem;
font-size: 1.125rem;
line-height: 1.5;
transition: all 725ms ease-in-out;
}
h1 {
font-size: 2rem;
font-weight: bolder;
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
color: green;
}
button {
cursor: pointer;
appearance: none;
border-radius: 6px;
font-size: 1rem;
padding: 0.75rem 1rem;
border: 1px solid navy;
background-color: blue;
color: white;
}
JAVASCRIPT snippet (main.js)
$('button').on('click', function() {
$('p').css('opacity', 0);
});
Client Software(FrontEnd)
HTML, CSS, Bootstrap, JavaScript, ES5, HTML DOM, JSON, XML, jQuery, Angular, React, Vue, Backbone.js, Ember.js, Redux, Storybook, GraphQL, Meteor.js, Grunt, Gulp etc.
image credit
What is Backend Development?
It refers to the server-side development of a web application, focusing on how the website works. It is responsible for the Creation, editing/update, and recollection of data and some of the processes most often associated with backend development.
The backend (sometimes known as "server-side") is the part of a website you don't see. It's in charge of storing and organizing data and ensuring that everything on the client-side functions appropriately. The backend interacts with the frontend, sending and receiving data that is presented as a web page.
Below is a snippet of how a simple NodeJS Backend code includes a rate limiter implementation and socket.io integration.
const express = require("express");
const path = require("path");
const http = require("http");
const socketio = require("socket.io");
const apiRoutes = require("./src/routes");
const rateLimit = require("express-rate-limit");
const { PORT } = process.env;
const app = express();
const server = http.createServer(app);
const io = socketio(server, {
cors: {
origin: "*",
methods: ["GET", "POST"],
},
});
const limiter = rateLimit({
max: 100,
windowMs: 60 * 60 * 100,
message: "Too many requests from this IP, please try again in an hour!",
});
app.use("/api", limiter, start(io), apiRoutes);
app.use(express.static(path.join(__dirname, "public")));
io.on("connection", () => {
console.log("Socket Connection Established...");
});
server.listen(PORT, () => {
console.log(
`::: server listening on port ${PORT}. Open via http:
);
databaseConfig();
});
server.on("error", (error) => {
console.log(`::> an error occurred in our server: \n ${error}`);
});
A typical software application comprises three components: the front end, the back end, and the database.
Server Side Technologies(Back-end)
PHP, ASP, C++, C#, Java, Python, Node.js, Express.js, Ruby, REST, GO, SQL, MongoDB, Firebase, PaaS (AWS, GCP, Azure, and Heroku), and more programming languages.
Image credit
FrontEnd vs BackEnd vs Fullstack
I hope you now have a better understanding of full-stack development.😉
The FULL STACK system in a single picture
Image credit
Popular Stacks:
MongoDB, Express, AngularJS, and Node.js make up the MEAN Stack.
The MEAN stack is a JavaScript-based full-stack framework for building online applications.
- MongoDB - document database
- Express(.js) - Node.js web framework
- Angular(.js) - a client-side JavaScript framework
- Node(.js) - the premier JavaScript web server
Django Stack: Django, Python, and MySQL as Database.
The Django stack is a Python-based full-stack framework for building online applications. After the three primary technologies that make up the different layers of the pile.
- Django - a high-level Python framework
- Python - a programming language
- MySQL - relation database
MERN Stack: MongoDB, Express, ReactJS, and Node.js
The MERN stack is a JavaScript-based full-stack framework for building online applications. After the four major technologies that make up the different layers of the stack.
- MongoDB - document database
- Express(.js) - Node.js web framework
- React(.js) - a client-side JavaScript framework
- Node(.js) - the premier JavaScript web server
MEVN Stack: MongoDB, Express, VueJS, and Node.js
The MEVN stack is a JavaScript-based full-stack framework for building online applications.
- MongoDB - document database
- Express(.js) - Node.js web framework
- Vue(.js) - a client-side JavaScript framework
- Node(.js) - the premier JavaScript web server
MERGN Stack: MongoDB, Express, ReactJS, GraphQl, and Node.js
The MERGN stack is a JavaScript-based full-stack framework for building online applications after the five major technologies that make up the layers of the system.
- MongoDB - document database
- Express(.js) - Node.js web framework
- React(.js) - a client-side JavaScript framework
- GraphQl(.js) - a query language for your API
- Node(.js) - the premier JavaScript web server
LAMP Stack: Linux, Apache, MySQL, and PHP.
The LAMP stack is a PHP-based full-stack framework for building online applications after the four major. These major technologies make up the layers of the system.
- Linux - server for modern operating systems
- Apache - a programming language
- MySQL - relation database
- PHP - a powerful server-side programming language
Conclusion
I hope you find this helpful! Don't forget to share with others.
You can also get in touch with me on Twitter.
Thank you 🎉
