Building Blocks of a Full Stack Web-App

Invalid Date

View the original post.

As a beginner developer, it can be hard to figure out what technologies you need to learn and how to fit it all together to produce a production ready full stack web-app.

What exactly is an API and how does it relate to the frontend? What languages and frameworks should I be using? What resources should I use to learn all this stuff?

These are the types of questions I’ll be answering down below.

iWhat is a full stack web-app?

Put simply, a full stack web-app is an application built with both a frontend (client side) and a backend (server side).

The frontend is the visible part of the application which the user can see and interact with in the browser. It’s responsible for your users experience and should run smoothly, provide the expected information and work without visible bugs or problems.

The backend refers to the server side of the application that can’t be accessed by the user. It’s responsible for any complex logic, making queries for data from a database or an external API and securely dealing with sensitive information (such as emails and passwords) away from the view of the user.

The frontend and backend will frequently communicate with each other as the user navigates the app. For example, an E-Commerce store might ask the backend for a list of products and all relevant information such as prices and reviews etc. The backend would then query the database to get the required data then send it back to the frontend so that up to date and relevant information is provided to the user.

Examples of full stack web applications:

iFrontend

Frontend development refers to the “client-side” where the main priority is providing the user with the best possible experience and all required information.

These are the 3 components to building the frontend:

iHTML & CSS

HTML is the foundation of any web page and is where all frontend development starts.

It is a markup language which uses tags to identify different types of content and the purposes they each serve to the page.

For example, below is a basic numbered list:

List Item 1
List Item 2
List Item 3
List Item 4

And below is the HTML code responsible for that list. The ol tag represents an ordered (numbered) list, the li tag respresents a list item.

<ol>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 1</li>
</ol>

CSS is responsible for giving a page it’s entire style including layouts, colors, fonts and more. Not only that, if you want to change the style on different screen sizes (responsiveness), CSS is responsible for that too.

Basically, you can think of CSS as a list of rules for how the different HTML elements in a page should look.

Check out the list below which is the same one from above but with CSS applied.

List Item 1
List Item 2
List Item 3
List Item 4

And below is the CSS responsible for the styling changes. You can see that 3 different rules are applied to each li list item.

li {
    color: #0f7cd0;
    font-weight: 800;
    font-style: italic;
}

Recommended learning resources:

iCSS Preprocessors

A CSS preprocessor is a program that lets you generate CSS using its own unique syntax.

There are many preprocessors to choose from and each add different features that don’t exist in pure CSS such as mixins, nesting, and functions. They are especially useful for large full stack web-apps since they offer more flexibility and maintainability.

Some of the most popular ones today:

iCSS Frameworks

CSS frameworks provide a basic structure and generic functionality for styling a web app and deals with common and repetitive problems.

They’re extremely useful for quickly building a frontend without having to start from scratch and can usually be overridden with your own CSS at any time.

Some of the most popular ones today:

iJavaScript

JavaScript is at the heart of frontend development and is what’s used to modify content and make the web app behave differently depending on a user’s actions.

Common uses for JavaScript include confirmation boxes, buttons and handling form inputs.

For example, JavaScript can be used to make an alert popup when a button is pressed.

const button = document.getElementById('button');

button.onclick = function () {
    alert('Hi! This is an alert!');
};

Recommended learning resources:

iFrameworks

When building a full stack web-app, it’s likely that you’re going to want to use a JavaScript framework (or library).

A JavaScript framework provides developers with a collection of pre-written code that solves many of the recurring problems that consistently pop up in frontend development. Although more complex than any other area of frontend development, it’s worth learning to use at least one since it makes life as a full-stack developer much easier.

You will often see the words framework and library used interchangeably but there are slight differences. Libraries (React) offer code that you can plug into your web app when needed whereas frameworks (Angular) provide a more rigid structure (or framework) for you to build your frontend on.

There are many frameworks and libraries with different pros and cons to each. Right now the most popular frameworks are React, Angular and Vue.

iReact

Created and maintained by Facebook, React is by far the most popular frontend framework.

React encourages modularity and scalability in your frontend making it perfect for web-apps of all sizes.

Features include:

Recommended learning resources:

iAngular

Angular is an opinionated framework released by Google in 2016 in answer to the massive success of React in 2016.

