Performance Optimization using MERN stack on Web Application

Performance Optimization using MERN stack on Web Application

Sourabh Mahadev Malewade Information Technology Department VCET Vasai, Palghar, India

Archana Ekbote

Information Technology Department VCET Vasai, Palghar, India

AbstractIn todays expeditiously moving business world, its extremely crucial to be able to understand client demand in the most efficacious and ahead of time. If our customers could have our business online and have that at their fingertips to our products or services, it would have a greater impact on their day-to-day life, which would also create an ecosystem of doing business online and serving customers on a large scale. Shopping online or doing business online has become a lifestyle for the younger generation per se. e-commerce web application, which retails n number of products has given people access to the basic necessity to luxury products. This project allows viewing various products on a web user interface and enables registered users to get hold of desired products instantly using desired payment options. This project dispenses an approachable way for business owners to view orders placed. In contemplation to establish an e-commerce web application, several technologies have been studied and acknowledged. Technologies that have been included are, React.js, MongoDB, Node.js, Express.js. This is a project to ease the accessing of various products and establish a web application where a customer is delivered with an exhaustive web application and also to understand the technologies used to demonstrate such an application. This paper will discuss each of the fundamental technologies to create and implement an e- commerce web application.

Index TermsReactJS, NodeJS, MongoDB, ExpressJS, Opti- mization using MERN STACK

1. INTRODUCTION

   Electronic commerce is doing business in products or ser- vices using the Internet. Electronic commerce uses technolo- gies such as mobile commerce, electronic funds transfer, inter- net marketing, supply chain management, online transaction processing, inventory management systems, automated data collection systems, and electronic data interchange (EDI). E- commerce customarily has been using the World Wide Web for at a minimum one segment of the transactions life cycle, whilst it might as well utilize other technology such as email, etc. E-commerce businesses may employ Online e-commerce web applications for retail sales uninterrupted to consumers. Providing or engaging in online marketplaces, which process third-party B2C or C2C sales. Business-to-Business buying

   and selling. Accumulating and using demographic information through web application contacts and social media platforms. Marketing to the potential customer and entrenched customers by e-mail. Formulating in retail for instigating the latest services and products. As reported by an Associated Chambers of Commerce and Industry of India study, the online retail market in India may expand to Rs.70 billion by 2015 from Rs.20 billion in 2011 as internet admittance improves. India has always been a land of tremendous potential. The socioe- conomic situation in the country has enhanced many folds after independence and India is now evolving as one of the foremost countries in the world. Moreover, with a population of over 100 crores and a growth rate of above 6 percent, it can be said to be a marketing giant. Hence it can be well established that why online business and shopping in India is rising at an expeditious rate over the years. As technology is spreading to the remotest villages of India and many job opportunities are presenting themselves to the youth more and more people are obtaining awareness and the money to purchase the expensive and luxurious product over any web application which provides retail products and services. E- commerce web applications support the interaction between different parties participating in a commerce trade as well as the management of the data involved in the process via the internet on social media platforms. Electronic commerce is gaining progress on a start-up company and the momentum it gains as the business grows as an acknowledged and used busi- ness model. More corporate companies are implementing web application providing functionality for performing commercial trade over the internet to better reach clients as it is correct to say that the process of shopping on the web application is becoming common these days. An online store is a virtual marketplace on the Internet where clients can browse the catalog of various products and services and select products of interest. The picked products or services may be collected in the cart. At the moment, check out the items in the cart that will be produced to the clients as an order. At the checkout screen, all the information regarding client details to complete the transaction will be required. conventionally, clients will be

   asked to fill or select a shipping address for the delivery of the product, a shipping option according to selected options by the client, a billing address of the client, and payment details. E- commerce has changed the practice of trading on a large scale, timing, and technology of b2c and b2b markets environment, changing everything from transportation to client behavior. The Environmental Impacts of E-Commerce are, Reduced Carbon Footprint. Less Need for Product Presentation. A New Lease on Life for Used Goods.

   Fig. 1. Disintermediation/Reintermediation

