Design of Optimized E-Commerce Website using Web Assembly

Web Designing is one the major concern by all the industrialists and business people. There are many technologies used in designing websites. Today, many online shopping portals have come up and one the major issues in the design of such E-commerce websites is to provide high speed usability. The motivation of this paper comes from the desire to learn the increasingly growing field of web designing. The word “design” in web designing means visual and user interface (UI) design of a web site. The main concern of the website app vistor is the visual impressions of the web site and the ease of usability of the web site. Also the visitor is concerned about the secure and the run time of usage of the website based on the technologies used. The web site design if it is not properly architected will become difficult to change. Hence the users are also concerned with the performance of the web site. The user’s concerns also to be considered to design the website and therefore many new features has to be included in web designing with effective database design and easy navigation. Hence the objective of this proposed work is to design an optimized electronic commerce website using the new technology of web designing namely Web Assembly or wasm with user interface which will enable the users to browse, search, get and buy the items of their choice with secure and fast run-time.


Introduction
Web designing is major concern of all the business people. Today, these business people promote their business through website. Also many online businesses like shopping has emerged in a large extent and the users started using the online shopping website to shop the items they need. Hence web designing has become a major part of this era. The users concerns more about the ease of use of the website, it should be secure with good run time and load time.
The technolgies used in the development of website are HTML, CSS, Javascript, etc. Javascript was used in web browser earlier but has performance related issues and compilation target issues. The old javascript compilation is shown in the Figure 1.
Hence new technologies are used in the design of websites. WebAssembly is a new technology used to develop mobile web apps or websites 1 . WebAssembly is also termed as wasm. This is a new portable one for designing website with load time or run time efficient format. This was designed by W3C. WebAssembly is secure, fast, efficient, debuggable and an open web platform 2 . This wasm 3 is considered as binary format for designing websites. Many browsers support WebAssembly. The Figure 2 shows the compilation of WebAssembly. This types of websites can be termed as Progessive Web Apps (PWA) 4 .

Keywords: E-Commerce, Website, Web Assembly, Web Design
The rest of the study is organized as follows. Section 2 outlines the related work. Section 3 describes the proposed work. Section 4 shows the results and discussion and Section 5 gives the conclusion.

Literature Survey
An Optimised Web Browsing on Heterogeneous Mobile Platforms 5 which uses a machine learning approach to exploit the heterogeneous mobile platform for energy efficient web browsing. In particular, it focuses on determining -for a given optimisation goal -the optimal processor configuration the type of processor cores to use to render the webpage and at what frequencies the processor cores of the system should operate.
The optimized web browsing is portable across computing environments. This is achieved by using machine learning approach by building predictors. These predictors are built based on extracting knowledge from web contents. These trained models are used to predict the configuration for given workload and optimization.
This technique uses the extension of Google Chromium browser and applied to 500 webpages and evaluated for load time, energy consumption and energy  delay product. This shows improvement over over a stateof-the-art web-aware scheduling mechanism and the Linux Heterogeneous Multi-Processing scheduler for all the three metrics. Our predictor is based on a number of features extracted from the HTML and CSS attributes.
WebAssembly is designed in such a way that it is embedded within a host environment 6 . This WebAssembly implementation runs inside a web browsers's Javacript engine. This provides efficiency in performance of the webapps.
Many AI applications have started using mobile hardware. The performance comparison 7 is made between native code and the browser implementations like Javascript, ASM.js and WebAssembly. The use of WebAssembly gives better performance.
The genomic variations of cancer datasets 8 are determined using a tool which was developed using WebAssembly. The use of WebAssembly makes the programs executing rapidly. This helps the scientists to use the tool easily to detect genomic variations.

Proposed Work
This paper proposes an automatic approach to providebetter performance and energy efficient Web designing using WebAssembly. The Figure 3 shows the system architecture of the proposed work.
The first step in the proposed work is create product catalog which includes displaying product categories, product details and product description, vendors, price, etc. The front end used in designing the website are WebAssembly (Wasm), HTML5, CSS3, Javascript, React and Redux. The shopping cart is implemented using PHP which acts as a backend for storing the items selected into the local database. The database design is implemented using MySQL. Also, an array data structure is used to show the shopping cart summary control. The customers can login through login page and access the secured areas of the website. The access to the secured pages of the website is given only after the customer logs in the website.
The most important advantage of an online store is customizing the website based on the user preferences. According to the user preferences, the product recommendations are given to the user, thereby trying to increase the sales of online store. The product recommendations are given based on the past user's purchases and based on data gathered from other users with similar preferences.
The catalog administration is an administrative interface is implemented for easy management of the web store data. The catalog administration page allows the administrator to add or remove style, and update the details of existing styles, view and manage the categories that belong to a style, manage the list of products in a specific category, and edit product details, existing products can be assigned to additional category or another category, delete the product from the catalog, manage orders and manage the shopping carts by removing those which haven't been updated by the customer in certain amount of time. The Figure 4 shows the designed E-commerce website namely Healthy Spices.

Results and Discussion
The website designed using WebAssembly (WASM) provides the components of the web page and converts them into binary format. The WebAssembly modules can be loaded into JavaScript app and functionality can be shared between both. This makes to take the advantage of the performance of WebAssembly and expressiveness of Javascript. The payment system is integrated through instamojo which is a third party application programming interface and mail integration is implemented with the help of SMTP protocol and the user receives message through mail. WebAssembly works as cross-platform compilation system outside the context of the system.   The Figure 5 shows the webapp added to homescreen in mobile and Figure 6 shows the shopping cart design in the webapp.
The users can select the items and put those items in the shopping cart and order the items using credit or debit cards. The working of the designed website is same as the other e-commerce websites, but the difference lies in the technology used for designing the website or webapp. The technology used is WebAssembly which is the future of web development.
WebAssembly brings linguistic diversity which allows the developers to design the applications in their preferred language. WebAssembly also boosts the speed of execution and loads the webapp faster to enable ease of use for the users. The run time performance is also improved by using WebAssembly. Many browsers support the code compiled by wasm format. Many games have been developed using WebAssembly.
Progressive Web Apps (PWA) are developed using WebAssembly. The main advantage of PWA is that the appearance of the web apps will be like mobile apps, works also in offline, ie., there is no need of internet connectivity for working with PWA's. Thus this study shows the importance of webapps development using the accelerating web development technologies.

Conclusion and Future Work
The design of optimized Electronic commerce Website makes the user to buy the products using payment integrated and mail integrated application. The simplest way to collect money online with payment links is instamojo which are PCI-DSS certified and boast of 98% transaction success rate. This also shows the benefit of webapps developed using WebAssembly. The use of WebAssembly in developing webapps improves the load time and performance of the webapps.