International Journal of Scientific Research & Engineering Trends

Volume 7, Issue 3, May-June-2021, ISSN (Online): 2395-566X

A Survey Paper on Full Stack Web Development

Manish Bagal, Gaurav Kadam, Ajay Bandgar, Abhijit Salunkhe Prof. R.M. Kedar
Department of Computer Engineering, Department of Computer Engineering,
Savitribai Phule Pune University, KJ College of Engineering & Management
Pune Research, Pune - India

Abstract-The complexity of Web sites is increasing and transforming into Web applications that contain business logic,
interactivity, transaction handling and states. This phenomenon forces the Web developers to adapt more traditional software
engineering techniques to keep the Web applications error free, maintainable, reusable, well documented etc. Many Web
developers do not use any engineering techniques at all and design mainly to create as fashionable applications as possible with
no regards on the application’s functionality. This results in applications that are hard to maintain and with poor
functionality. The purpose with this thesis was to see if the use of a more traditional software engineering technique, namely
the Unified Modeling Language with the newly added Web Application Extension, resulted in a Web application with good
design regarding the maintainability of the application. To investigate the maintainability of an application, the
maintainability was further divided into three sub criteria: extensibility, reusability and documentation. These three criteria
were then applied on a case study where a Web application was designed. From the analysis of the final design, using the three
criteria, the maintainability was derived. This paper examines the four components of MEAN stack (Mongo DB, Express.js,
Angular.js &Node.js) and how they go well together, their benefits as a complete stack in web development. This paper also
describes the work flow and server architecture in detail to understand the working of these four technologies employed in the
MEAN stack web development. This paper mainly focuses on roles of these four technologies in MEAN stack and how they are
popularly implemented in present times.

Keywords- AngularJS, Full stack web development, Nodejs, Express.JS, MongoDB, Amazon S3(Simple Storage service).

I.INTRODUCTION This website is develop using MEAN stack and it is non-

profit free to use to all students and teachers.as someone
To research and understand the working and intricacies of upload any study material which will immediately
the modern technologies employed in the MEAN (Mongo available to all users there is no need to pay for any
DB, Express.JS, Angular, NodeJS) stack web development document or no need to make any account
practices. The practicality of FULL-STACK development
employs the MEAN Technologies and their ease-of-use II. BACKGROUND STUDY
characteristics for the modern developer.
If you look at it from an eagle-eye view, full-stack
The four Technologies comprising the MEAN stack are development has existed since the beginning of
Mongo DB as database, Express as the Server Framework, programming, but the meaning of the term in its current
Angular for front-end and Node.js as an event-driven context is not the same as it was before. The current
I/O(input/output) server-side JavaScript environment. The meaning of full stack development only came to light in
main characteristic of the MEAN stack is that all four 2008, when designing for the web as well as mobile
technologies are based on java script and JSON became mainstream. Earlier to this, the term in a different
(JavaScript Object Notation) which is used to exchange capacity was regularly used in the 1970s as well as
data across these technologies saving potential time 80s.The main reason behind this being, at that time there
consumption of JSON encoding. was not much difference between a back-end programmer
and a front-end one.
1. Why MEAN? :
Simplicity, uniformity and most of all, performance. The Back then, a programmer was a programmer and he could
learning curve is sharp as it does not require a programmer handle and operate both the hardware as well as software
to learn multiple programming languages, just JavaScript end of operations. Slowly over time, the distinction
is enough. With this we have also used some other between both these ideologies grew and two different
technologies like amazon web services .in which we have streams of application came into the picture, frontend and
used s3 bucket to store files we are getting from our backend development. In early 2008, full stack web
website users. S3 is easy to use and secure. development as a term started gaining momentum and

© 2021 IJSRET
1631
 International Journal of Scientific Research & Engineering Trends
Volume 7, Issue 3, May-June-2021, ISSN (Online): 2395-566X

over the years it has come to become one of the most in-  Angular JS provides data binding capability to
demand job roles of present times. HTML. Thus, it gives user a rich and responsive
experience.
III. THE MEAN STACK  Angular JS code is unit testable.
 Angular JS uses dependency injection and make use
