Learn about the common technologies that typically make up an entire full stack web application
Contents
- What is Fullstack Development?
- Frontend Development
- HTML
- CSS
- JavaScript
- Frontend Frameworks
- Webpack
- Transpilers
- Templating Engines
- Backend Development
- Servers
- Backend Programming Languages
- Backend Frameworks
- Package Managers
- Databases
-REST APIs
- Cloud
- IaaS (Infrastructure as a Service)
-PaaS (Product as a Service)
-SaaS (Software as a Service)
What is FullStack Development?
Every website can be split up into two parts, the Frontend and the Backend.
The Frontend is essentially everything that the user/client is able to see and interact with on the browser. For instance, images and buttons that appear on the website are generated from the frontend and have some sort of functionality when clicked on. The main technologies in the frontend are HTML, CSS, and JavaScript.
The Backend, on the other hand, saves and manages data such as a user's first name, last name, email, or any other data that the site utilizes. The main concepts behind a backend are servers, databases, and the cloud.
Frontend Development
In this section, we will be taking a look at what technologies the front end environment generally consists of and how they communicate with the backend.
HTML
HTML stands for HyperText Markup Language and we use this to add content to our web page. To implement this, the language consists of the use of tags such as <h1> or <p> to return a header with content or paragraph of text. There are many tags that eventually create a tree like structure on an html document and returns content on the browser. However, when using just plain HTML, the website looks very plain.
CSS
CSS stands for Cascading Style Sheets, and this is what helps with the design of a webpage. With CSS, we can add custom properties to tags to adjust their sizing, color, etc.
JavaScript
JavaScript is a programming language that helps make the webpage much more interactive. For instance, we can create a button with an HTML tag and design it with CSS, but JavaScript allows the button to perform some sort of action, like logging in.
JavaScript uses the DOM (Document Object Model) to change the webpage and allow for interactivity. The DOM is basically the tree like structure created by HTML and JavaScript can add functionality to certain HTML tags. However, standalone JavaScript code makes the code very long and complicated, so we need frameworks and libraries to simplify this process.
Frontend Frameworks
JavaScript frameworks make it easier to maintain a webpage by making use of simpler code and faster updates on the DOM. The most popular JavaScript Frameworks are:
React
Angular
Vue
Frameworks in a general sense simplify code for any technology and nowadays there are thousands of frameworks out there. A popular CSS framework for instance is Bootstrap. There are also frameworks that go hand in hand like React with Material-UI.
Webpack
JavaScript tends to be written in a way where there are multiple files that need to be compiled together to make use of their functions, but it lacks features for organizing this code. We need a bundler to put together our split-up code into one file, and that's where webpack comes in.
Transpilers
Transpilers can add extra features onto a technology and make it much more enhanced. For instance, a well-known transpiler called TypeScript can be used to make JavaScript much more specific and secure and it can then convert this enhanced Javascript to plain JavaScript for the browser to read.
Templating Engines
A templating engine allows you to create reusable chunks of code which can be inserted into HTML documents. This saves time and makes your code more efficient. Some common templating engines are:
Mustache
EJS
Pug
How Does the Frontend Communicate with the Backend?
To communicate with backend, we use XMLHttp Requests which can be simplified using tools like fetch and axios. Let's take a look at what's in the backend.
Backend Development
Any computer can send another message to another computer through the internet. The client-side sends the message while the server-side receives the message and can return a response.
Servers
Servers communicate with the client to exchange and prepare data for the frontend. To communicate with the server we'll need to use backend programming languages.
Backend Programming Languages
We need a backend language to communicate to server. Some popular backend languages are:
Javascript (NodeJS)
Python
Ruby
Java.
"JavaScript is different in that it uses NodeJS which is a runtime environment that allows JavaScript to be both a frontend and backend language"
Backend Frameworks
Using backend frameworks helps us easily write code to server by eliminating complexity. Some of the well-known frameworks are:
NodeJS (ExpressJS)
Python (Django)
Ruby (Ruby on Rails)
Java (Spring)
Package Managers
Packages are pieces of code that other people wrote to make use of common tasks such as login features or a payment system. To manage packages we need a package manager. The most popular package managers are:
JavaScript (npm)
Python (pip)
Ruby (bundler)
Java (maven)
Databases
We need somewhere to store and manage data for websites and that's where databases come in. The most popular databases, also known as RDMS (Relational Database Management Systems) are:
MySQL
PostgreSQL
MongoDB
"Many people confuse MySQL with SQL. SQL stands for Structure Query Language and RDMS essentially uses SQL to interact with the database."
REST APIs
The process of the frontend communicating with the backend and databases involves requests and responses. This is considered the Requests - Response Cycle
There are many types of requests such as:
GET - get data in the server/database
POST - create data in the server/database
DELETE - delete data in the server/database
UPDATE - update data in the server/database
Utilizing these requests involves an API which stands for Application Program Interface where data is interacted with using these types of requests
The naming convention behind this request is called REST which stands for Representational State Transfer and this is a very common way of making requests.
Cloud
Cloud Computing is growing exponentially because it's much more efficient utilizing the cloud rather than spending tons of money on physical servers and data centers.
The most popular cloud computing companies are:
AWS
Google Cloud
Microsoft Azure
These companies offer a variety of cloud services that fall into three categories:
Iaas (Infrastructure as a service)
It's a lot more cost effective to renting computers or virtual machines from companies that already have them in place. It allows you to have more computing power and you're able to utilize resources like load balancers to distribute traffic evenly.
PAAS (product as a service)
PAAS helps companies upload their backend code to a cloud server which then integrates everything for them automatically. Some well-known PaaS are:
AWS Elastic Beanstalk (AWS)
App Engine (Google)
App Service (MSFT Azure)
SAAS (Software as a service)
Microservices are tiny services that users can use for their own functionality. For instance, Twilio has a microservice for emails, so a user just needs to connect their backend to Twilio to utilize the feature with ease. There can be multiple backends to different microservices.
Other Databases
While the primary databases are MySQL, PostgreSQL, and MongoDB, there are other databases with different use cases. Databases like Redis helps with overloading, AWS S3 serves as a blob storage, Snowflake helps with analytics, and there are tons of more databases out there.
Resources:
Comentários