2. RELATED WORK

   1. DEVELOPMENT OF WEB PAGES

      Todays commercial internet foundations started in 1990. At the end of 1990, Tim Berners-Lee created basic concepts of the World Wide Web and many tools for efficient web usage. Those tools encompass HyperText Transfer Protocol (HTTP), HyperText Markup Language (HTML), the first web browser and code editor, first web server, and first web page which described new term, world wide web and method of develop- ing own web page [1]. From 1990, the internet was evolving fast, and the progress of its development can be described through four generations (Fig. 2) [3]. The first web generation web pages were static, and not frequently updated, and users could only read web content. The main motto was read the only web. All web pages were written with HTML and the main communication protocol was HTTP [3]. The second generation starts 2004, and terms that make it are various social networks, blogs, the possibility of the user creating web page contents, and enhancement of user experience browsing web interface. During that period, famous social networks have appeared, like Facebook, Twitter, LinkedIn, and others. Those social networks enabled global user connection. Also at that time, new technologies appeared, like JavaScript, Document Object Model (DOM), Ajax, Cascading Style Sheets (CSS), eXtensible HTML (XHTML), eXtensible Markup Language (XML), eXtensible Stylesheet Language (XSL), and Flash that enable the web services presentation and delivery, without web distribution problems. The third web generation starts in 2010, and it is marked with the semantic web (adding

      semantics to the web), content personalization, intelligent search, and computers ability for creating various content. Ontologies are used for meaning representation and reasoning. Besides ontologies, technologies that are also used within a third web generation are Resource Description Framework (RDF), Web Ontology Language (OWL), and others. For the 4th generation, people might be able to call Internet 4.0 the active web. In the current web 3.0, the use of search engines is still crucial, and that gives us knowledge, in its largest contentweb applications, which we can use as per our needs. Web 4.0 will be different from this. When fully established, it will not have several of the steps which are needed when using web 3.0, this way its use can be more direct and invisible.

      Fig. 2. Web Generations

   2. DESIGNING STAGES OF WEB PAGES

   Design is the universal language in the visual world, and web design refers to the user interface of the web page. The main purpose and goal of the design are to put content into focus, so users easily reach and use web content [5]. Because of various technological changes and trends, web design has changed a lot, from first web generation web page which showed contents using a simple textual web page, through a second-generation web page with lots of graphics, vivid colors to achieve memorable web pages, and finally towards todays simple and intuitive web design. Web page design should always be modern and have updated content.