Currently most popular and widely used open-source web of separation of concerns.
development stack is the LAMP (Linux, Apache, MySQL,  Angular JS provides reusable components.
and PHP) stack. Here Linux is the Operating system,  With Angular JS, the developers can achieve more
Apache as the web server, MySQL as database and PHP as functionality with short code.
the programming language used for server-side scripting.A  In Angular JS, views are pure html pages, and
newly emerging web development stack is the MEAN controllers written in JavaScript do the business
stack which uses Mongo DB as database, Express as a processing. On the top of everything, Angular JS
flexible server framework that provides routing and applications can run on all major browsers and smart
handles request and response, Angular works at the client phones, including Android and iOS-based
side. phones/tablets.

IV. ANGULAR JS V. BOOTSTRAP

Angular JS is framework manage by Google, it helps build Bootstrap is the popular HTML, CSS and JavaScript
responsive sites. Angular JS use to make a smooth web framework for developing a responsive and mobile
performance. Angular JS is a toolset for building the friendly website. Bootstrap is the most popular HTML,
framework most suited to your application development. It CSS and JavaScript framework for developing a
is fully extensible and works well with other libraries. responsive and mobile friendly website.
Every feature can be modified or replaced to suit your
unique development workflow and feature needs. Angular It is absolutely free to download and use. It is a front-end
JS is a JavaScript framework. It can be added to an HTML framework used for easier and faster web development. It
page with a <script> tag. Angular JS extends HTML includes HTML and CSS based design templates for
attributes with Directives, and binds data to HTML with typography, forms, buttons, tables, navigation, modals,
Expressions. image carousels and many others.

AngularJS extends HTML with new attributes. AngularJS It can also use JavaScript plug-ins. It facilitates you to
is perfect for Single Page Applications (SPAs).AngularJS create responsive designs.
is easy to learn.
1. Why Use Bootstrap?
The idea turned out very well, and the project is now  Mobile first approach − Bootstrap 3, framework consists
officially supported by Google AngularJS is a structural of Mobile first styles throughout the entire library instead
framework for dynamic web applications. It lets you use them of in separate files.
HTML as your template language and lets you extend  Browser Support − It is supported by all popular
HTML's syntax to express your application components browsers.
clearly and succinctly. Its data binding and dependency  Easy to get started − with just the knowledge of HTML
injection eliminate much of the code you currently have to and CSS anyone can get started with Bootstrap. Also, the
write. And it all happens within the browser, making it an Bootstrap official site has a good documentation.
ideal partner with any server technology.  Responsive design − Bootstrap's responsive CSS adjusts
to Desktops, Tablets and Mobiles. More about the
It was originally developed by Misko Hevery and Adam responsive design is in the chapter Bootstrap Responsive
Abrons. HTML is great for declaring static documents, but Design.
it falters when we try to use it for declaring dynamic views  And best of all it is an open source
in web-applications. AngularJS lets you extend HTML
vocabulary for your application.
VI. MONGODB
The resulting environment is extraordinarily expressive,
readable, and quick to develop. MongoDB is a schema-less NoSQL document database. It
means you can store JSON documents in it, and the
1. Advantages of Angular JS: structure of these documents can vary as it is not enforced
The advantages of AngularJS are: like SQL databases. This is one of the advantages of using
 Angular JS provides capability to create Single Page NoSQL as it speeds up application development and
Application in a very clean and maintainable way. reduces the complexity of deployments.
Example:
© 2021 IJSRET
1632
 International Journal of Scientific Research & Engineering Trends
Volume 7, Issue 3, May-June-2021, ISSN (Online): 2395-566X

