Understanding Full Stack Web Application Development with applying engineering principles and practices.

15 min readFeb 25, 2022

Hi..! I’m Isuru Pathum Herath. In this blog, let’s see what is full-stack and what are engineering principles and practices we can apply.

What you will learn

What is full-stack web application development?
Technologies and tools used in full-stack web development.
Engineering principals and practices.

Now it’s time to start our tour to explore the above-mentioned areas…!

1. What is full-stack application development?

Before understanding what is full-stack, let’s see what are front-end development and back-end development. These are the most popular terms in web application development.

Frontend development is developing the UI that interacts with the end-user. The User Interface(UI) must be satisfied with User Experiences(UX). The frontend development is also the main task of developing a web application. The UI must be well planned and well developed before deployment in the production environment. Because the end-user can be a person who just only has basic knowledge about computers. The UI must be easy to use and easy to understand for any kind of user that interacts with the production environment. Otherwise, the application may be useless because the end-user won’t be able to use the system easily, then as a result users won’t like the application and the application would be left by the users. The developers who develop the frontend are called frontend developers.

Backend development is developing the server-side of the application. We know what is happening in the frontend development now. But it is not enough to have only the best for the application that we are developing. All functionalities must be performed as expected without slowing and interrupting the productivity of the application. The backend developer is also has a responsibility of the product quality same as the frontend developers.

Now you understand what is backend development and frontend development. So What is full-stack development?

Full-stack development is referred to the development of both the frontend and backend of a web application.

A full-stack web developer can design a full web application and website including both frontend and backend. They are working on designing and implementing the client-side (frontend) and also designing, implementing, debugging, and maintaining the server-side (backend) with interacting with the databases and other related tools.

Cool..! Now you know what is full-stack web development. I know now you are waiting to know what are technologies and tools full-stack developers are using today. It’s time to go forward to look at them..!

2. Technologies and tools used in full-stack web development

The frontend and backend have different technologies to apply for a product that contains the best quality. Let’s see what are the technologies that used for full-stack web development.

There are so many programming languages and related technologies for front-end development. Such as HTML, CSS, Bootstrap, Javascript, ES5, HTML DOM, JSON, XML, jQuery, AngularJS, React, Redux, GraphQl, Gulp, Grunt, Backbone.js, Ember.js, Typescript. These mentioned languages are commonly used for design, implementation, and styling the frontend according to the UX/UI designing patterns.

Same as for the frontend development, there are different programming languages and technologies that are used for backend development. Such as PHP, ASP, C++, C#, Java, Python, SQL, Go, REST, Ruby, Node.js, Express.js, MongoDB, Sass, Less, Firebase.com, Parse.com, PaaS (Heroku, Azure, Oracle, and AWS)

Now let’s discuss the purposes and other details about the above-mentioned languages and technologies.

Frontend Development

HTML

This name is a short form of Hyper Text Markup Language. This is the standard markup language to implement web pages. The HTML elements are working as the building blocks of a web page.

CSS

CSS is coming with Cascading Style Sheets. This is used for the styling purpose of the designed web pages using HTML.

Bootstrap

This is the most popular CSS framework to develop responsive web applications. The developer can design the web page to be responsive for Desktop, Tables, and mobile devices according to their screen size. It is customizable and easy to use.

JavaScript

HTML and CSS can only be used to design the webpages. But they are not programming languages. They cannot even define variables. So as the solution “JavaScript” is the programming language for web pages. This can calculate, manipulate and validate data.

ES5

EX5 is the short form, of ECMAScript 5. This is known as JavaScript 5 also. This is the 5th edition. Now the ES6, ES7 are to use as developed editions.

HTML DOM

This is an Object Model for HTML. This defines HTML elements as objects and properties, methods, events for all elements. HTML DOM is an AI for JavaScript.

JSON

This is the short form of JavaScrip Object Notation. JSON is a lightweight format for storing and transporting data on a web page. JSON is self-describing and easy to use and understand. This is used to send data from a server to a web page.

XML

XML is the eXtendable Markup Language that is used for distributing data over the internet. Therefore XML is an important role in many different IT systems. It is very useful for a web developer to understand XML.

jQuery

This is a JavaScrip library that simplifies JavaScrip programs well. This is easy to learn and easy to use.

