- Open Access
- Authors : Sourabh Mahadev Malewade , Archana Ekbote
- Paper ID : IJERTV10IS060239
- Volume & Issue : Volume 10, Issue 06 (June 2021)
- Published (First Online): 29-06-2021
- ISSN (Online) : 2278-0181
- Publisher Name : IJERT
- License: This work is licensed under a Creative Commons Attribution 4.0 International License
Performance Optimization using MERN stack on Web Application
Sourabh Mahadev Malewade Information Technology Department VCET Vasai, Palghar, India
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
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
DEVELOPMENT OF WEB PAGES
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
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 . 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.
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.
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.
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
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.
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);
NodeJS ORM for MongoDB
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.
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.
I owe my deep gratitude to my family and friends for their support. Without everyones contribution, this project would not have been possible.
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.
Liang, L., Zhu, L., Shang, W., Feng, D., Xiao, Z. (2017). Express supervision system based on NodeJS and MongoDB.
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
Javeed, A. (2019). Performance Optimization Techniques for ReactJS. 2019
J. M. Spool, Content and design are inseparable work partners, 2014. Retrieved September 29, 2017, fromhttps://articles.uie.com/ content and design
Bozikovic, H., Stula, M. (2018). Web design Past, present and future. 2018 41st International Convention on Information and Communication Technology, Electronics and Microelectronics (MIPRO).
Carter, B. (2014). HTML Architecture, a Novel Development System (HANDS): An Approach for Web Development. 2014
Sterling, A. (2019). NodeJS and Angular Tools for JSON-LD. 2019 IEEE 13th
Laksono, D. (2018). Testing Spatial Data Deliverance in SQL and NoSQL Database Using NodeJS Fullstack Web App. 2018
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
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.
Tags used in HTML. World Wide Web Consortium. November 3, 1992. Retrieved November 16, 2008.
R. Irony, D. Cohen-Or, and D. Lischinski, Colorization by example, in Proc. Eurograph. Symp. Rendering, vol. 2. 2005, pp. 201-210.
First mention of HTML Tags on the www-talk mailing list. World Wide Web Consortium. October 29, 1991. Retrieved April 8, 2007.