{ Web based applications are increasing its popularity as

"id": 110, they become easier to develop, maintain and secure. Also,
"language": "JavaScript", they are easily reachable to the clients and does not require
"price": 1900, additional installations in most cases and are quickly
} customizable. Web application is derived from web-based
system, which have additional functionality to execute
1. Why MONGODB? business logic of an organization.
MongoDB is an object-oriented, simple, dynamic, and
scalable NoSQL database. It is based on the NoSQL These applications are totally web based instead of
document store model. The data objects are stored as requiring to install a separate application on the operating
separate documents inside a collection — instead of system. Google Docs, Web based retail stores, Google
storing the data into the columns and rows of a traditional Maps, and the web-based email applications are kind of
relational database. Web applications. The Web development industry will
find two kinds of developers. i.e., Front-end developers
The motivation of the MongoDB language is to implement and Back-end developers. Front-end developers require to
a data store that provides high performance, high have knowledge of HTML, CSS, and a programming
availability, and automatic scaling. MongoDB is language to add effects and more to the front – end i.e.,
extremely simple to install and implement. MongoDB uses JavaScript. They build the web sites display and effects
JSON or BSON documents to store data. General which are shown to the clients by converting the
distributions for MongoDB support Windows, Linux, Mac designer‘s design. Back-end Developers build the business
OS X, and Solaris. logic behind any web application.

VII. PROS The actions for instance adding and retrieving news
highlights to and from a web application, or sending email
from a web-based forms, or authenticating a visitor or
 Document oriented
client‘s credentials are all part of back-end developers. A
 High performance
backend developers need to know languages like PHP,
 High availability — Replication .NET, Java, and others. Back-end developers should also
 High scalability – Sharding have knowledge of databases like My SQL, Oracle, and
 Dynamic — No rigid schema. SQL Server, or should hire or entrust a database
 Flexible – field addition/deletion have less or no administrator to work with the flow.
impact on the application
 Heterogeneous Data A database administrator will take care of database server
 No Joins and ensure its smooth performance. Full stack developers
 Distributed are jack of all trades, and they are the one who do all.
 Data Representation in JSON or BSON Mostly back-end developers are required to have skills of
 Geospatial support front-end developers and vice versa and have extra burden
 Easy Integration with Bigdata Hadoop on them of learning additional skills set [4]. So, it is clear
 Document-based query language that‘s nearly as that for a developer to become full stack, he has to have
powerful as SQL expertise in languages of three kinds, i.e., Client-Side
 Cloud distributions such as AWS, Microsoft, RedHat, languages such as Java script along with HTML and CSS,
dot Cloud and SoftLayer etc.: -In fact, MongoDB is Server-Side Languages such as PHP, .NET, Java, Ruby,
built for the cloud. Its native scale-out architecture, etc., and database expertise such as SQL Server, MySQL
enabled by ‗sharding,‘ aligns well with the horizontal Server, and Oracle.
scaling and agility afforded by cloud computing.
1. Advantages of Node.JS Over Others:
Node.js is built from ground for the purpose of handling
VIII. CONS
asynchronous I/O as it is built of JavaScript and JavaScript
is built as event loop. Like the on click event for a button
 A downside of NoSQL is that most solutions are not in client-side JavaScript is and event loop. While other
as strongly ACID-compliant (Atomic, Consistency, environments do have this feature, they have it with using
Isolation, Durability) as the more well-established third party libraries or are not built from ground for the
RDBMS systems. same purpose like the Node.js and hence they are often
 Complex transaction slow, or lags and does not belongs as a standard feature to
 No function or stored procedure exists where you can them. Some of the examples are Event Machine – built for
bind the logic Ruby, twisted – licensed under open-source MIT License,
IX. NODEJS it is introduced for Python and is available since Python 2

© 2021 IJSRET
1633
 International Journal of Scientific Research & Engineering Trends
Volume 7, Issue 3, May-June-2021, ISSN (Online): 2395-566X