3. METHODOLOGY

   To establish the web application MERN stack was used. The web application was developed using the MERN stack using Mongoose and MongoDB database. Chrome developer tools were utilized while testing using redux tools for simulation. The following section discusses MERN stack components and their implementation.

   1. NodeJS

      Node.js is authored in C ++ language, which is a JS operating environment. Node.js is a JS runtime environment. Node.js uses the Google Chrome V8 engine for good perfor- mance. Node.js uses event-driven, asynchronous programming

      Fig. 4. NodeJS Request Flow

      Fig. 3. Increase in total websites

      callback functions, and designed using single-thread architec- ture. Node.js design uses the event-driven as the fundamental core concept for its environment, which gave us the various number of APIs that are event-based and asynchronous in nature which has helped us in building the website using node.js for our back-end development. As we used Node.js, it used the corresponding callback function according to our web applications business logic. These callback functions are executed asynchronously, which means that although these functions appear to be registered sequentially in the logic, they do not depend on the code written in which they appear, but rather wait for the execution of the corresponding event to fire. The main advantage of Event-driven and asynchronous programming is that it uses single-threaded architecture. The execution of the call back function code is done without wait- ing for a certain code to complete, and the limited resources were used for other tasks that were to be executed as our web applications business logic. This design was suitable for our back-end development, which was also the goal of our system. In server development, handling synchronous requests was a major task, and blocking had the lead, to not fully use the resources or wasting it. Through single thread ar- chitecture, asynchronous callback functions, we improved the utilization of resources and optimized our website performance which also gave us the desired results while testing. From the supported module provided by Node.js, we can see that many of the functions, including file operations, are executed asynchronously, which is different from other languages. To ease the development of the server, Node.js uses especially large network modules, Including HTTP, DNS, NET, UDP, HTTPS, TLS, etc., developers can establish a Web server using these network modules.

   2. ExpressJS

      We used Express as it is a Node.js framework. while building the application we studied that instead of creating loads of node modules and writing the code with NodeJS,

      Express made it simpler and easier to write the back-end code and implement it in a structured format. Express helped us in designing our web applications and APIs required in our project as it supports many middlewares which makes the code shorter and easier to write. Asynchronous programming and Single-threaded architecture are the biggest advantages of using Express in our application. For our application robust API Created a new folder to start our express project and the steps for it are, we had to add a command in the command prompt to initialize the package.json file. After that, we had to accept the default settings and continue. npm init is the command to start.

      Fig. 5. ExpressJS Request Flow

   3. ReactJS

      React.JS is the front-end library of the JavaScript program- ming language. We used React.JS for building our user inter- face for the web application, as it is used for the development of a single-page application because it can render dynamically changing data at a high speed. React allows developers to code in JS and create User Interface components. We studied virtual DOM objects in React.JS, which we implemented in our project. Any changes we made in our e-commerce web application caused the entire User-Interface to re-render the virtual DOM. This allows us to compare the potential difference between the DOM Object and Virtual DOM. We used JSX, It made our code easier and simpler to write in React application.[4] React.JS uses Components. Components are

      the building blocks of User-Interface wherein each component had a logic related to our e-commerce application and it con- tributed to the overall User-Interface of our web application. Components can be reused, and it helped our code for web application easier to be understood by other developers and overall web application better at performance.

      We started our react application by first installing create- react-app using npm or yarn. npm install create-react-app global OR yarn global adds create-react-app are the two commands for using npm or yarn respectively. After that, we created a new react app by using. create-react-app ourappname Then navigate into the our app name folder and type yarn start or npm start to start your application.

   4. MongoDB

      We used Document-Oriented Database i.e. MongoDB for our project MongoDB is a database where every record is a document format. Behind the scenes on the server, MongoDB converts our JSON data into a binary version of it which is basically stored and queried more efficiently. MongoDB uses BSON to query database. MongoDB stores BSON format both internally, and over the network, but that does mean we cant think of MongoDB as a JSON database. we can represent any data in JSON format which can be natively stored in MongoDB, and retrieved just as easily in JSON format. As we studied and implemented MongoDB we can say that it is flexible and allows its users to create schema, databases, tables, etc. After installing MongoDB we had an option, of using Mongo shell as it gives us a JavaScript interface through which the users can interact and carry out any operations relating to querying. MongoDB is a document-oriented database, so it is easy to index documents. and that is the reason it handles response at a faster pace. MongoDB is Scalable In the MongoDB database, we handled large data by dividing it into a nested documented structure. MongoDB is a database server that allows us to run multiple database on it.

      Simple commands such as use command is used to create a database. done using a use command: use databasename; use databasename; Creatingatable : If thecol- lectiontabledoesn0 texist thenanewcollectiontablewillbecre- ated : db.createCollection(collectionname); Insertingrecordsin- tothecollection : db.collectionname.insert ( id : 1, Name

      : Knight, Department : Tech, ); Queryingadocument : db.collectionname.find(Name : Knight).forEach(printjson);

   5. Mongoose

   NodeJS ORM for MongoDB