AngularJS

Angular can extend HTML with HTML attributes called directives. This offers functionality to HTML-based applications. The important thing is Angular provides both built-in directives and user-defined directives. It lets you use HTML as your template language. AngularJS is a structural framework for dynamic web apps.

React

React is a JavaScript library created by the Facebook company. This allows you to create a web UI using HTML, CSS, DOM, ES6, Node.js, and npm. React is for building User Interfaces. Therefore this is called a UI library. This helps you to build UI components.

Redux

Redux can be used as a data store for any UI layer. Although React and React Native are the most popular, bindings for Angular, Angular 2, Vue, Mithril, and other frameworks are also available. Redux merely offers a subscription mechanism that any other programs may utilize.

GraphQL

GraphQL was created to make APIs that are quick, versatile, and developer-friendly. It may even be used within the GraphiQL integrated development environment (IDE). GraphQL, a REST alternative, allows developers to create queries that pull data from various sources in a single API call.

Gulp

Gulp is a streaming task runner that allows developers to automate a variety of development processes. Gulp reads files as streams and pipes them to different jobs at a high level. These jobs are based on code and rely on plugins.

Grunt

Grunt employs the utilization of temporary files. Gulp makes use of Node streams. Grunt completes jobs one at a time. Gulp juggles many jobs at the same time.

Backbone.js

BackboneJS is a lightweight JavaScript toolkit that allows you to create and organize web-based client-side applications. It includes an MVC framework that abstracts data into models, DOM into views, and binds the two together with events.

Ember.js

Ember is a front-end framework alone. It includes several ways to interface with the backend of your choosing, but Ember does not handle this backend in any manner.

Typescript

TypeScript may be used to create both client-side and server-side JavaScript applications (as with Node. js or Deno). Transcompilation can be done in a variety of ways. To convert TypeScript to JavaScript, you may use either the default TypeScript Checker or the Babel compiler.

Backend Development

PHP

PHP is a server-side scripting language that may be used to create dynamic, interactive Web sites. PHP is a popular, free, and efficient alternative to competitors like Microsoft’s Active Server Pages (ASP).

ASP

ASP stands for Active Server Pages ASP is a development framework for building web pages. There are many different development models such as Classic ASP, ASP.NET Web Forms, ASP.NET MVC, ASP.NET Web Pages, ASP.NET API and ASP.NET Core. ASP and ASP.NET are server-side programming languages. Both approaches allow an Internet server to run computer code. When a browser requests an ASP or ASP.NET file, the ASP engine examines the file, runs any code included inside it, and provides the output to the browser.

C++

C++ is a popular programming language that is used to create computer programs and backends of web application development.

C# (C-Sharp) is a Microsoft programming language that runs on the.NET Framework and can be used to create online apps, desktop apps, mobile apps, games, and much more.

Java

The programming language Java is widely used. Java is a programming language that is used to create mobile apps, web apps, desktop apps, games, and much more.

Python

Python is used on the server-side to create web applications. Not only that,
This language is commonly used to create websites and applications, automate operations, and do data analysis. Python is a general-purpose programming language, which means it can be used to develop a wide range of applications and isn’t specialized for any particular problem.

SQL

SQL is a language for interacting with databases. It is the standard language for relational database management systems, according to ANSI (American National Standards Institute). SQL statements are used to conduct operations like updating data in a database and retrieving data from one.

Go (also known as Golang or Go language) is an open-source general-purpose computer language. Google developers created Go to construct stable and efficient software. Go is statically typed and explicit, and is most closely modeled after C.

REST

A REST API (also known as a RESTful API) is a type of application programming interface (API or web API) that adheres to the REST architectural style’s limitations and allows interaction with RESTful web services. Roy Fielding, a computer scientist, invented REST, which stands for representational state transfer.

Ruby

Ruby is a general-purpose programming language that may be used for a variety of tasks. Ruby is an excellent language for creating desktop programs, static webpages, data processing services, and even automation solutions. Web servers, DevOps, and web scraping and crawling are all examples of where it’s employed.

Node.js

Because of its single-threaded nature, Node. js is best suited for non-blocking, event-driven servers. It was created with real-time, push-based architectures in mind and is utilized for standard web pages and back-end API applications.

Express.js