onwards, and network framework library for Apache language. Node.js on other hand reduces these steps by
named as Apache MINA which is also called ―Networking keeping an app permanently ON.
Socket Library‖ and is another example of providing
event-driven and asynchronous limited to APIs only. 2. Disadvantage of Node.JS Over Other:
A code in Node.js becomes fast growing, along with
Similarly, Apache Async Web is built using Apache making it difficult to debug due to the fact that it is using
MINA and Perl‘s Any Event. Similarly, an edge of event-driven/callback approach. Big drawback currently is
Node.js over others will be that it will be capable of the unavailability of ready hosting for Node.js
handling multiple requests while it will act like a client environment. Complex topics of JavaScript language such
towards the third-party services by executing only a single as prototypical inheritance, anonymous function, callbacks
thread. Other languages in this regard will block the make the language hard to learn, and thus becomes the
processing until the remote server responds first for their choice to be learnt when one has mastered another easy
initial request as a result, they will be requiring multiple language first. Node.js is not a mature language still and
threading for executions. thus faces so much hesitation to get joined by expert
programmers. Another issue is that being single-threaded,
Comparatively in Node, all that you will use is other requests are stopped if in case the CPU is occupied
asynchronous as it will become quite hard if you are to even for some parts of a second. And so, the developers
write non-asynchronous code in it. Also Node.js will never are also forced to think in asynchronous which is not easy
force to buffer data before outputting while the others like to get used with.
Event Machine, forces buffering in many cases to buffer
the data. Being server-side JavaScript, another admirable X. EXPRESS.JS
edge of Node.js over others is that a developer will be
required to only have knowledge and experience of a Express.js is a free and open-source web application
single language i.e., JavaScript, no matter if he is framework for Node.js. It is used for designing and
developing client-side scripts or scripts for server side. building web applications quickly and easily. Web
applications are web apps that you can run on a web
The developer is not required to swap his brain cycles browser. Since Express.js only requires JavaScript, it
from for one language at client side and then for another becomes easier for programmers and developers to build
language at server side. Hence JavaScript end-to-end as web applications and API without any effort.
depicted in the Figure. Here the database of JavaScript
also store date like a JavaScript Object. Adding to this, it Express.js is a framework of Node.js which means that
is also worth considering that Node.js is new and thus most of the code is already written for programmers to
have benefit of taking precautions against the mistakes work with. You can build a single page, multi-page, or
which other languages had come across in the past such as hybrid web application using Express.js. Express.js is
the mistake of backward compatibility. lightweight and helps to organize web applications on the
server-side into a more organized MVC architecture.

It is important to learn JavaScript and HTML to be able to

use Express.js. Express.js makes it easier to manage web
applications. It is a part of a JavaScript based technology
called MEAN software stack which stands for MongoDB,
Express.JS, AngularJS, and Node.js. Express.js is the
backend part of MEAN and manages routing, sessions,
HTTP requests, error handling, etc.

The JavaScript library of Express.js helps the

Fig 1. JavaScript end-to-end. programmers to build efficient and fast web apps.
Express.js enhances the functionality of the node.js. In
Figures shows that about 47% of web surfers wants a fact, if you don‘t use Express.js, then you have to do a lot
website to be loaded within 2 seconds and a 3 second of complex programming to build an efficient API. It has
delay drops the customer satisfaction by 16%. Here the made programming in node.js effortless and has given
Node.js leads as the interpreter of Node.js is smaller and many additional features.
fast compared to other languages like PHP. Here the
server-side apps are permanently kept ON unlike other 1. Why Should You Use Express.Js?
languages where every initiation of the application will Express.js supports JavaScript which is a widely used
follow cycles consuming steps of for example loading language that is very easy to learn and is also supported
configurations, followed database connectivity, acquire everywhere. Therefore, if you already know JavaScript,
required information and finally render the markup

© 2021 IJSRET
1634
 International Journal of Scientific Research & Engineering Trends
Volume 7, Issue 3, May-June-2021, ISSN (Online): 2395-566X