4. RESULTS AND DISCUSSION

   The current work for the e-commerce web application development project is done using MERN stack technologies. This project aims to provide a critical review of the relevant literature in the e-Business field and also to describe key aspects of the methodology that we have applied throughout the project. This project maaged to understand various issues that arise while building an e-commerce web application. We

   Fig. 6. MERN Stack Architecture

   Studied that e-commerce websites are not simple software artifacts. Mastering the necessary technologies/stack for estab- lishing any web application is needed. Focusing on other chal- lenges that come up throughout the development process, like performing website evaluation, conducting market research, and choosing the right business model for our e-commerce web application was done. These are the first and most crucial steps that will ensure that the final E-commerce application, will be developed according to the needs of the market and will be customized to the needs of its client. Further research and more focus were given on software tools for testing. All the necessary decisions were made on how the website will be built depending on the results of the problem investigation stage since they played a major role in describing the specific client requirements for the web application.

5. CONCLUSION AND FUTURE WORK

As of now, the current web application on e-commerce busi- ness aims to provide a critical review of the relevant literature in the e-Business field and also to describe key aspects of the methodology that we have been applied throughout the project. More study and understanding of new technologies and new frameworks and testing tools will help the web application to grow and perform better. In the coming future, web development using different technologies can be useful to many businesses in India as well as around the world, as it creates an ecosystem of digitization and provides ease of business to every individual in the world.

ACKNOWLEDGMENT

I owe my deep gratitude to my family and friends for their support. Without everyones contribution, this project would not have been possible.

REFERENCES

1. Office for National Statistics, Internet users in the UK: 2016. Retrieved September 26, 2017, from https:// www.ons.gov.uk/ businessindus- tryandtrade/itandinternetindustry/bulletins/internetus ers/ 2016.

2. Liang, L., Zhu, L., Shang, W., Feng, D., Xiao, Z. (2017). Express supervision system based on NodeJS and MongoDB.

3. M. R. Solanki, A. Dongaonkar, A Journey of human comfort: web1.0 to web 4.0, International Journal of Research and Scientific Innovation (IJRSI), Volume III, Issue IX, pp. 75-78, 2016

4. Javeed, A. (2019). Performance Optimization Techniques for ReactJS. 2019

5. J. M. Spool, Content and design are inseparable work partners, 2014. Retrieved September 29, 2017, fromhttps://articles.uie.com/ content and design

6. Bozikovic, H., Stula, M. (2018). Web design Past, present and future. 2018 41st International Convention on Information and Communication Technology, Electronics and Microelectronics (MIPRO).

7. Carter, B. (2014). HTML Architecture, a Novel Development System (HANDS): An Approach for Web Development. 2014

8. Sterling, A. (2019). NodeJS and Angular Tools for JSON-LD. 2019 IEEE 13th

9. Laksono, D. (2018). Testing Spatial Data Deliverance in SQL and NoSQL Database Using NodeJS Fullstack Web App. 2018

10. Patil, M. M., Hanni, A., Tejeshwar, C. H., Patil, P. (2017). A qualitative analysis of the performance of MongoDB vs MySQL database based on insertion and retriewal operations using a web/android application to explore load balancing Sharding in MongoDB and its advantages

11. A. Hertzmann, C. E. Jacobs, N. Oliver, B. Curless, and D. H. Salesin, Image analogies, in Proc. 28th Annu. Conf. Comput. Graph. Interact. Tech., 2001, pp. 327-340.

12. Tags used in HTML. World Wide Web Consortium. November 3, 1992. Retrieved November 16, 2008.

13. R. Irony, D. Cohen-Or, and D. Lischinski, Colorization by example, in Proc. Eurograph. Symp. Rendering, vol. 2. 2005, pp. 201-210.

14. First mention of HTML Tags on the www-talk mailing list. World Wide Web Consortium. October 29, 1991. Retrieved April 8, 2007.

15. JavaScript specification. Retrieved from http://www.w3.org/standards/ webdesign/script, November 1, 2014.