Express. js is a Node. js web application framework that is free and open-source. It is used to rapidly and simply design and create web apps.

MongoDB

MongoDB is a NoSQL database management system that is free and open source. Working with massive quantities of dispersed data is a breeze with NoSQL databases. MongoDB is a database management system that can store and retrieve document-oriented data.

Sass

Sass is a CSS pre-processor. This reduces the repetition of CSS and therefore saves time.

Less

You may conduct specific mathematical operations within the codes with the Less CSS preprocessor to extract desired values using multiplication, division, addition, and subtraction. These arithmetic procedures may be used to colors and variables in addition to integers.

Firebase.com

Google Firebase is a Google-backed app development platform that allows developers to create apps for iOS, Android, and the web. Firebase delivers analytics monitoring, reporting, and app issue fixes, as well as marketing and product experimentation capabilities.

PaaS

PaaS is a full cloud development and deployment environment with resources that enable you to produce everything from simple cloud-based apps to sophisticated, cloud-enabled business systems.

Before moving on to the next level, let me show you the most popular frontend and backend development tools and languages today used.

Now you understand what are the purposes of different technologies and different programming languages used in full-stack development. So as the next step, let’s see what are the engineering principals and best practices of full-stack web development.

3. Engineering principals and practices

Here we are going to discuss what is SOLID Principle is and understand the purpose of using it.

What is the SOLID Principle?

SOLID can be applied in various programming languages. So here let’s assume we are talking about full-stack web development.

SOLID principles are introduced by Robert C.Martine that also known as Uncle Bob.

These principles outline best practices for designing software while keeping in mind the project’s long-term maintenance and expansion. Adopting these techniques can also help you avoid code smells, restructure your code, and design Agile or adaptive software.

So here are whatSOLID stands for

S — Single-responsibility Principle
O — Open-closed Principle
L — Liskov Substitution Principle
I — Interface Segregation Principle
D — Dependency Inversion Principle

Now let’s look at them one by one to have a brief idea.

Single-responsibility Principle

Single-responsibility Principle (SRP) states:

“A class should have one and only one reason to change, meaning that a class should have only one job.”

Each function you write should only do one task. It should have a single, well-defined objective. You’ll be shocked how many times you wish your function could perform more than “one thing.” You’ll also have trouble articulating what the “one thing” you want to accomplish is regularly.

Open-closed Principle

The open-closed Principle (OCP) states:

“Objects or entities should be open for extension but closed for modification.”

This means that a class should be able to be extended without requiring changes to the class itself.

The Open-Closed Principle states that our JavaScript modules should be extensible but not modifiable. That is, if someone wants to increase the functionality of our module, they won’t have to alter the current code if they don’t want to. You may use a simple rule of thumb to help you out here. You’ve failed the open-closed principle if I have to access your module’s JS file and perform a modification to expand it.

Liskov Substitution Principle

Liskov Substitution Principle states:

“Let q(x) be a property provable about objects of x of type T. Then q(y) should be provable for objects y of type S where S is a subtype of T.”

Every subclass or derived class should be interchangeable with its base or parent class.

I found this example from StackOverflow. I would like to share it with you in this blog.

A wonderful example of LSP (provided by Uncle Bob in a recent podcast I listened to) was how something that seems fine in normal language doesn’t always work in code.
A Rectangle is a Square in mathematics. It is, in fact, a rectangle’s specialty. The “is a” makes you want to use inheritance to model this. However, if you make Square inherit from Rectangle in code, then a Square should be used anyplace a Rectangle is expected. This results in some unusual behaviors.
Imagine your Rectangle base class included SetWidth and SetHeight methods; this looks totally sensible. SetWidth and SetHeight don’t make sense if your Rectangle reference is a Square, because adjusting one would modify the other to match it.
Square fails the Liskov Substitution Test with Rectangle in this scenario, because inheriting from Rectangle is a faulty abstraction.

Interface Segregation Principle

Interface segregation principle states:

“A client should never be forced to implement an interface that it doesn’t use, or clients shouldn’t be forced to depend on methods they do not use.”

The term “interface segregation” really refers to the practice of not creating bloated user interfaces. Because JavaScript lacks interfaces.

Dependency Inversion Principle

The dependency inversion principle states:

“Entities must depend on abstractions, not on concretions. It states that the high-level module must not depend on the low-level module, but should depend on abstractions.”

You may have heard of dependency inversion previously but under a different name. The terms Dependency Injection and Inversion of Controls are interchangeable. This is the most well-known of the principles.

Dependency Injection is all about transferring control from the function to the function’s caller. It’s specifying who has control over the type of parameters the function gets in our scenario.

Here I wanted to give you a brief idea about these principles without going so far. Now I think you know what is SOLID and how they are working.

Before the move to talk about practices, I think it is better to discuss how we can approach solutions for a business problem.

Approaching the solution

Software engineering refers to the use of systematic engineering principles in the creation of software products and applications. It is a discipline of engineering concerned with assessing user requirements, software design, development, testing, and maintenance.

In software engineering every time we have to solve business problems. They might be a solution that depends on the whole product quality and functionalities. Always we must find the best technical solution to solve the problem.

I am going to show you the steps we can use to do it easily without taking too much time to get the best solution.

Think throughout the problem
Divide and Conquer
KISS
Learn, especially from mistakes
Always remember why software exists
Remember that you are not the user

Let’s go through with one by one.

Think throughout the problem

First, we must think about the problem on every side that we can apply a solution. It is like designing the software solution in mind. Mainly understand the real problem before applying the solution. Otherwise, your effort may be wasted after identifying the real problem when you be quick before identifying the real issue. Maybe this may get some time, but this is the best way to enter to resolve the problem that you have to implement the solution. You can note and think and design the steps that you are going through. Then it would be so easy to apply without understanding. Make sure to ask questions and clarify any kind of part that you are not clear with.

Divide and Conquer

Divide your problem into small pieces. It is easy to eat small pieces that eat the whole pizza a once. So you understand that, make sure to divide and clear every single part. This may help you to understand the problem easily without time waste.

KISS

We all love each other. But this kiss is about to KEEP IT SIMPLE AND STUPID. What it means is, don’t be stressed with the problem but don’t think you know everything as much to solve the problem easily. You must be in the middle of both. Otherwise, it may be a problem to solve the real problem.

Learn, especially from mistakes

Accept the modification. Always try to anticipate as many changes as possible. Don’t overengineer it, but leave room for expansion. Learn from the mistake that you have done before. They are called experiences that we can develop well. The experience is the building block of a well-developed software engineer. Don’t put your experience in the bin. Take them out! and look at them. Learn what you missed and don’t keep repeating them.

Always remember why software exists

You must have a clear idea about the product that you are implementing. And the audience that going to use. Why this software for? and that is the actual solution’s starting point.

Remember that you are not the user

Keep it in your mind! You are not the end-user. The user might not have much idea about computer systems, but your system must be familiar with them without making them stressed. Keep it simple and make them happy.

Cool..! Here you got the idea of approaching a solution for business problems as a software engineer.

Let’s see what are practices we can apply in our software product.

Practices

Practices make it easy to deliver a quality product in time with all the functionalities. Here I am going to tell some of the best practices used in the industry.

Unit Testing

Unit testing is a software development technique in which the smallest testable pieces of a program, referred to as units are examined separately and independently for correct functioning. Software developers and, on occasion, QA employees use this testing approach during the development process.

There are several unit testing tools are using in the industry.

Junit
NUnit
JMockit
EMMA
PHPUnit

Code Quality

Code quality distinguishes between good (high quality) and bad (low quality) code (low quality). Quality, good, and terrible is all subjective terms. Depending on the situation, various teams may employ different meanings. For an automobile developer, high-quality code might imply several things.

Code Review

The act of actively and methodically gathering with one’s fellow programmers to review each other’s code for problems, also known as Peer Code Review, has been proved to speed and streamline the process of software development as few other methods can.

Version Controlling

The method of recording and controlling changes to software code is known as version control, sometimes known as source control. Version control systems (VCS) are software tools that aid software development teams in managing source code change over time.

Here are some tools used for version control.

GitHub
GitLab
Beanstalk
PerForce
Apache Subversion
AWS CodeCommit
Oracle Developer Cloud Service

Continuous Integration

Continuous integration is a DevOps software development approach in which developers integrate their code changes into a common repository on a frequent basis, followed by automated builds and testing.

Here are some examples of CI tools.