then it will be really easy for you to do programming using fast, inexpensive data storage infrastructure that Amazon
Express.js. uses to run its own global network of web sites. The
service aims to maximize benefits of scale and to pass
With the help of Express.js, you can easily build different those benefits on to developers.
kinds of web applications in a short period of time.
Express.js provides a simple routing for requests made by This introduction to Amazon Simple Storage Service
clients. It also provides a middleware that is responsible (Amazon S3) provides a detailed summary of this web
for making decisions to give the correct responses for the service. After reading this section, you should have a good
requests made by the client idea of what it offers and how it can fit in with your
business.
Without Express.js, you have to write your own code to
build a routing component which is a time consuming and XII. IMPLEMENTATION AND EASE-OF-
tedious task. Express.js offers simplicity, flexibility, USE
efficiency, minimalism, and scalability to the
programmers. It also has the advantage of powerful JavaScript started as a simple script that‘s meant to be run
performance as it is a framework of Node.js. by the browser. Now, however, JavaScript is everywhere.
It can be found running on smartphones, servers, Arduino,
Node.js carries all the executions really fast with the help Raspberry and in many more technological developments.
of Event Loop that avoids any kind of inefficiency. The The Edge that JavaScript has over other languages is that,
powerful performance of Node.js and the ease of coding it is Non-blocking.
using Express.js are the most popular features loved by
web application developers. Since Express.js is written in A single non-blocking thread in JavaScript is more
JavaScript, you can build websites, web applications, or efficient than using threads in languages like java. JSON is
even mobile apps using it. the common format used to exchange data between all 4
layers. Since JSON is native, no parsing is required at all.
2. Features of Express.Js: JSON is light-weight and easily consumed by JavaScript.
 Faster server-side development The most common and efficient way to use the MEAN
 Middleware stack is to use express to create a RESTful API, while
 Routing angular handles the client-side routes taking full advantage
 Templating its SPA characteristics. Only when data from the database
 Debugging is required, will the application be required to make use of
the API. This way most of the business logic can be
applied and executed on the client side. Illustration can be
found in fig.1 In the Express side of things, app handlers
are used to handle the requests and give responses. These
handlers receive the request and start request-response
cycle with middleware‘s.

Fig 2. Server Architecture of Express.JS. Fig 3. MEAN stack Architecture.

XI. AMAZON S3(SIMPLE STORAGE User management, authentication, session management

SERVICE) and the CRUD operations on mongo DB are handled by
express. Technologies can be hindered in their
Amazon Simple Storage Service (Amazon S3) is storage development if it is too hard to learn and the costs
for the Internet. It is designed to make web-scale outweigh the benefits. However, in the MEAN stack, these
computing easier.Amazon S3 has a simple web services 4 technologies seamlessly integrate with each other e.g.,
interface that you can use to store and retrieve any amount express response object can directly be supplied to angular
of data, at any time, from anywhere on the web. It gives within any need for parsing. MEAN.io and MEAN.js are
any developer access to the same highly scalable, reliable, popular Node packages that have all 4 technologies

© 2021 IJSRET
1635
 International Journal of Scientific Research & Engineering Trends
Volume 7, Issue 3, May-June-2021, ISSN (Online): 2395-566X

already pre-compiled and can be used directly without performance. Enabling CF leads to an average
needing separate setup for them. This makes it especially performance improvement (+144.11%). However, a
easy for the developers since some part of the integration number of cases has been found for which relying on the
is already automated straight out-of-the-box. CDN service is detrimental, generating up to a −43%
performance decrement, even in presence of higher costs.
XIII. FUTURE OF FULL STACK
DEVELOPMENT (MEAN STACK) By incorporating all the parts, we can interpret what full
stack was, how it has evolved and why has it evolved. The
Most popular Technologies stackoverflow‘s 2019 efficiency of workers can also be calculated and the
developer survey approximation of time taken to complete a project, and
finally people either see Full Sack Development to be dead
or overrun. However, it can be seen from the pretext that it
has been evolved and has been drastically optimized to
meet the user‘s needs.

Bootstrap allows for rapid, responsive development that is

consistent and well supported by the development and
design community. As the framework continues to
develop, the reasons to use Bootstrap keep mounting. If
you‘ve overlooked this framework, it‘s probably time to
give it a try. As you can see, there are several benefits to
using Bootstrap. The framework allows for rapid,
responsive development that is consistent and well
supported by the development and design community.