It was built to target web-apps that require a more rigid and structured approach on the frontend and is suitable for large applications. This is especially the case due to it’s suitability for using TypeScript.

Features include:

Recommended learning resources:

iVue

Vue was created with the aim of combining the best of Angular (the view layer) and the best of React (the virtual DOM) and it’s fair to say that they succeeded.

It offers a nice middle ground between the two with the option of a simple view layer like React and the option to build a full end-to-end framework with routing and data-binding like Angular.

Features include:

Recommended learning resources:

Although not as popular as the top 3 frameworks right now, it’s also worth checking out other rising frameworks such as Svelte and Ember.

iBackend

The backend is the foundations that the rest of the app is built on.

These are the 4 main components to the backend:

Although you can build the frontend and backend in any order (or at the same time), I think it makes sense to start building out the backend first. It’s much easier to develop the frontend when you’ve already planned out what data you’re going to need and how you’re going to access that data.

iAPI

API stands for Application Programming Interface and is the method any application interacts (interfaces) with the backend.

The most widely used type of API is a RESTful API which basically just means that there’s a set of standardized rules about how communication with the backend should take place.

In a web-app, the frontend would make HTTP requests to the backend through specific API routes (urls) and the backend would return a response with data.

There are 4 parts to a RESTful API:

Learn more about API’s with this great video by Free Code Camp.

iLanguages & Frameworks

Since the backend runs on a server (instead of in the browser), it can be built using a variety of languages and frameworks.

Learn about some of the most popular backend frameworks below.

iJavaScript & Node.js

JavaScript can be used for both frontend and backend thanks to Node.js which makes it possible to run JavaScript code outside the browser.

Node.js is increasingly a very popular choice for the backend, especially for frontend devs who are already experienced with JavaScript. It’s extremely well supported, is easy to learn and use, has many useful NPM packages and allows you to make a full stack web-app in the same development environment.

Recommended learning resources:

iPHP & Laravel

PHP is a server-side scripting language that was designed specifically for developing web-apps.

Laravel is a PHP framework which makes development much easier through many built in features. These include a modular packaging system, a complete authentication system, automatic testing and more.

Recommended learning resources:

iC# & ASP.NET

C# is a simple and modern strongly typed object oriented programming language developed by Microsoft.

When used together with the ASP.NET Core framework, you’re able to build dynamic and secure web-apps with a complex and organized backend. It also has the NuGet package system which is easy to use and is full of useful packages.

Recommended learning resources:

iPython & Django

Python is one of the most popular languages due to it being easy to learn, well supported and efficient.

Django makes it simple to build a web-app which is versatile, scalable and secure.

Recommended learning resources:

As well as these languages and frameworks, you can also use Golang, Java, Ruby and C++.

iDatabases

Databases are the brains of the backend and is the main component that makes a web-app dynamic.

This is where all the data is stored and is where data is retrieved from or saved to with every request to the backend. Using the E-Commerce store example, every product and all of it’s details will come from a database as will the users account and order information.

There are two main types of databases: SQL & NoSQL (or relational and non-relational) databases.

The difference is in how they’re built, the type of information they store, and how they store it.

iSQL (Relational)

SQL databases use SQL (structured query language) to query for data and are structured in rigid tables, like phone books that store phone numbers and addresses.

When to use an SQL database:

Popular SQL databases:

Recommended learning resources:

iNoSQL (Non-Relational)

NoSQL databases use JSON documents to store data with key-value pairs. Seperate documents will hold specific data like a users account details, product review information or profile information.

When to use a NoSQL database:

Popular NoSQL databases:

Recommended learning resources:

iWhere should I go from here?

You now know everything you need to learn in order to build a full stack web-app from scratch.

If you want some more direction, here are some great learning resources which use a variety of technologies and languages:

Be sure to also check out this list of fullstack web-app ideas if you’re struggling to get an idea of what to build.

Paul Brady's blog

Building Blocks of a Full Stack Web-App

iWhat is a full stack web-app?

iFrontend

iHTML & CSS

iCSS Preprocessors

iCSS Frameworks

iJavaScript

iFrameworks

iReact

iAngular

iVue

iBackend

iAPI

iLanguages & Frameworks

iJavaScript & Node.js

iPHP & Laravel

iC# & ASP.NET

iPython & Django

iDatabases

iSQL (Relational)

iNoSQL (Non-Relational)

iWhere should I go from here?