REFERENCES
[1] International Journal of Scientific & Engineering
Fig 4. Stack overflow Developer Survey 2019 (Top Research of Angular Js by Sneha Ambulkar, Student,
languages) Stack overflow Developer Survey 2019. Department of CSE, GCOE, Amravati, India.
[2] ―What is Backend Developer? Skills to become a
XIV. CONCLUSION Web Developer.‖ [Online]. Available:
https://www.guru99.com/what-is-
AngularJS can do everything that jQuery does and much backenddeveloper.html
more, yet is roughly equivalent in download size. It is easy [3] M. Wales, "Front-End vs Back-End vs Full Stack
to both write and run unit tests and end-to-end tests for Developers," Udacity, 08 December 2014. [Online].
AngularJS applications. Dependency management is Available: http://blog.udacity.com/2014/12/front-endv
effortless and intuitive. Binding dynamic data to your s-back-end-vs-full-stack-web-developers.html.
views is straightforward and powerful. directives, routing, [Accessed 25 November 2016].
services, validation, resources, animation and localization [4] GitHub Language Statistics," GitHub, November
- are equally thought out and useful tools. AngularJS is a 2016. [Online]. Available: https://github.com/
solid foundation for building testable web applications that emmanuel-keller/github-language-statistics [Accessed
scale. 10 December 2016].
[5] The New Era of Full Stack Development-International
Cloud storage services offer a fast and convenient way to Journal of Engineering Research & Technology
archive and share objects of different nature. The high- (IJERT) by Akshat Dalmia and Abhishek Raj
level management interface however, while guaranteeing Chowdary.
ease of use, hides system implementation details and [6] A Review Paper on Bootstrap Framework (IRE
performance figures. In this work we have performed an Journals) by Suraj Shahu Gaikwad, Prof Pratibha
experimental study about the performance of the cloud-to- Adkar.
user network for the Amazon S3 cloud-storage service, as [7] International Research Journal of Engineering and
it is perceived by a set of home users distributed all over Technology (IRJET) on THE MEAN STACK by Mr.
the globe. Thanks to the dataset obtained leveraging the Ninaad Nirgudkar, Ms. Pooja Singh.
Bismark platform we report a general assessment of the [8] ―Frontend vs Backend,‖ Jul. 2020. [Online].
performance of this service. We found that the US and EU Available: https://www.geeksforgeeks.org/ frontend-
cloud regions are able to offer better performance in terms vs-backend/ [2] ―What is Backend Developer? Skills
of goodput (+45.5%, on average) even at a lower cost, to become a Web Developer.‖ [Online].
although sometimes this choice leads to suboptimal

© 2021 IJSRET
1636
 International Journal of Scientific Research & Engineering Trends
Volume 7, Issue 3, May-June-2021, ISSN (Online): 2395-566X

[9] Available: https://www.guru99.com/what-is-

backend?developer.html.
[10] A comparative study of MongoDB vs. MySQL
:https://www.researchgate.net/profile/Cornelia-
Gyoroedi/publication/278302676_A_Comparative_St
udy_MongoDB_vs_MySQL/links/557fcb1a08aeea18
b7797116/A-Comparative-Study-MongoDB-vs-
MySQL.pdf?origin=publication_detail
[11] Global journal of computer science and Technology
on Node.JS Challenges in implementation by
ResearchGate.
[12] AngularJS API documentation. https://
docs.angularjs.org/, 2016. [Online; accessed October-
2020].
[13] MongoDB ―Welcome to the MongoDB
Documentation‖. https://docs.mongodb.com/
[14] Node.js, "Home page of Node.js," 2020. [Online].
Available: https://nodejs.org/en/docs/. [Accessed 22
Jan 2021].
[15] Express ―Fast, unopinionated, minimalist web
framework for Node.js‖ 2020. [Online]. Available
https://expressjs.com/
[16] Amazon S3 ―Amazon Simple Storage Service
Documentation‖. [Online].
Available:https://docs.aws.amazon.com/s3/index.html
.
[17] Bootstrap ―Get started with Bootstrap‖. [Online].
Available:https://getbootstrap.com/docs/4.1/getting-
started/introduction/
[18] Stack overflow development survey 2019 (Top
Languages) at-
https://insights.stackoverflow.com/survey/2019.
[19] ―Nodejs Tutorials‖, Tutorialspoint, [Online]
Available:
https://www.tutorialspoint.com/nodejs/index.htm 22
Jan 2021].

© 2021 IJSRET
1637